前端15 - 简书

前端15

无缝滚动:

<pre id="line1"><!DOCTYPE html>  <html lang="en">  <head>  <meta charset="UTF-8">  <title>无缝滚动</title>  <style type="text/css"> body,ul,li{margin:0;padding:0}
    ul{list-style:none;}
    .slide{
        width:500px;
        height:100px;
        border:1px solid #ddd;
        margin:20px auto 0;
        position:relative;
        overflow:hidden;
    }
    .slide ul{
        position:absolute;/*相对于slide进行绝对定位*/
        width:1000px;/*比slide宽度大一倍，做这种连续滚动效果的时候，要在后面把内容复制一份*/
        height:100px;
        left:0;/*可以改变该值让其动起来*/
        top:0;
    }
    .slide ul li{
        width:90px;
        height:90px;
        margin:5px;
        background-color:#ccc;
        line-height:90px;
        text-align: center;
        font-size:30px;
        float:left;
    }
    .btns{
        width:500px;
        height:50px;
        margin:10px auto 0;
    } </style>  <script type="text/javascript" src="[js/jquery-1.12.4.min.js](view-source:file:///D:/%E4%B8%8A%E8%AF%BE%E8%A7%86%E9%A2%91/%E7%AC%AC%E4%B8%89%E4%B8%AA%E6%9C%88%E2%80%94%E2%80%94%E5%89%8D%E7%AB%AF/%E5%89%8D%E7%AB%AF/%E5%89%8D%E7%AB%AF/%E4%BB%A3%E7%A0%81/%E5%B8%B8%E8%A7%81%E6%95%88%E6%9E%9C/js/jquery-1.12.4.min.js)"></script>  <script type="text/javascript"> $(function(){
        var $ul = $('#slide ul');
        var left = 0;
        var deraction = 2;//每次滚动的距离
        //内容为两套li
        $ul.html($ul.html() + $ul.html());
        //反复循环定时器，30ms动一下可以看起来比较平滑
        var timer = setInterval(move, 30);
        function move(){
            left -= deraction;
            //当第2套li完全显示出来的时候，整个移回原点重新移动，实现向左连续滚动
            if(left < -500){
                left = 0;
            }
            //瞬间跳回，实现向右连续滚动
            if(left > 0){
                left = -500;
            }

            $ul.css({left: left});
        }

        $('#btn1').click(function() {
            deraction = 2;
        });
        $('#btn2').click(function() {
            deraction = -2;
        });

        $('#slide').mouseover(function() {
            clearInterval(timer);
        });
        $('#slide').mouseout(function() {
            timer = setInterval(move,30);
        });
    }) </script>  </head>  <body>  <div class="btns">  <input type="button" name="" value="向左" id="btn1">  <input type="button" name="" value="向右" id="btn2">  </div>  <div class="slide" id="slide">  <ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  </ul>  </div>  </body>  </html></pre>

自定义事件

除了系统事件外，可以通过bind方法自定义事件，然后用tiggle方法触发这些事件
//给element绑定hello事件

element.bind("hello",function(){
alert("hello world!");
});
//触发hello事件
element.trigger("hello");

冒泡

什么是事件冒泡*
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window)。
阻止事件冒泡:
事件冒泡机制有时候是不需要的，需要阻止掉，通过event.stopPropagation() 来阻止.

最后编辑于：2018.12.12 14:16:18