当前位置:编程学习 > JS >>

实现图片上下左右无缝滚动的js特效代码

看见他们网站的图片可以无缝滚动,并且上下左右都可以,哪个朋友有类似的代码发一份
答案:这个代码是我之前做网站一直在用的,非常不错。如果你的网站有图片显示栏的都可以使用,比如公司网站页面的一横排多个产品图片或者其他网站页面有多个图片显示的地方都可以让它没有空隙的循环滚动。 
  1. <style type="text/css">
  2. <!--
  3. #demo {
  4. background: #FFF;
  5. overflow:hidden;
  6. border: 1px dashed #CCC;
  7. width: 500px;
  8. }
  9. #demo img {
  10. border: 3px solid #F2F2F2;
  11. }
  12. #indemo {
  13. float: left;
  14. width: 800%;
  15. }
  16. #demo1 {
  17. float: left;
  18. }
  19. #demo2 {
  20. float: left;
  21. }
  22. -->
  23. </style>
  24. <div id="demo">
  25. <div id="indemo">
  26. <div id="demo1">

  27. <a href=>
  28. <a href=>
  29. <a href=>
  30. <a href=>
  31. <a href=>
  32. <a href=>

  33. </div>
  34. <div id="demo2"></div>
  35. <div id="demo3">
  36. <div id="demo4"></div>
  37. </div>
  38. </div>
  39. <script>
  40. <!--
  41. var speed=10; //数字越大速度越慢
  42. var tab=document.getElementById("demo");
  43. var tab1=document.getElementById("demo1");
  44. var tab2=document.getElementById("demo2");
  45. var tab3=document.getElementById("demo3");
  46. var tab4=document.getElementById("demo4");
  47. tab2.innerHTML=tab1.innerHTML;
  48. function Marquee(){
  49. if(tab2.offsetWidth-tab.scrollLeft<=0)
  50. tab.scrollLeft-=tab1.offsetWidth
  51. else{
  52. tab.scrollLeft++;
  53. }
  54. }
  55. var MyMar=setInterval(Marquee,speed);
  56. tab.onmouSEOver=function() {clearInterval(MyMar)};
  57. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
  58. -->
  59. </script>
其他:更改滚动方式,请修改相应位置的代码 本页为54行
demo.scrollLeft++    向左滚动
demo.scrollLeft--    向右滚动
demo.scrolltop++     向上滚动
demo.scrolltop--     向下滚动

上一个:Access与Sqlserver的sql的区别和差异详细解释
下一个:PHP的limit的用法介绍

CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,