设为首页收藏本站
切换到窄版

 找回密码
 注-册

QQ登录

只需一步，快速开始

胜利之日DoD社区:二战FPS射击游戏»广场 › 休闲泡泡茶 › 电脑技术综合 › 网页制作 › javascript无缝滚动2
返回列表 发新帖
查看: 1709|回复: 3

[特效] javascript无缝滚动2

[复制链接]
Leya 发表于 2010-6-7 17:53:24 | 显示全部楼层 |阅读模式
以更少的代码实现相同的效果应该是我们写程序的究极目标，当然可读性不能丢。在第一部分最后一个运行框，我已经做了这样的探索。不过换汤不换药，还是来来回回在scrollTop/scrollLeft与offsetTop/offsetLeft上做文章。总的思路基本是这样，让某个元素整体向某个方向移动，这样它里面的内容（图片或文字）就跟着移动，当元素移动到某一个距离后就回到原点。为了防止内容移着移着就没有了，我们需要两套相同的内容。在第一部分，第二套内容是动态生成的，并复制到另一个兄弟元素中，这在水平滚动时，我们需要花一些周折来让所有内容水平排列在一起。我就想，如果把第二套内容直接加在相同的元素是否效果会更好呢？起码CSS也少写一点。用scrollTop/scrollLeft实现滚动，还有一个缺点，它对父容器的宽度与高度有严格的规定的。比如我们想上下滚动图片，ul作为容器，li的图片为滚动内容，那么ul的高至少为图片的高的两倍（我们假设每张图片的尺寸都是相等的），否则就动不了。鉴此，我开发了新一代的无缝滚动函数。
  1. <ul id="marquee">
  2. <li>
  3. <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s017.jpg" alt="无缝滚动"/></a>
  4. <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s018.jpg" alt="无缝滚动"/></a
  5. <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s019.jpg" alt="无缝滚动"/></a>
  6. <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s020.jpg" alt="无缝滚动"/></a>
  7. <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s021.jpg" alt="无缝滚动"/></a>
  8. <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s022.jpg" alt="无缝滚动"/></a>
  9. <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s023.jpg" alt="无缝滚动"/></a>
  10. </li>
  11. </ul>
复制代码
>
  1. #marquee ,#marquee li {
  2. padding:0;
  3. margin:0;
  4. }
  5. #marquee {
  6. position:relative;
  7. list-style:none;
  8. height:150px;
  9. width:200px;
  10. overflow:hidden;
  11. border:10px solid #369;
  12. }
  13. #marquee li {
  14. position:absolute;
  15. }
  16. #marquee img {
  17. display:block;
  18. border:0;
  19. }
复制代码
  1. var Marquee = function(id){
  2. try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
  3. var container = document.getElementById(id),
  4. slide = container.getElementsByTagName("li")[0],
  5. speed = arguments[1] || 10,
  6. delta = 0,//当前滚动的位置
  7. critical = slide.offsetHeight;//临界值
  8. slide.innerHTML += slide.innerHTML;
  9. var rolling = function(){
  10. delta == -critical ? delta = 0 : delta--;
  11. slide.style.top = delta + "px";
  12. }
  13. var timer = setInterval(rolling,speed)//设置定时器
  14. container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
  15. container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
  16. }
  17. window.onload = function(){
  18. Marquee("marquee");
  19. }
