一个菜鸟的互联网技术分享博客
您的位置: 主页 > 图片或文字向上、向左、向右、向下自动滚动,鼠标悬停停止滚动
advertisement

图片或文字向上、向左、向右、向下自动滚动,鼠标悬停停止滚动

相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的。 

先了解一下对象的几个的属性: innerHTML:设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度。 

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度 


1、向上


  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>向上滚动</title>  
  5. </head>  
  6. <body>  
  7.     <style type="text/css">   
  8.         #demo {   
  9.         background: #FFF;   
  10.         overflow:hidden;   
  11.         border: 1px dashed #CCC;   
  12.         height: 200px;   
  13.         text-align: center;   
  14.         float: left;   
  15.         }   
  16.         #demo img {   
  17.         border: 3px solid #F2F2F2;   
  18.         display: block;   
  19.         }  
  20.     </style>   
  21.   
  22. <div id="demo">   
  23.     <div id="demo1">   
  24.         <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/17_yl3y2W0.jpg" border="0" /></a>   
  25.         <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/pinpailogo.jpg" border="0" /></a>   
  26.         <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/122323_e2QaPRK.png" border="0" /></a>   
  27.         <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/taobaoruzhu.jpg" border="0" /></a>   
  28.         <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/huicongruzhu.jpg" border="0" /></a>   
  29.     </div>   
  30.    <div id="demo2"></div>   
  31. </div>   
  32. </body>  
  33.     <script>   
  34.         var speed=20//数字越大速度越慢   
  35.         var tab=document.getElementById("demo");   
  36.         var tab1=document.getElementById("demo1");   
  37.         var tab2=document.getElementById("demo2");   
  38.         tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2   
  39.         function Marquee(){   
  40.             if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时   
  41.                 tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端   
  42.             else{   
  43.                 tab.scrollTop++   
  44.             }    
  45.         }   
  46.         var MyMar=setInterval(Marquee,speed);   
  47.         tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的   
  48.         tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器   
  49. </script>   
  50. </html>  

2、向下

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>向下滚动</title>  
  5. </head>  
  6. <body>  
  7.     <style type="text/css">   
  8.         #demo {   
  9.         background: #FFF;   
  10.         overflow:hidden;   
  11.         border: 1px dashed #CCC;   
  12.         height: 200px;   
  13.         text-align: center;   
  14.         float: left;   
  15.         }   
  16.         #demo img {   
  17.         border: 3px solid #F2F2F2;   
  18.         display: block;   
  19.         }  
  20.     </style>   
  21.   
  22. <div id="demo">   
  23.     <div id="demo1">   
  24.         <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/17_yl3y2W0.jpg" border="0" /></a>   
  25.         <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/pinpailogo.jpg" border="0" /></a>   
  26.         <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/122323_e2QaPRK.png" border="0" /></a>   
  27.         <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/taobaoruzhu.jpg" border="0" /></a>   
  28.         <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/huicongruzhu.jpg" border="0" /></a>   
  29.     </div>   
  30.    <div id="demo2"></div>   
  31. </div>   
  32. </body>  
  33.     <script>   
  34.         var speed=20//数字越大速度越慢   
  35.         var tab=document.getElementById("demo");   
  36.         var tab1=document.getElementById("demo1");   
  37.         var tab2=document.getElementById("demo2");   
  38.         tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2   
  39.         tab.scrollTop=tab.scrollHeight   
  40.         function Marquee(){   
  41.             if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时   
  42.                 tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端   
  43.             else{   
  44.                 tab.scrollTop--  
  45.             }    
  46.         }   
  47.         var MyMar=setInterval(Marquee,speed);   
  48.         tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的   
  49.         tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器   
  50. </script>   
  51. </html>  

3、向左

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>向左滚动</title>  
  5. </head>  
  6. <body>  
  7.     <style type="text/css">   
  8.         #demo {   
  9.             background: #FFF;   
  10.             overflow:hidden;   
  11.             border: 1px dashed #CCC;   
  12.             width: 500px;   
  13.         }   
  14.         #demo img {   
  15.             border: 3px solid #F2F2F2;   
  16.         }   
  17.         #indemo {   
  18.             height: 300px;  
  19.             float: left;   
  20.             width: 800%;   
  21.         }   
  22.         #demo1 {   
  23.             float: left;   
  24.         }   
  25.         #demo2 {   
  26.             float: left;   
  27.         }    
  28.     </style>   
  29.     <div id="demo">   
  30.         <div id="indemo">   
  31.             <div id="demo1">   
  32.                 <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/17_yl3y2W0.jpg" border="0" /></a>   
  33.             <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/pinpailogo.jpg" border="0" /></a>   
  34.             <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/122323_e2QaPRK.png" border="0" /></a>   
  35.             <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/taobaoruzhu.jpg" border="0" /></a>   
  36.             <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/huicongruzhu.jpg" border="0" /></a>  
  37.             </div>   
  38.             <div id="demo2"></div>   
  39.         </div>   
  40.     </div>   
  41. </body>  
  42.     <script>   
  43.         var speed=20//数字越大速度越慢   
  44.         var tab=document.getElementById("demo");   
  45.         var tab1=document.getElementById("demo1");   
  46.         var tab2=document.getElementById("demo2");   
  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. </script>   
  59. </html>

4、向右

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>向左滚动</title>  
  5. </head>  
  6. <body>  
  7.     <style type="text/css">   
  8.         #demo {   
  9.             background: #FFF;   
  10.             overflow:hidden;   
  11.             border: 1px dashed #CCC;   
  12.             width: 500px;   
  13.         }   
  14.         #demo img {   
  15.             border: 3px solid #F2F2F2;   
  16.         }   
  17.         #indemo {   
  18.             height: 300px;  
  19.             float: left;   
  20.             width: 800%;   
  21.         }   
  22.         #demo1 {   
  23.             float: left;   
  24.         }   
  25.         #demo2 {   
  26.             float: left;   
  27.         }    
  28.     </style>   
  29.     <div id="demo">   
  30.         <div id="indemo">   
  31.             <div id="demo1">   
  32.                 <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/17_yl3y2W0.jpg" border="0" /></a>   
  33.             <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/pinpailogo.jpg" border="0" /></a>   
  34.             <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/122323_e2QaPRK.png" border="0" /></a>   
  35.             <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/taobaoruzhu.jpg" border="0" /></a>   
  36.             <a href="#"><img src="https://img.pdk365.com/media/pro/2018/08/huicongruzhu.jpg" border="0" /></a>  
  37.             </div>   
  38.             <div id="demo2"></div>   
  39.         </div>   
  40.     </div>   
  41. </body>  
  42.     <script>   
  43.         var speed=20//数字越大速度越慢   
  44.         var tab=document.getElementById("demo");   
  45.         var tab1=document.getElementById("demo1");   
  46.         var tab2=document.getElementById("demo2");   
  47.         tab2.innerHTML=tab1.innerHTML;   
  48.         function Marquee(){   
  49.             if(tab.scrollLeft<=0)   
  50.                 tab.scrollLeft+=tab2.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. </script>   
  59. </html>  

zhangren.online
上一篇:javaascript之数字倒计时
下一篇:没有了

您可能喜欢

​前端base64转换成图片

​前端base64转换成图片

​常用函数

​常用函数

​jQuery点击小图展示大图

​jQuery点击小图展示大图

​原生js实现移动端Touch滑动反弹

​原生js实现移动端Touch滑动反弹

​javaascript、ajax三级联动

​javaascript、ajax三级联动

回到顶部