- 浏览: 86394 次
- 性别:
- 来自: 上海
文章分类
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动合集</title>
<script type="text/javascript">
// 自动滚动
function boxmove(d1,d2,d3,e,obj){
var speed=30;
var demo=document.getElementById(d1);
var demo1=document.getElementById(d2);
var demo2=document.getElementById(d3);
demo2.innerHTML=demo1.innerHTML;
function boxTop(){
if(demo2.offsetTop-demo.scrollTop<=0){demo.scrollTop-=demo1.offsetHeight}
else{demo.scrollTop++}
}
function boxRight(){
if(demo.scrollLeft<=0){demo.scrollLeft+=demo2.offsetWidth}
else{demo.scrollLeft--}
}
function boxBottom(){
if(demo1.offsetTop-demo.scrollTop>=0){demo.scrollTop+=demo2.offsetHeight}
else{demo.scrollTop--}
}
function boxLeft(){
if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth}
else{demo.scrollLeft++}
}
if(e==1){
var MoveTop=setInterval(boxTop,speed);
demo.onmouseover=function(){clearInterval(MoveTop);}
demo.onmouseout=function(){MoveTop=setInterval(boxTop,speed)}
}
if(e==2){
var MoveRight=setInterval(boxRight,speed);
demo.onmouseover=function(){clearInterval(MoveRight)}
demo.onmouseout=function(){MoveRight=setInterval(boxRight,speed)}
}
if(e==3){
var MoveBottom=setInterval(boxBottom,speed);
demo.onmouseover=function(){clearInterval(MoveBottom);}
demo.onmouseout=function(){MoveBottom=setInterval(boxBottom,speed)}
}
if(e==4){
var MoveLeft=setInterval(boxLeft,speed)
demo.onmouseover=function(){clearInterval(MoveLeft)}
demo.onmouseout=function(){MoveLeft=setInterval(boxLeft,speed)}
}
if(e=="top"){
MoveTop=setInterval(boxTop,speed)
obj.onmouseout=function(){clearInterval(MoveTop);}
}
if(e=="right"){
MoveRight=setInterval(boxRight,speed)
obj.onmouseout=function(){clearInterval(MoveRight);}
}
if(e=="bottom"){
MoveBottom=setInterval(boxBottom,speed)
obj.onmouseout=function(){clearInterval(MoveBottom);}
}
if(e=="left"){
MoveLeft=setInterval(boxLeft,speed)
obj.onmouseout=function(){clearInterval(MoveLeft);}
}
}
</script>
<style type="text/css">
div#a,div#b,div#c,div#d { float:left;}
h2 { clear:both; }
div#b,div#d,div#bb { white-space:nowrap; }
</style>
</head>
<body>
<h1>滚动合集</h1>
<hr />
<h2>向上</h2>
<div id="a" style="overflow:hidden;height:100px;width:90px;">
<div id="a1">
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
</div>
<div id="a2"></div>
</div>
<script type="text/javascript">
boxmove("a","a1","a2",1);
</script>
<h2>向右</h2>
<div id="b" style="overflow:hidden;height:100px;width:90px;">
<div id="b1">
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
</div>
<div id="b2"></div>
</div>
<script type="text/javascript">
boxmove("b","b1","b2",2);
</script>
<h2>向下</h2>
<div id="c" style="overflow:hidden;height:100px;width:90px;">
<div id="c1">
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
</div>
<div id="c2"></div>
</div>
<script type="text/javascript">
boxmove("c","c1","c2",3);
</script>
<h2>向左</h2>
<div id="d" style="overflow:hidden;height:100px;width:90px;">
<div id="d1">
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
</div>
<div id="d2"></div>
</div>
<script type="text/javascript">
boxmove("d","d1","d2",4);
</script>
<h2>手动滚动 - <strong onmouseover="boxmove('aa','aa1','aa2','top',this);">上</strong> <strong onmouseover="boxmove('aa','aa1','aa2','bottom',this);">下</strong></h2>
<div id="aa" style="overflow:hidden;height:100px;width:90px;">
<div id="aa1">
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
</div>
<div id="aa2"></div>
</div>
<h2>手动滚动 - <strong onmouseover="boxmove('bb','bb1','bb2','left',this);">左</strong> <strong onmouseover="boxmove('bb','bb1','bb2','right',this);">右</strong></h2>
<div id="bb" style="overflow:hidden;height:100px;width:90px;">
<div id="bb1">
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
</div>
<div id="bb2"></div>
</div>
</body>
</html>
发表评论
-
JSP标准标签库
2008-02-01 16:28 824简介 JSTL是一个不断完 ... -
jsp页面动态的显示系统当前的时间
2008-04-28 18:45 962<html> <HEAD> < ... -
jsp页面动态的显示系统当前的时间
2008-04-28 19:06 1497<html> <HEAD> & ... -
文字水平滚动
2008-04-30 15:13 740前一阵子写了一篇JAXB的运用,其中讲了如何用JAXB生成X ... -
图片水平滚动
2008-04-30 15:23 831<div id="demo" sty ... -
flash加链接
2008-06-06 12:00 703<script language="JavaS ... -
兼容IE和FireFox的iframe 自动高度脚本
2008-09-09 14:57 779<iframe name="mainframe ... -
div控制首行缩进2个字
2008-09-22 12:58 798style type="text/Css" ... -
jsp隐藏按钮
2008-10-27 15:34 3324<!DOCTYPE html PUBLIC " ... -
js获取页面各种高度
2008-10-29 16:11 749if(parent.document.getElementBy ... -
Javascript鼠标事件大全
2008-11-13 14:27 627一般事件事件 浏览 ... -
JSTL语法及参数
2008-12-01 21:37 789jstl试用 JSTL语法及参数 JSTL包含以下的 ... -
window.open(theURL,winName,features); 详解
2008-12-03 12:25 770window.open(theURL,winName,feat ... -
window.open居中
2008-12-07 16:32 746<script language="javas ... -
JSP中与路径相关的常用的几个方法
2009-02-10 16:35 717http:/localhost/123/jsp/test.js ... -
js 操作frameset frame 对象收藏
2009-05-08 10:10 605框架编程概述一个HTML页面可以有一个或多个子框架,这些子框 ... -
兼容IE和FireFox的的漂浮广告
2009-09-01 10:55 653<script language="javas ...
相关推荐
不间断滚动文字 图片 不间断滚动文字 图片
jquery图片文字滚动插件
js无缝滚动制作js文字无缝滚动
jquery 文字滚动插件 scroll 支持文字单行滚动、文字多行滚动、图片单行滚动、图片多行滚动、且可以带按钮控制图片或文字滚动,是图片与文字滚动特效非常常用的一个jquery 特效。
s无缝滚动制作多种无缝滚动效果js文字无缝滚动和js图片无缝滚动,直接复制副本标签js无缝滚动代码。内含js代码下载。
js无缝滚动 图片翻滚 文字翻滚
jquery图片切换插件制作左右按钮与标题文字图片滚动切换 jquery图片切换插件制作左右按钮与标题文字图片滚动切换 jquery图片切换插件制作左右按钮与标题文字图片滚动切换
图片文字不间断滚动,图片文字不间断滚动,图片文字不间断滚动,图片文字不间断滚动
文字图片不同方向的滚动代码 文字图片不同方向的滚动代码
jquery图片文字滚动插件多组图片文字间歇滚动
不间断滚动 支持鼠标经过停止 文字图片不间断向下 向上滚动
js jquery 文字图片滚动js jquery 文字图片滚动js jquery 文字图片滚动js jquery 文字图片滚动
js滚动集合:图片滚动,文字滚动,组合滚动~~~
这是我的图片、文字横竖无缝隙同时滚动代码,(我还有消息提示、通用js所以滚动大全、模式对话框、各种js特效),希望可以帮助大家.注:此资源针对需要特效人员。
文字图片列表向上滚动javascript特效
无缝横向滚动文字图片特效,无缝横向滚动图片,文字上下滚动的特效代码,可用左右键控制滚动方向.
使用ViewSwitcher实现文字图片上下滚动
一个可以代替Marquee走马灯特效的图片滚动封装类,它可控制图片做无缝循环滚动,可以在上下左右四个方面滚动,而且具备丰富自定义设置功能。它的特点: 横向、纵向滚动格式调整 (解决横向滚动换行的问题,无需特殊...
Swift 滚动文字和图片,一行两行多行滚动,支持添加图片和标签
jQuery图片文字同时滚动切换焦点图代码