一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

搜索
分享

常用js效果一：div+css圖片上下左右滾動代碼

 風(fēng)之飛雪 2014-03-13

圖片滾動經(jīng)常在網(wǎng)頁里面用到，高手們都是自己來寫，我不是高手，所以高手們寫了，我就搬來用了，偷偷懶，“常用js效果一：div+css圖片上下左右滾動代碼”這個也是在網(wǎng)上找的，這個被轉(zhuǎn)載了很多次，測試了下，ie6,7,8還有火狐都能兼容的。還有demo哦??！需要的可以下載哈。

這是向上滾動的：

XML/HTML代碼
       
  1. <style type="text/css">  
    2.    
  2. <!--  
    3.    
  3. #demo {  
    4.    
  4.     background: #FFF;  
    5.    
  5.     overflow:hidden;  
    6.    
  6.     border: 1px dashed #CCC;  
    7.    
  7.     height: 300px;  
    8.    
  8.     text-align: center;  
    9.    
  9.     float: left;  
    10.    
  10. }  
    11.    
  11. #demo img {  
    12.    
  12.     border: 3px solid #F2F2F2;  
    13.    
  13.     display: block;  
    14.    
  14. }  
    15.    
  15. -->  
    16.    
  16. </style>  
    17.    
  17. 向上滾動  
    18.    
  18. <div id="demo">  
    19.    
  19. <div id="demo1">  
    20.    
  20. <a href="#"><img src="upload/2011/11/201111111443365181.gif" border="0" /></a>  
    21.    
  21. <a href="#"><img src="upload/2011/11/201111111443365181.gif" border="0" /></a>  
    22.    
  22. <a href="#"><img src="upload/2011/11/201111111443365181.gif" border="0" /></a>  
    23.    
  23. <a href="#"><img src="upload/2011/11/201111111443365181.gif" border="0" /></a>  
    24.    
  24. <a href="#"><img src="upload/2011/11/201111111443365181.gif" border="0" /></a>  
    25.    
  25. </div>  
    26.    
  26. <div id="demo2"></div>  
    27.    
  27. </div>  
    28.    
  28. <script>  
    29.    
  29. <!--  
    30.    
  30. var speed=10; //數(shù)字越大速度越慢  
    31.    
  31. var tab=document.getElementById("demo");  
    32.    
  32. var tab1=document.getElementById("demo1");  
    33.    
  33. var tab2=document.getElementById("demo2");  
    34.    
  34. tab2.innerHTML=tab1.innerHTML;          //克隆demo1為demo2  
    35.    
  35. function Marquee(){  
    36.    
  36. if(tab2.offsetTop-tab.scrollTop<=0)//當(dāng)滾動至demo1與demo2交界時  
    37.    
  37. tab.scrollTop-=tab1.offsetHeight  //demo跳到最頂端  
    38.    
  38. else{  
    39.    
  39. tab.scrollTop++  
    40.    
  40. }  
    41.    
  41. }  
    42.    
  42. var MyMar=setInterval(Marquee,speed);  
    43.    
  43. tab.onmouseover=function() {clearInterval(MyMar)};//鼠標移上時清除定時器達到滾動停止的目的  
    44.    
  44. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠標移開時重設(shè)定時器  
    45.    
  45. -->  
    46.    
  46. </script>  

演示地址：http://www./demo/1.html

 

這是向下滾動的：

