国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

JS圖片左右無縫隙滾動的實現(兼容IE,Firefox 遵循W3C標準)

2019-11-20 08:54:21
字體:
來源:轉載
供稿:網友

**兼容IE,Firefox 遵循W3C標準寫法的圖片無縫滾動代碼(支持左移/右移功能)(本示例為上下兩行圖片進行雙行滾動)

**實現思路:一個設定寬度并且隱藏超出它寬度的內容的容器demo,里面放demo1和demo2,demo1是滾動內容,demo2為demo1的直接克隆,

**通過不斷改變demo1的scrollTop或者scrollLeft達到滾動的目的,當滾動至demo1與demo2的交界處時直接跳回初始位置,

**因為demo1與demo2一樣,所以分不出跳動的瞬間,從而達到“無縫”滾動的目的。

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><!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 id="Head1" runat="server"> <title></title></head><body> <img src="link.gif" style="cursor: pointer" onmouseover="clearright();toleft()" /> <img src="link1.gif" style="cursor: pointer" onmouseover="clearleft();toright()" /> <div>  <div id="demo" style="overflow: hidden; width: 322px; height: 61px">   <table cellpadding="0" align="left" border="0" cellspace="0">    <tbody>     <tr>      <td id="demo1" valign="top">       <table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0">        <tbody>         <tr align="center">          <td width="50" height="50">           <img height="50" src="link.gif" />          </td>          <td width="50" height="50">           <img height="50" src="link1.gif" />          </td>          <td width="50" height="50">           <img height="50" src="link2.gif" />          </td>          <td width="50" height="50">           <img height="50" src="link.gif" />          </td>          <td width="50" height="50">           <img height="50" src="link3.gif" />          </td>         </tr>        </tbody>       </table>      </td>      <td id="demo2" valign="top">      </td>     </tr>    </tbody>   </table>  </div> </div> <div>  <div id="demo_a" style="overflow: hidden; width: 322px; height: 61px">   <table cellpadding="0" align="left" border="0" cellspace="0">    <tbody>     <tr>      <td id="demo_b" valign="top">       <table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0">        <tbody>         <tr align="center">          <td width="50" height="50">           <img height="50" src="link.gif" />          </td>          <td width="50" height="50">           <img height="50" src="link1.gif" />          </td>          <td width="50" height="50">           <img height="50" src="link2.gif" />          </td>          <td width="50" height="50">           <img height="50" src="link.gif" />          </td>          <td width="50" height="50">           <img height="50" src="link3.gif" />          </td>         </tr>        </tbody>       </table>      </td>      <td id="demo_c" valign="top">      </td>     </tr>    </tbody>   </table>  </div> </div> <script type="text/javascript"> /* **兼容IE,Firefox 遵循W3C標準寫法的圖片無縫滾動代碼(支持左移/右移功能)(本示例為上下兩行圖片進行雙行滾動) ** **實現思路:一個設定寬度并且隱藏超出它寬度的內容的容器demo,里面放demo1和demo2,demo1是滾動內容,demo2為demo1的直接克隆, **通過不斷改變demo1的scrollTop或者scrollLeft達到滾動的目的,當滾動至demo1與demo2的交界處時直接跳回初始位置, **因為demo1與demo2一樣,所以分不出跳動的瞬間,從而達到“無縫”滾動的目的。 */ var speed1=0  //圖片左移的速度 var MyMar1  //setInterverval方法返回的間隔ID,些ID為全局的調用次數(用于第一行圖片) var MyMar2  //setInterverval方法返回的間隔ID,些ID為全局的調用次數(用于第二行圖片) var lefthit=0    //記錄左移按鈕點擊次數 var righthit=0  ////記錄右移按鈕點擊次數  //調用右移方法前,先讓左移停止(clearInterval清除setInterval對方法的調用) function clearleft(){   clearInterval(MyMar1)   clearInterval(MyMar2) } //圖片左移的方法 function toleft(){    //判斷是否是第一次按下左移按鈕(圖片往左開始移動的時候,不會在調用此方法。只有當按了右移按鈕時,才會把lefthit重設為0)   if(lefthit==0){     speed1=30;//圖片左移速度時間毫秒     //讓的內容demo2與demo1內容一樣     document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML     //上行圖片移動的方法     function Marquee1(){        //當demo滾動至demo2的交界處。與就是與demo2重合時。offsetWidth與scrollLeft剛好相等       if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0){         //demo跳回初始位置         document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth       }       else{         //demo開始重新移動         document.getElementById("demo").scrollLeft++       }     }     //setInterval讓Marquee1方法每隔多少秒執行一次,并把返回的調用次數ID     MyMar1=setInterval(Marquee1,speed1)     //當鼠標移動demo上面時。調用clearInterval清除MyMar1.這樣圖片便不會在移動了。移到圖片時,第一行和第二行的圖片都會停止     document.getElementById("demo").onmouseover=function()     {clearInterval(MyMar1);clearInterval(MyMar2)}     //當鼠標移除demo時,重新setInterval讓方法執行,這樣圖片會繼續移動     document.getElementById("demo").onmouseout=function()     {MyMar1=setInterval(Marquee1,speed1);clearInterval(MyMar2);MyMar2=setInterval(Marquee2,speed1)}      //下面的方法與上面的方法一樣,用于第二行的圖片向左移動      document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML     function Marquee2(){       if(document.getElementById("demo_c").offsetWidth-document.getElementById("demo_a").scrollLeft<=0){         document.getElementById("demo_a").scrollLeft-=document.getElementById("demo_b").offsetWidth}       else{         document.getElementById("demo_a").scrollLeft++       }     }     MyMar2=setInterval(Marquee2,speed1)     document.getElementById("demo_a").onmouseover=function()     {clearInterval(MyMar2);clearInterval(MyMar1)}     document.getElementById("demo_a").onmouseout=function()     {MyMar2=setInterval(Marquee2,speed1); document.getElementById("demo").onmouseout()}     lefthit=1    //設置左移按鈕,當按了一次左移后(不管按多少次),在沒按右移按鈕之前,toleft方法里的的代碼不會再被執行     righthit=0  //把右移按鈕設為0,這樣當下次點了右移按鈕的時候,以便toright方法被調用   } }   var MyMar3  //setInterverval方法返回的間隔ID,些ID為全局的調用次數(用于第一行圖片) var MyMar4  //setInterverval方法返回的間隔ID,些ID為全局的調用次數(用于第二行圖片) var speed2=0  //圖片右移的速度 //調用移左方法前,先讓右移停止(clearInterval清除setInterval對方法的調用) function clearright(){   clearInterval(MyMar3)   clearInterval(MyMar4) }   //圖片右移方法(與圖片左移方法思路一樣) function toright(){     //判斷是否是第一次按下右移按鈕(圖片往右開始移動的時候,不會在調用此方法。只有當按了左移按鈕時,才會把righthit重設為0)   if(righthit==0){     speed2=30;     document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML     function Marquee_a(){       if(document.getElementById("demo").scrollLeft<=0){         document.getElementById("demo").scrollLeft=document.getElementById("demo2").offsetWidth       }       else{         document.getElementById("demo").scrollLeft--       }     }     MyMar3=setInterval(Marquee_a,speed2)     document.getElementById("demo").onmouseover=function()     {clearInterval(MyMar3);document.getElementById("demo_a").onmouseover()}     document.getElementById("demo").onmouseout=function()     {MyMar3=setInterval(Marquee_a,speed2);clearInterval(MyMar4);MyMar4=setInterval(Marquee_b,speed2)}              document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML     function Marquee_b(){       if(document.getElementById("demo_a").scrollLeft<=0){         document.getElementById("demo_a").scrollLeft=document.getElementById("demo_c").offsetWidth       }       else{         document.getElementById("demo_a").scrollLeft--       }     }     MyMar4=setInterval(Marquee_b,speed2)     document.getElementById("demo_a").onmouseover=function()     {clearInterval(MyMar4);clearInterval(MyMar3)}     document.getElementById("demo_a").onmouseout=function()     {MyMar4=setInterval(Marquee_b,speed2);document.getElementById("demo").onmouseout()}     righthit=1  //設置右移按鈕,當按了一次右移按鈕后(不管按多少次),在沒按左移按鈕之前,toright方法里的的代碼不會再被執行     lefthit=0  //把左移按鈕設為0,這樣當下次點了左移按鈕的時候,以便toleft方法被調用   } } </script></body></html>

以上就是小編為大家帶來的JS圖片左右無縫隙滾動的實現(兼容IE,Firefox 遵循W3C標準)的全部內容了,希望對大家有所幫助,多多支持武林網~

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 竹山县| 察哈| 榕江县| 治多县| 朝阳区| 黄龙县| 石首市| 泽库县| 南皮县| 长乐市| 巫山县| 普定县| 藁城市| 阿勒泰市| 马公市| 泸西县| 稻城县| 定南县| 承德县| 正定县| 松原市| 定边县| 陵川县| 商城县| 蓬安县| 门头沟区| 鞍山市| 咸丰县| 花莲县| 克山县| 蒙阴县| 石城县| 庄浪县| 布尔津县| 灵武市| 神木县| 祁连县| 玉山县| 广德县| 黄石市| 望江县|