• 图片自动滚动,鼠标滑过悬停-12


    /*************模块3************/
    .main_3{ clear:both; 1000px; margin:10px auto 0 auto; height:180px;}
    .main_3 h3{font-family:"微软雅黑"; font-size:24px; font-weight:normal; height:40px; line-height:40px; color:#444444; text-indent:6px;}
    #main_3box{ height:100px; background:#A8A8A8; padding:11px 0;}
    #main_3box_w{ 1000px; height:100px; overflow:hidden;  position:relative;}
    #ww_box{ 2000px;}
    #ww_box ul{ 1000px; position:absolute; left:0;}
    #ww_box ul li{ float:left; 150px; height:100px; margin-left:20px;}


    <!------------模块3------------>
    <div class="main_3">
          <h3>往届热销产品</h3>
          <div id="main_3box">
              <div id="main_3box_w">
                   <div id="ww_box">
                        <ul>
                             <li><a href="#" target="_blank"><img src="images/img1.jpg" width="150" height="100"></a></li>
                             <li><a href="#" target="_blank"><img src="images/img1.jpg" width="150" height="100"></a></li>
                             <li><a href="#" target="_blank"><img src="images/img1.jpg" width="150" height="100"></a></li>
                             <li><a href="#" target="_blank"><img src="images/img1.jpg" width="150" height="100"></a></li>
                             <li><a href="#" target="_blank"><img src="images/img1.jpg" width="150" height="100"></a></li>
                             <li><a href="#" target="_blank"><img src="images/img1.jpg" width="150" height="100"></a></li>
                             <li><a href="#" target="_blank"><img src="images/img1.jpg" width="150" height="100"></a></li>
                             <li><a href="#" target="_blank"><img src="images/img1.jpg" width="150" height="100"></a></li>
                        </ul>
                 </div>
              </div>
          </div>
    </div>

    <script>
       window.onload=function(){
       var wrap=document.getElementById("main_3box_w");
       var scrolls=document.getElementById("ww_box")
       var oul=scrolls.getElementsByTagName("ul")[0];
       var lis=oul.getElementsByTagName("li");
       var timer,
           speed = 10,
           step = 1;

       oul.innerHTML+=oul.innerHTML;
       oul.style.width=lis[0].offsetWidth*lis.length+'px';
     
       timer = setInterval( show, speed );
        function show(){
           oul.style.left=oul.offsetLeft-step +'px';
           if(oul.offsetLeft<-oul.offsetWidth/2){
               oul.style.left='0px';
           }   
       };
       wrap.onmouseover = function(){
            clearInterval( timer );
        };
        wrap.onmouseout = function(){
            timer = setInterval( show, speed );
        };
    };

    </script>

  • 相关阅读:
    Fiddler 教程
    Android 利用 aapt 解析 apk 得到应用名称 包名 版本号 权限等信息
    Android获取Manifest中<meta-data>元素的值
    Android资源混淆保护实践
    Android中捕获TTextView文本中的链接点击事件方法
    Android APK 手动命令编译、打包、签名步骤
    Android签名总结
    软件概要设计模板
    整理了一份React-Native学习指南
    appium简明教程(转)
  • 原文地址:https://www.cnblogs.com/su1637/p/8203579.html
Copyright © 2020-2023  润新知