XML/HTML代碼
       
  1. <style type="text/css">  
    2.    
  2. <!--  
    3.    
  3. #demo {  
    4.    
  4. background: #FFF;  
    5.    
  5. overflow:hidden;  
    6.    
  6. border: 1px dashed #CCC;  
    7.    
  7. height: 200px;  
    8.    
  8. text-align: center;  
    9.    
  9. float: left;  
    10.    
  10. }  
    11.    
  11. #demo img {  
    12.    
  12. border: 3px solid #F2F2F2;  
    13.    
  13. display: block;  
    14.    
  14. }  
    15.    
  15. -->  
    16.    
  16. </style>  
    17.    
  17. 向下滾動  
    18.    
  18. <div id="demo">  
    19.    
  19. <div id="demo1">  
    20.    
  20. <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a>  
    21.    
  21. <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a>  
    22.    
  22. <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a>  
    23.    
  23. <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a>  
    24.    
  24. <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a>  
    25.    
  25. </div>  
    26.    
  26. <div id="demo2"></div>  
    27.    
  27. </div>  
    28.    
  28. <script>  
    29.    
  29. <!--  
    30.    
  30. var speed=10; //數(shù)字越大速度越慢  
    31.    
  31. var tab=document.getElementById("demo");  
    32.    
  32. var tab1=document.getElementById("demo1");  
    33.    
  33. var tab2=document.getElementById("demo2");  
    34.    
  34. tab2.innerHTML=tab1.innerHTML; //克隆demo1為demo2  
    35.    
  35. tabtab.scrollTop=tab.scrollHeight  
    36.    
  36. function Marquee(){  
    37.    
  37. if(tab1.offsetTop-tab.scrollTop>=0)//當(dāng)滾動至demo1與demo2交界時  
    38.    
  38. tab.scrollTop+=tab2.offsetHeight //demo跳到最頂端  
    39.    
  39. else{  
    40.    
  40. tab.scrollTop--  
    41.    
  41. }  
    42.    
  42. }  
    43.    
  43. var MyMar=setInterval(Marquee,speed);  
    44.    
  44. tab.onmouseover=function() {clearInterval(MyMar)};//鼠標移上時清除定時器達到滾動停止的目的  
    45.    
  45. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠標移開時重設(shè)定時器  
    46.    
  46. -->  
    47.    
  47. </script>   

演示地址：http://www./demo/3.html

這是向左滾動的：

XML/HTML代碼
       
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2.    
  2. <html xmlns="http://www./1999/xhtml">  
    3.    
  3. <head>  
    4.    
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
    5.    
  5. <title>無標題文檔</title>  
    6.    
  6. </head>  
    7.    
  7. <body>  
    8.    
  8. <style>  
    9.    
  9. .scroll_div {width:600px; height:62px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}  
    10.    
  10. .scroll_div img {width:120px;height:60px;border: 0;margin: auto 8px; border:1px #efefef solid;}  
    11.    
  11. #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}  
    12.    
  12. </style>  
    13.    
  13. <script language="javascript">  
    14.    
  14. function ScrollImgLeft(){  
    15.    
  15. var speed=20  
    16.    
  16. var scroll_begin = document.getElementById("scroll_begin");  
    17.    
  17. var scroll_end = document.getElementById("scroll_end");  
    18.    
  18. var scroll_div = document.getElementById("scroll_div");  
    19.    
  19. scroll_end.innerHTML=scroll_begin.innerHTML  
    20.    
  20. function Marquee(){  
    21.    
  21.     if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)  
    22.    
  22.       scroll_div.scrollLeft-=scroll_begin.offsetWidth  
    23.    
  23.     else  
    24.    
  24.       scroll_div.scrollLeft++  
    25.    
  25. }  
    26.    
  26. var MyMar=setInterval(Marquee,speed)  
    27.    
  27. scroll_div.onmouseover=function() {clearInterval(MyMar)}  
    28.    
  28. scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}  
    29.    
  29. }  
    30.    
  30. </script>  
    31.    
  31. <h2 align="center">向左滾動</h2>  
    32.    
  32. <div style="text-align:center">  
    33.    
  33. <div class="sqBorder">  
    34.    
  34.     <!--#####滾動區(qū)域#####-->  
    35.    
  35.     <div id="scroll_div" class="scroll_div">  
    36.    
  36.       <div id="scroll_begin">  
    37.    
  37.         <ul>  
    38.    
  38.           <li><a href="upload/2011/11/201111111446056115.gif" /></a></li>  
    39.    
  39.           <li><a href="upload/2011/11/201111111446056115.gif" /></a></li>  
    40.    
  40.           <li><a href="upload/2011/11/201111111446056115.gif" /></a></li>  
    41.    
  41.           <li><a href="upload/2011/11/201111111446056115.gif" /></a></li>  
    42.    
  42.           <li><a href="upload/2011/11/201111111446056115.gif" /></a></li>  
    43.    
  43.           <li><a href="upload/2011/11/201111111446056115.gif" /></a></li>  
    44.    
  44.           <li><a href="upload/2011/11/201111111446056115.gif" /></a></li>  
    45.    
  45.           <li><a href="upload/2011/11/201111111446056115.gif" /></a></li>  
    46.    
  46.           <li><a href="upload/2011/11/201111111446056115.gif" /></a></li>  
    47.    
  47.           <li><a href="upload/2011/11/201111111446056115.gif" /></a></li>  
    48.    
  48.         </ul>  
    49.    
  49.       </div>  
    50.    
  50.       <div id="scroll_end"></div>  
    51.    
  51.     </div>  
    52.    
  52.     <!--#####滾動區(qū)域#####-->  
    53.    
  53. </div>  
    54.    
  54. <script type="text/javascript">ScrollImgLeft();</script>  
    55.    
  55. </div>  
    56.    
  56. <!--//向左滾動代碼結(jié)束-->  
    57.    
  57. </body></html>  