复制代码

  2. <!doctype html>
  3. <title>javascript无缝滚动  by 司徒正美</title>
  4. <meta charset="utf-8"/>
  5. <meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
  6. <meta name="description" content="javascript无缝滚动  by 司徒正美" />
  7. <base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
  8. <style type="text/css">
  9.   h1 {
  10.     font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
  11.   }
  12.   #marquee ,#marquee li {
  13.     padding:0;
  14.     margin:0;
  15.   }
  16.   #marquee {
  17.     position:relative;
  18.     list-style:none;
  19.     height:150px;
  20.     width:200px;
  21.     overflow:hidden;
  22.     border:10px solid #369;
  23.   }
  24.   #marquee li {
  25.     position:absolute;
  26.   }
  27.   #marquee img {
  28.     display:block;
  29.     border:0;
  30.   }
  31. </style>
  32. <script type="text/javascript">
  33.   var Marquee = function(id){
  34.     try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
  35.     var container = document.getElementById(id),
  36.     slide = container.getElementsByTagName("li")[0],
  37.     speed = arguments[1] || 10,
  38.     delta = 0,//当前滚动的位置
  39.     critical = slide.offsetHeight;//临界点
  40.     slide.innerHTML += slide.innerHTML;
  41.     var rolling = function(){
  42.       delta == -critical ? delta = 0 : delta--;
  43.       slide.style.top = delta + "px";
  44.     }
  45.     var timer = setInterval(rolling,speed)//设置定时器
  46.     container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
  47.     container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
  48.   }
  49.   window.onload = function(){
  50.     Marquee("marquee");
  51.   }
  52. </script>
  53. <h1>javascript无缝滚动(向上滚动) by 司徒正美</h1>
  54. <base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
  55. <ul id="marquee">
  56.   <li>
  57.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s017.jpg" alt="无缝滚动 by 司徒正美"/></a>
  58.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s018.jpg" alt="无缝滚动 by 司徒正美"/></a>
  59.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s019.jpg" alt="无缝滚动 by 司徒正美"/></a>
  60.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s020.jpg" alt="无缝滚动 by 司徒正美"/></a>
  61.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s021.jpg" alt="无缝滚动 by 司徒正美"/></a>
  62.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s022.jpg" alt="无缝滚动 by 司徒正美"/></a>
  63.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s023.jpg" alt="无缝滚动 by 司徒正美"/></a>
  64.   </li>
  65. </ul>
复制代码
向下滚动也很容易，只不过一开始把它定位到第一套内容与第二套内容之间，也就是slide.offsetHeight，不过我们需要把它改成负数让向整体向下移动，然后再慢慢向上移动。

  2. <!doctype html>
  3. <title>javascript无缝滚动  by 司徒正美</title>
  4. <meta charset="utf-8"/>
  5. <meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
  6. <meta name="description" content="javascript无缝滚动  by 司徒正美" />
  7. <base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
  8. <style type="text/css">
  9.   h1 {
  10.     font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
  11.   }
  12.   #marquee ,#marquee li {
  13.     padding:0;
  14.     margin:0;
  15.   }
  16.   #marquee {
  17.     position:relative;
  18.     list-style:none;
  19.     height:150px;
  20.     width:200px;
  21.     overflow:hidden;
  22.     border:10px solid #B45B3E;
  23.   }
  24.   #marquee li {
  25.     position:absolute;
  26.   }
  27.   #marquee img {
  28.     display:block;
  29.     border:0;
  30.   }
  31. </style>
  32. <script type="text/javascript">
  33.   var Marquee = function(id){
  34.     try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
  35.     var container = document.getElementById(id),
  36.     slide = container.getElementsByTagName("li")[0],
  37.     speed = arguments[1] || 10,
  38.     critical = slide.offsetHeight,//临界值
  39.     delta = -critical;
  40.     slide.innerHTML += slide.innerHTML;
  41.     var rolling = function(){
  42.       delta == 0 ? delta = -critical : delta++;
  43.       slide.style.top = delta + "px";
  44.     }
  45.     var timer = setInterval(rolling,speed)//设置定时器
  46.     container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
  47.     container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
  48.   }
  49.   window.onload = function(){
  50.     Marquee("marquee");
  51.   }
  52. </script>
  53. <h1>javascript无缝滚动(向下滚动) by 司徒正美</h1>
  54. <base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
  55. <ul id="marquee">
  56.   <li>
  57.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s017.jpg" alt="无缝滚动"/></a>
  58.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s018.jpg" alt="无缝滚动"/></a>
  59.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s019.jpg" alt="无缝滚动"/></a>
  60.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s020.jpg" alt="无缝滚动"/></a>
  61.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s021.jpg" alt="无缝滚动"/></a>
  62.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s022.jpg" alt="无缝滚动"/></a>
  63.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s023.jpg" alt="无缝滚动"/></a>
  64.   </li>
  65. </ul>
