无缝滚动js代码-纵向和横向两种

发表时间：2010-04-08关注度：770 views 评论数：0

js无缝滚动效果，可应用于图片，文字等等，也可以做广告展示哦,鼠标放到图片上还会停止的。 [runcode height="250"] 无缝滚动 img{ border:0; height:100px; width:150px; } td img{ margin:0 10px; } var speed=40; var demo2=document.getElementById("demo2"); var demo1=document.getElementById("dem...

js无缝滚动效果，可应用于图片，文字等等，也可以做广告展示哦,鼠标放到图片上还会停止的。

<!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> <style type="text/css"> img{ border:0; height:100px; width:150px; } td img{ margin:0 10px; } </style> </head> <body>  <div id="demo" style="overflow:hidden;height:350px;width:200px"> <div id="demo1"> <a href="#" target="_blank"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg"></a><p> <a href="#" target="_blank"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg"></a><p> <a href="#" target="_blank"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg"></a><p> <a href="#" target="_blank"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg"></a><p> <a href="#" target="_blank"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg"></a><p> <a href="#" target="_blank"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg"></a><p> <a href="#" target="_blank"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg"></a><p> <a href="#" target="_blank"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg"></a><p> <a href="#" target="_blank"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg"></a><p> <a href="#" target="_blank"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg"></a><p> </div> <div id="demo2"> </div> </div> <script> var speed=40; var demo2=document.getElementById("demo2"); var demo1=document.getElementById("demo1"); var demo=document.getElementById("demo"); demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetTop-demo.scrollTop<=0) demo.scrollTop-=demo1.offsetHeight; else{ demo.scrollTop++; } } var MyMar=setInterval(Marquee,speed); demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script>  <div style="margin-top:20px;"> <div id="scroll_div" style="overflow: hidden; WIDTH: 778px;" align=center> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td id="scroll_begin"> <a href="#"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg" border=0></a><a href="#"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg" border=0></a><a href="#"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg" border=0></a><a href="#"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg" border=0></a><a href="#"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg" border=0></a><a href="#"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg" border=0></a><a href="#"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg" border=0></a><a href="#"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg" border=0></a></td> <td id="scroll_end"></td> </tr> </table> </div></div> <script> var speed1=40 var scroll_end = document.getElementById("scroll_end"); var scroll_div = document.getElementById("scroll_div"); scroll_end.innerHTML=scroll_begin.innerHTML function Marquee1(){ if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) scroll_div.scrollLeft-=scroll_begin.offsetWidth else{ scroll_div.scrollLeft++ } } var MyMar1=setInterval(Marquee1,speed1) scroll_div.onmouseover=function() {clearInterval(MyMar1)} scroll_div.onmouseout=function() {MyMar1=setInterval(Marquee1,speed1)} </script> </body> </html>

提示：你可以先修改部分代码再运行。

还有一个jquery版本的，代码差不多。

<!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图片向左滚动</title> <style type="text/css"> img{ border: none; } </style>  <script src="http://public.bestjia.com/v100106/js/default/jquery.js" type="text/javascript"></script> </head> <body> <div id="demo" style="overflow:hidden;width:500px;"> <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 > <tr> <td id="demo1" valign="top" bgcolor="ffffff">  <table border="0" cellspacing="0" cellpadding="0"> <tr align="center"> <td><a href="#" target="_blank"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg" width="150" height="100"></a></td> <td><a href="#" target="_blank"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg" width="150" height="100"></a></td> <td><a href="#" target="_blank"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg" width="150" height="100"></a></td> <td><a href="#" target="_blank"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg" width="150" height="100"></a></td> <td><a href="#" target="_blank"><img src="http://www.bestjia.com/site/attachments/2010/03/15_20100324132118122ni.jpg" width="150" height="100"></a></td> </tr> </table> </td> <td id="demo2" valign="top"></td> </tr> </table> </div> <script type="text/javascript"> var speed=30; var demo = $("#demo"); var demo1 = $("#demo1"); var demo2 = $("#demo2"); demo2.html(demo1.html()); function Marquee(){ if(demo.scrollLeft()>=demo1.width()) demo.scrollLeft(0); else{ demo.scrollLeft(demo.scrollLeft()+1); } } var MyMar=setInterval(Marquee,speed) demo.mouseover(function() { clearInterval(MyMar); } ) demo.mouseout(function() { MyMar=setInterval(Marquee,speed); } ) function fun1(){ alert(demo.scrollLeft()); } function fun2(){ alert(demo1.width()); } </script> <input type="button" value="显示demo.scrollLeft()" onclick="fun1();"/> <input type="button" value="显示demo1.width())" onclick="fun2();"/> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明文章转载自：网站前端,web前端,前端脚本,前端优化|时代前端 [http://www.52shidai.com]
本文链接地址：无缝滚动js代码-纵向和横向两种

标签：无缝, 横向, 滚动, 纵向

上一篇: 推荐5个漂亮的jquery主流图表插件

下一篇:Google内部SEO评估报告优化页面描述元标签

您可能感兴趣的文章

发表评论

最热文章
- 100个最漂亮|免费的wordpress模板 - 3,072 views
- 漂亮的javascript对话框(弹出层)组件[附源码] - 2,272 views
- wordpress采集插件—wp-o-matic使用详解 - 1,982 views
- 开启wordpress 3.0多用户的方法 - 1,781 views
- 12个用jQuery插件改变Button按钮的漂亮特效 - 1,765 views
- 国人原创的WordPress杂志主题wp-cms - 1,650 views
- jQuery-bind不能处理绑定hover事件 - 1,615 views
- 封装好的javascript图片滑动效果 - 1,571 views
- 推荐5个漂亮的jquery主流图表插件 - 1,557 views
- 文字向上不间断滚动代码-兼容各浏览器 - 1,362 views
最新文章
热门标签

canvas google html HTML5 JavaScript jQuery SEO wordpress 主题优化关键字兼容函数前端优化博客友情链接图片外链工具常用性能技巧排名推广插件搜索搜索引擎收录教程文章方法时间权重模板滚动漂亮特性百度经典网站菜单谷歌遍历链接鼠标滚轮

网站前端,web前端,前端脚本,前端优化|时代前端