演示地址：http://www./demo/2.html

 

這是向右滾動的代碼：

XML/HTML代碼
       
  1. <style type="text/css">  
    2.    
  2. <!--  
    3.    
  3. #demo {  
    4.    
  4. background: #FFF;  
    5.    
  5. overflow:hidden;  
    6.    
  6. border: 1px dashed #CCC;  
    7.    
  7. width: 500px;  
    8.    
  8. }  
    9.    
  9. #demo img {  
    10.    
  10. border: 3px solid #F2F2F2;  
    11.    
  11. }  
    12.    
  12. #indemo {  
    13.    
  13. float: left;  
    14.    
  14. width: 800%;  
    15.    
  15. }  
    16.    
  16. #demo1 {  
    17.    
  17. float: left;  
    18.    
  18. }  
    19.    
  19. #demo2 {  
    20.    
  20. float: left;  
    21.    
  21. }  
    22.    
  22. -->  
    23.    
  23. </style>  
    24.    
  24. 向右滾動  
    25.    
  25. <div id="demo">  
    26.    
  26. <div id="indemo">  
    27.    
  27. <div id="demo1">  
    28.    
  28. <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a>  
    29.    
  29. <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a>  
    30.    
  30. <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a>  
    31.    
  31. <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a>  
    32.    
  32. <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a>  
    33.    
  33. <a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a>  
    34.    
  34. </div>  
    35.    
  35. <div id="demo2"></div>  
    36.    
  36. </div>  
    37.    
  37. </div>  
    38.    
  38. <script>  
    39.    
  39. <!--  
    40.    
  40. var speed=10; //數(shù)字越大速度越慢  
    41.    
  41. var tab=document.getElementById("demo");  
    42.    
  42. var tab1=document.getElementById("demo1");  
    43.    
  43. var tab2=document.getElementById("demo2");  
    44.    
  44. tab2.innerHTML=tab1.innerHTML;  
    45.    
  45. function Marquee(){  
    46.    
  46. if(tab.scrollLeft<=0)  
    47.    
  47. tab.scrollLeft+=tab2.offsetWidth  
    48.    
  48. else{  
    49.    
  49. tab.scrollLeft--  
    50.    
  50. }  
    51.    
  51. }  
    52.    
  52. var MyMar=setInterval(Marquee,speed);  
    53.    
  53. tab.onmouseover=function() {clearInterval(MyMar)};  
    54.    
  54. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};  
    55.    
  55. -->  
    56.    
  56. </script>   

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多

    国产精品不卡免费视频| 亚洲乱码av中文一区二区三区| 中文字幕日韩精品人一妻| 黄片三级免费在线观看| 亚洲男女性生活免费视频| 国产精品视频久久一区| 黄色国产精品一区二区三区| 国产综合一区二区三区av | 性欧美唯美尤物另类视频 | 日本熟女中文字幕一区| 人妻露脸一区二区三区| 九七人妻一区二区三区| 激情综合网俺也狠狠地| 日韩视频在线观看成人| 国产精品免费福利在线| 欧美日韩国产亚洲三级理论片| 中日韩免费一区二区三区| 久久精品国产在热亚洲| 国产亚洲欧美日韩精品一区 | 欧美一级日韩中文字幕| 国产欧美一区二区另类精品| 国产亚洲精品岁国产微拍精品 | 色丁香之五月婷婷开心| 九九热精品视频免费观看| 成人你懂的在线免费视频| 不卡在线播放一区二区三区| 一区二区三区在线不卡免费| 亚洲精品中文字幕无限乱码| 欧美国产精品区一区二区三区| 91亚洲熟女少妇在线观看| 免费在线观看欧美喷水黄片| 韩日黄片在线免费观看| 在线精品首页中文字幕亚洲| 免费观看日韩一级黄色大片| 蜜臀人妻一区二区三区| 少妇人妻无一区二区三区| 国产日韩综合一区在线观看| 色婷婷视频免费在线观看| 国产91麻豆精品成人区| 99久久精品一区二区国产| 99热在线精品视频观看|