复制代码
实现水平移动也比第一部分容易，结构层完全不用改动，表现层也改动很少。
  1. #marquee ,#marquee li {
  2. padding:0;
  3. margin:0;
  4. }
  5. #marquee {
  6. position:relative;
  7. list-style:none;
  8. height:150px;
  9. width:200px;
  10. overflow:hidden;
  11. border:10px solid #B45B3E;
  12. }
  13. #marquee li {
  14. position:absolute;
  15. width:1000%;/*★★新增加★★*/
  16. }
  17. #marquee a {
  18. float:left;/*★★新增加★★*/
  19. }
  20. #marquee img {
  21. display:block;
  22. border:0;
  23. }
复制代码
难点是如何获取那个临界值，也就是夹在第一套内容与第二个套内容之间的那个位置。由于第二套内容我们并没有外套一个元素，因此我们需要从滚动对象下手。滚动对象都是a元素，我们需要计算出第二套内容的第一个a元素到达父元素左边的距离。这个值就是我们要求的临界值。明白这点，就轻松了。
  1. //*************略*********   
  2.   slide.innerHTML += slide.innerHTML;  
  3.   var item  = slide.getElementsByTagName("a"),  
  4.   critical = item[item.length/2].offsetLeft,//临界值
  5. //*************略*********
复制代码

  2. <!doctype html>
  3. <title>javascript无缝滚动  by 司徒正美</title>
  4. <meta charset="utf-8"/>
  5. <meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
  6. <meta name="description" content="javascript无缝滚动  by 司徒正美" />
  7. <base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
  8. <style type="text/css">
  9.   h1 {
  10.     font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
  11.   }
  12.   #marquee ,#marquee li {
  13.     padding:0;
  14.     margin:0;
  15.   }
  16.   #marquee {
  17.     position:relative;
  18.     list-style:none;
  19.     height:150px;
  20.     width:200px;
  21.     overflow:hidden;
  22.     border:10px solid #8080C0;
  23.   }
  24.   #marquee li {
  25.     position:absolute;
  26.     width:1000%;/*新增加*/
  27.   }
  28.   #marquee a {
  29.     float:left;/*新增加*/
  30.   }
  31.   #marquee img {
  32.     display:block;
  33.     border:0;
  34.   }
  35. </style>
  36. <script type="text/javascript">
  37.   var Marquee = function(id){
  38.     try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
  39.     var container = document.getElementById(id),
  40.     slide = container.getElementsByTagName("li")[0],
  41.     speed = arguments[1] || 10;
  42.     slide.innerHTML += slide.innerHTML;
  43.     var item  = slide.getElementsByTagName("a"),
  44.     critical = item[item.length/2].offsetLeft,//临界值
  45.     delta = 0;
  46.     var rolling = function(){
  47.       delta == -critical ? delta = 0 : delta--;
  48.       slide.style.left = delta + "px";
  49.     }
  50.     var timer = setInterval(rolling,speed)//设置定时器
  51.     container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
  52.     container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
  53.   }
  54.   window.onload = function(){
  55.     Marquee("marquee");
  56.   }
  57. </script>
  58. <h1>javascript无缝滚动(向左滚动) by 司徒正美</h1>
  59. <base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
  60. <ul id="marquee">
  61.   <li>
  62.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s017.jpg" alt="无缝滚动"/></a>
  63.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s018.jpg" alt="无缝滚动"/></a>
  64.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s019.jpg" alt="无缝滚动"/></a>
  65.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s020.jpg" alt="无缝滚动"/></a>
  66.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s021.jpg" alt="无缝滚动"/></a>
  67.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s022.jpg" alt="无缝滚动"/></a>
  68.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s023.jpg" alt="无缝滚动"/></a>
  69.   </li>
  70. </ul>
