zoukankan      html  css  js  c++  java
  • 【吉光片羽】js横向滚动与浮动导航

    1.横向滚动,这个方法是见过最简洁的了。

    #demo {
     background: #FFF;
     overflow: hidden;
     border: 1px dashed #CCC;
     width: 1170px;border: 1px solid red;
        margin-left: 10px;
    }
    #demo img {
    border: 3px solid #F2F2F2;
    }
    #indemo {
    float: left;
    width: 800%;
    }
    #demo1 {
    float: left;
    }
    #demo2 {
    float: left;
    }
    View Code
     <div id="demo" >
    <div id="indemo">
    <div id="demo1">
    <a href="#"><img src="../Images/jiameng/1.png" border="0" /></a>
    <a href="#"><img src="../Images/jiameng/2.png" border="0" /></a>
    <a href="#"><img src="../Images/jiameng/3.png" border="0" /></a>
    <a href="#"><img src="../Images/jiameng/4.png" border="0" /></a>
    <a href="#"><img src="../Images/jiameng/5.png" border="0" /></a>
    <a href="#"><img src="../Images/jiameng/6.png" border="0" /></a>
    <a href="#"><img src="../Images/jiameng/7.png" border="0" /></a>
    <a href="#"><img src="../Images/jiameng/8.png" border="0" /></a>
    </div>
    <div id="demo2"></div>
    View Code
    <script>
                    var speed = 10;
                    var tab = document.getElementById("demo");
                    var tab1 = document.getElementById("demo1");
                    var tab2 = document.getElementById("demo2");
                    tab2.innerHTML = tab1.innerHTML;
                    function Marquee() {
                        if (tab2.offsetWidth - tab.scrollLeft <= 0) {
                            tab.scrollLeft -= tab1.offsetWidth;
                           
                        } else {
                            tab.scrollLeft += 2;
                         
                        }
                    }
                    var MyMar = setInterval(Marquee, speed);
                    tab.onmouseover = function () { clearInterval(MyMar); };
                    tab.onmouseout = function () { MyMar = setInterval(Marquee, speed); };
    </script>

     滚动平滑。昨天用的时候怎么就是不滚动,然后改了tab.srollLeft的增加的值就好了。  

     2.浮动导航:

    <script type="text/javascript" src="http://misc.jjcdn.com/resource/js/waypoints.js"></script> 
    <script type="text/javascript"> 
    //浮动导航 waypoints.js 
    $('#main-nav-holder').waypoint(function (event, direction) { 
    $(this).parent().toggleClass('sticky', direction === "down"); 
    event.stopPropagation(); 
    }); 
    </script>
  • 相关阅读:
    leetcode 86. Partition List
    leetcode 303. Range Sum Query
    leetcode 1310. XOR Queries of a Subarray
    leetcode 1309. Decrypt String from Alphabet to Integer Mapping
    leetcode 215. Kth Largest Element in an Array
    将numpy.ndarray写入excel
    leetcode 1021 Remove Outermost Parentheses
    leetcode 1306. Jump Game III
    leetcode 1305. All Elements in Two Binary Search Trees
    ICCV2019 oral:Wavelet Domain Style Transfer for an Effective Perception-distortion Tradeoff in Single Image Super-Resolution
  • 原文地址:https://www.cnblogs.com/stoneniqiu/p/4184101.html
Copyright © 2011-2022 走看看