收集的一些滚动图片的脚本！
2011-05-27 16:47
399 查看
<!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=gb2312" />
<title>无标题文档</title>
</head>
<body>
<mce:style type="text/css"><!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
--></mce:style><style type="text/css" mce_bogus="1">#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}</style>
向左滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a>
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a>
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a>
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a>
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a>
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<mce:script type="text/javascript"><!--
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
// --></mce:script>
</body>
</html> <!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=gb2312" />
<title>无标题文档</title>
<mce:style type="text/css"><!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
--></mce:style><style type="text/css" mce_bogus="1">#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}</style>
</head>
<body>
<div id="demo">
<div id="demo1">
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
</div>
<div id="demo2"></div>
</div>
<mce:script type="text/javascript"><!--
var speed=50; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
function Marquee(){
if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
else{
tab.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
// --></mce:script>
</body>
</html><!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=gb2312" />
<title>无标题文档</title>
</head>
<body>
<mce:style type="text/css"><!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
--></mce:style><style type="text/css" mce_bogus="1">#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}</style>
向下滚动
<div id="demo">
<div id="demo1">
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
<a href="#" mce_href="#"><img src="http://bbs.blueidea.com/images/default/logo.gif" mce_src="http://bbs.blueidea.com/images/default/logo.gif" border="0" /></a><br />
</div>
<div id="demo2"></div>
</div>
<mce:script type="text/javascript"><!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
tab.scrollTop=tab.scrollHeight
function Marquee(){
if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时
tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端
else{
tab.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
// --></mce:script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [脚本收集]收集Bing背景图片
- PS一些视觉图片~~在网上收集的...
- wap图片滚动特效无css3元素纯js脚本编写
- 收集的一些js小脚本
- 收集的一些经典的vbs脚本大全
- Gallery：收集一些用于展示一组图片的javascript控件
- sql注入 js脚本注入 html入侵（自己收集的一些解决方案）欢迎指正
- 收集了一些非主流个性图片
- 一些图片处理函数收集
- jquery mobile的一些插件（图片滚动）
- 网上收集到的一些小脚本代码
- 收集一些有趣的图片 这次是美女 Jennifer Katharine Gates
- 一些图片处理函数收集
- 我收集的一些资源 II: 霓虹灯效果、截取指定区域的图片、ListView分页显示
- 又一滚动图片脚本
- wap图片滚动特效无css3元素纯js脚本编写
- [脚本收集]提取国家地理图片
- jquery mobile的一些插件（图片滚动）
- 由于自己的需要搜集的一些关于 “ javascript实现图片的不间断连续滚动” 的代码
- 由于自己的需要搜集的一些关于 “ javascript实现图片的不间断连续滚动” 的代码