您的位置：首页 > Web前端 > JavaScript

在JSP中如何实现两个DIV块的跑马灯滚动

2014-08-01 17:05 344 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>js无缝滚动制作js文字无缝滚动和js图片无缝滚动</title>

<meta name="description" content="js无缝滚动制作多种无缝滚动效果js文字无缝滚动和js图片无缝滚动,直接复制副本标签js无缝滚动代码。内含js代码下载。" />

<script src="js/King_Chsance_Layer.js"></script>

</head>

<body>

<style type="text/css">

*{margin:0;padding:0;list-style-type:none;font-size:12px;}

a,img{border:0;}

.scroll{height:300px;width:500px;margin:50px auto;border:solid 1px #ddd;}

.scroll p{line-height:28px;padding:5px 0;border-bottom:dashed 1px #ddd;text-align:center;}

.scroll p a{color:#3366cc;text-decoration:none;}

</style>

<script type="text/javascript">

function addEventSimple(obj,evt,fn){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}

}

addEventSimple(window,'load',initScrolling);

var scrollingBox;

var scrollingInterval;

var reachedBottom=false;

var bottom;

function initScrolling(){
scrollingBox = document.getElementById('xst');
scrollingBox.style.overflow = "hidden";
scrollingInterval = setInterval("scrolling()",50);
scrollingBox.onmouseover = over;
scrollingBox.onmouseout = out;

}

function scrolling(){
var origin = scrollingBox.scrollTop++;
if(origin == scrollingBox.scrollTop){
if(!reachedBottom){
scrollingBox.innerHTML+=scrollingBox.innerHTML;
reachedBottom=true;
bottom=origin;
}else{
scrollingBox.scrollTop=bottom;
}
}

}

function over(){
clearInterval(scrollingInterval);

}

function out(){
scrollingInterval = setInterval("scrolling()",50);

}

</script>

<div class="scroll" id="xst">
<p><a href="http://www.17sucai.com/" target="_blank">jquery 文字滚动大全 scroll 支持文字或图片单行滚动多行滚动带按钮控制滚动</a></p>
<p><a href="http://www.17sucai.com/" target="_blank">jquery 文字连续滚动节奏感十足的齿轮式滚动图片展示与文字内容特效展示</a></p>
<p><a href="http://www.17sucai.com/" target="_blank">jquery 文字特效霓虹灯文字效果使用jQuery和CSS</a></p>
<p><a href="http://www.17sucai.com/" target="_blank">js文字滚动制作js scroll单排文字滚动向上间隔滚动</a></p>
<p><a href="http://www.17sucai.com/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></p>
<p><a href="http://www.17sucai.com/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></p>
<p><a href="http://www.17sucai.com/" target="_blank">js文字滚动插件制作双行关联向上文字间隙滚动</a></p>

</div>

<div class="scroll" id="ss">
<p><a href="http://www.17sucai.com/" target="_blank">jquery 文字滚动大全 scroll 支持文字或图片单行滚动多行滚动带按钮控制滚动</a></p>
<p><a href="http://www.17sucai.com/" target="_blank">jquery 文字连续滚动节奏感十足的齿轮式滚动图片展示与文字内容特效展示</a></p>
<p><a href="http://www.17sucai.com/" target="_blank">jquery 文字特效霓虹灯文字效果使用jQuery和CSS</a></p>
<p><a href="http://www.17sucai.com/" target="_blank">js文字滚动制作js scroll单排文字滚动向上间隔滚动</a></p>
<p><a href="http://www.17sucai.com/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></p>
<p><a href="http://www.17sucai.com/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></p>
<p><a href="http://www.17sucai.com/" target="_blank">js文字滚动插件制作双行关联向上文字间隙滚动</a></p>

</div>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jsp javascript jquery function js

相关文章推荐

新的分享

章节导航