复制代码
下面是向右滚动，由于都是不足20行的脚本，应该一看源码就明白，不详述了。

  2. <!doctype html>
  3. <title>javascript无缝滚动  by 司徒正美</title>
  4. <meta charset="utf-8"/>
  5. <meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
  6. <meta name="description" content="javascript无缝滚动  by 司徒正美" />
  7. <base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
  8. <style type="text/css">
  9.   h1 {
  10.     font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
  11.   }
  12.   #marquee ,#marquee li {
  13.     padding:0;
  14.     margin:0;
  15.   }
  16.   #marquee {
  17.     position:relative;
  18.     list-style:none;
  19.     height:150px;
  20.     width:200px;
  21.     overflow:hidden;
  22.     border:10px solid #6cc;
  23.   }
  24.   #marquee li {
  25.     position:absolute;
  26.     width:1000%;
  27.   }
  28.   #marquee a {
  29.     float:left;
  30.   }
  31.   #marquee img {
  32.     display:block;
  33.     border:0;
  34.   }
  35. </style>
  36. <script type="text/javascript">
  37.   var Marquee = function(id){
  38.     try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
  39.     var container = document.getElementById(id),
  40.     slide = container.getElementsByTagName("li")[0],
  41.     speed = arguments[1] || 10;
  42.     slide.innerHTML += slide.innerHTML;
  43.     var item  = slide.getElementsByTagName("a"),//临界点
  44.     critical = item[item.length/2].offsetLeft,
  45.     delta = -critical;
  46.     var rolling = function(){
  47.       delta == 0 ? delta = -critical : delta++;
  48.       slide.style.left = delta + "px";
  49.     }
  50.     var timer = setInterval(rolling,speed)//设置定时器
  51.     container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
  52.     container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
  53.   }
  54.   window.onload = function(){
  55.     Marquee("marquee");
  56.   }
  57. </script>
  58. <h1>javascript无缝滚动(向右滚动) by 司徒正美</h1>
  59. <base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
  60. <ul id="marquee">
  61.   <li>
  62.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s017.jpg" alt="无缝滚动"/></a>
  63.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s018.jpg" alt="无缝滚动"/></a>
  64.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s019.jpg" alt="无缝滚动"/></a>
  65.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s020.jpg" alt="无缝滚动"/></a>
  66.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s021.jpg" alt="无缝滚动"/></a>
  67.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s022.jpg" alt="无缝滚动"/></a>
  68.     <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s023.jpg" alt="无缝滚动"/></a>
  69.   </li>
  70. </ul>
复制代码
我们可以把上面四个函数合并成一个函数，结构层与表现层参照向上滚动。
  1. var Marquee = function(id){
  2. try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
  3. var container = document.getElementById(id),
  4. slide = container.getElementsByTagName("li")[0],
  5. options = arguments[1] || {},
  6. speed = options.speed || 10,
  7. direction = options.direction || "left";
  8. slide.innerHTML += slide.innerHTML;
  9. var item  = slide.getElementsByTagName("a"),
  10. critical,delta,rolling,field;
  11. if(direction == "left" || direction == "right"){
  12. slide.style.cssText = "width:1000%";
  13. for(var i=0 ,l=item.length; i<l;i++){
  14. item[i].style.cssText = "float:left";
  15. }
  16. field = "left";
  17. critical = item[item.length/2].offsetLeft;
  18. }else if(direction == "up" || direction == "down"){
  19. field = "top";
  20. critical = item[item.length/2].offsetTop;
  21. }
  22. if(direction == "up" || direction == "left"){
  23. delta = 0;
  24. rolling = function(){
  25. delta == -critical ? delta = 0 : delta--;
  26. slide.style[field]  = delta + "px";
  27. }
  28. }else if(direction == "down" || direction == "right"){
  29. delta = -critical;
  30. rolling = function(){
  31. delta == 0 ? delta = -critical : delta++;
  32. slide.style[field] = delta + "px";
  33. }
  34. }
  35. var timer = setInterval(rolling,speed)//设置定时器
  36. container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
  37. container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
  38. }
复制代码
使用：
  1. Marquee("marquee",{speed:35,direction:"up"});
复制代码
回复

使用道具 举报

@k-47 发表于 2010-6-8 00:28:56 | 显示全部楼层
写的这么累都有没一个跟贴的，你们太没有良心了，
回复 顶 踩

使用道具 举报

铁十字勋章 发表于 2010-6-8 07:41:45 | 显示全部楼层
不知道做啥的啊
回复 顶 踩

使用道具 举报

zzaa2018 发表于 2010-6-8 12:24:25 | 显示全部楼层
不知道干什么的啊。
回复 顶 踩

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注-册

本版积分规则

Archiver|手机版|小黑屋|DoDVip ( 桂ICP备14000730号 )

GMT+8, 2024-5-3 13:03 , Processed in 0.053578 second(s), 20 queries .

Powered by Discuz! X3.5

Copyright © 2001-2024 Tencent Cloud.

快速回复 返回顶部 返回列表