美文网首页
前端（绑定事件、冒泡事件、节点操作、幻灯片......）

前端（绑定事件、冒泡事件、节点操作、幻灯片......）

作者: 埃菲尔上的铁塔梦i | 来源:发表于2018-08-29 18:32 被阅读0次

    1、鼠标移入移出

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标移入移出</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            margin: 100px auto 0;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*进入子元素也触发*/
            /*$('#div1').mouseover(function() {
                $(this).animate({marginTop: 50});//.stop()
            });
            $('#div1').mouseout(function() {
                $(this).animate({marginTop: 100});//.stop()
            });*/

            /*进入子元素不触发*/
            /*$('#div1').mouseenter(function() {
                $(this).stop().animate({marginTop: 50});//
            });
            $('#div1').mouseleave(function() {
                $(this).stop().animate({marginTop: 100});//
            });*/

            /*通过hover（mouseenter+mouseleave）实现简写*/
            $('#div1').hover(function() {
                $(this).stop().animate({marginTop: 50});
            }, function() {
                $(this).stop().animate({marginTop: 100});
            });
        })
    </script>
</head>
<body>
    <div id="div1" class="box">
        <div class="son"></div>
    </div>
</body>
</html>

    2、input框架事件

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input框事件</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // //一开始就获取焦点，相当于设置了autofocus自动获取焦点了（HTML5 新增表单控件属性）
            // $('#txt01').focus();

            // //文本框获取焦点的时候（有光标闪烁的时候）
            // $('#txt01').focus(function() {
            //  alert('focus');
            // });

            // //失去焦点的时候（光标离开的时候）
            // $('#txt01').blur(function() {
            //  alert('blur');
            // });

            // //输入框内容发生变化的时候，失去焦点后触发，可用于注册时验证用户名是否已存在
            // $('#txt01').change(function() {
            //  alert('change');
            // });

            //松开键盘按键就触发
            $('#txt01').keyup(function() {
                alert('keyup');
            });
        })
    </script>
</head>
<body>
    <input type="text" id="txt01">
</body>
</html>

    3、其他事件

    JS原生写法
         window.onload = function(){

         }

        jQuery写法，等同于上面写法
         $(window).load(function(){

         })

        ready的写法
         $(document).ready(function(){

         })

        ready的简写
        $(function(){

        })

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery其他事件</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        // //JS原生写法
        // window.onload = function(){

        // }

        // //jQuery写法，等同于上面写法
        // $(window).load(function(){

        // })

        // //ready的写法
        // $(document).ready(function(){

        // })

        // //ready的简写
        // $(function(){

        // })

        // 窗口改变尺寸的时候，会高频触发
        $(window).resize(function() {
            console.log('3');
        });
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

    4、绑定事件

    只能绑定click事件，不能绑定其他的了

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定事件bind</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // //只能绑定click事件，不能绑定其他的了
            // $('#btn').click(function() {
            //  /* Act on the event */
            // });

            //bind方式可绑定多个事件
            $('#btn').bind('click mouseover', function() {
                alert('hello!');

                //取消绑定事件
                $(this).unbind('mouseover');
            });
        })
    </script>
</head>
<body>
    <input type="button" value="按钮" id="btn">
</body>
</html>

    5、自定义事件

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义事件</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //自定义事件只能用bind方式绑定，第一个参数是事件的名字，第二个参数是事件发生时执行的函数
            $('#btn1').bind('hello', function(){
                alert('hello');
            })
            $('#btn1').bind('click', function(){
                alert('click');
            })
            $('#btn2').click(function() {
                // trigger即可以触发自定义事件，也可以触发原始的事件
                $('#btn1').trigger('hello');
                $('#btn1').trigger('click');
            });
            
            //不一定点击按钮触发，也可页面加载时触发，也可在满足某种if条件时触发
            // $('#btn1').trigger('hello');
        })
    </script>
</head>
<body>
    <input type="button" value="按钮" id="btn1">
    <input type="button" value="按钮2" id="btn2">
</body>
</html>

    6、事件冒泡

    console.log(event);//显示很多属性，其中clientX、clientY就是点击的坐标
                alert("X轴坐标：" + event.clientX);

                阻止事件冒泡
                event.stopPropagation();

                合并阻止操作：把阻止冒泡和阻止默认行为合并

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <style type="text/css">
        .grandfather{
            width: 300px;
            height: 300px;
            background-color: green;
            position: relative;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 400px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('body').click(function() {
                alert(4);
            });
            $('.grandfather').click(function() {
                alert(3);
            });
            $('.father').click(function() {
                alert(2);
            });
            $('.son').click(function(event) {//event代表当前事件
                alert(1);
                // console.log(event);//显示很多属性，其中clientX、clientY就是点击的坐标
                // alert("X轴坐标：" + event.clientX);

                // //阻止事件冒泡
                // event.stopPropagation();

                //合并阻止操作：把阻止冒泡和阻止默认行为合并
                return false;
            });

            //阻止右键菜单
            $(document).contextmenu(function(event){
                // //阻止默认行为（原来右键能弹出菜单，阻止后无法弹出）
                // event.preventDefault();

                //合并阻止
                return false;
            })
        })
    </script>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>

    7、弹框_阻止事件冒泡

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器弹框</title>
    <style type="text/css">
        .pop_con{
            display: none;/*默认不显示，用定时器显示*/
        }
        .pop{
            width: 400px;
            height: 300px;
            background-color: #fff;
            border: 1px solid #000;
            position: fixed;/*使用固定定位*/
            left: 50%;/*左上角位于页面中心*/
            top: 50%;
            margin-left: -200px;/*让div向左偏移半个宽度、向上偏移半个高度，使div位于页面中心*/
            margin-top: -150px;
            z-index: 9999;/*弹窗在最前面*/
        }
        /*遮罩样式*/
        .mask{
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: #000;
            left: 0;
            top: 0;
            /*设置透明度30%，兼容IE6、7、8*/
            opacity: 0.3;
            filter: alpha(opacity=30);
            z-index: 9990;/*遮罩在弹窗后面*/
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn').click(function() {
                $('#pop').show();
                return false;
            });
            $('#shutoff').click(function() {
                $('#pop').hide();
            });
            //点弹框以外的地方，也能让弹框消失
            $(document).click(function(){
                // setTimeout(function(){
                //  $('#pop').hide();
                // },2000);

                $('#pop').hide();
            });
            $('.pop').click(function() {
                return false;
            });
            
            //阻止默认行为（原来超链接可跳转到百度，阻止后无法跳转）
            $('#link1').click(function() {
                return false;
            });
        })
    </script>
</head>
<body>
    <h1>首页标题</h1>
    <p>页面内容</p>
    <a href="http://www.baidu.com" id="link1">百度网</a>
    <input type="button" name="" value="弹出" id="btn">

    <div class="pop_con" id="pop">
        <div class="pop">
            <h3>提示信息！</h3>
            <a href="#" id="shutoff">关闭</a>
            <input type="text" name="">
        </div>
        <!-- 遮罩层 -->
        <div class="mask"></div>
    </div>
</body>
</html>

    8、事件委托

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
    <style type="text/css">
        .list{
            list-style: none;
        }

        .list li{
            height: 30px;
            background-color: green;
            margin-bottom: 10px;
            color: #fff;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*
            给每个li绑定事件，一共绑定了8次，性能不高
            $('.list li').click(function() {
                alert($(this).html());
            });
            */

            /*
            事件委托：方法delegate，只绑定一次事件，冒泡触发
                参数：
                    selector选择器：写入ul下面的所有要发生事件的元素，多个元素用空格隔开，例如‘li a span’
                    eventType事件
                    function要执行的操作
            
            $('.list').delegate('li', 'click', function() {
                //$(this)指发生事件的子集，即每个li
                alert($(this).html());

                //全部取消委托
                $('.list').undelegate();
            });
        })
    </script>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

    9、节点操作

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点操作</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var $span = $('<span>span元素</span>');
            var $p = $('<p>p段落元素</p>');
            var $h = $('<h1>页面标题</h1>');

            /*插入子元素*/
            //div中插入span和p（末尾追加）
            // $('#div1').append($span);
            // $('#div1').append($p);

            // 把span和p插入div中
            $span.appendTo('#div1');
            $p.appendTo('#div1');

            //把子元素插入到父元素（前面追加）
            // $('#div1').prepend($span);
            // $('#div1').prepend($p);
            // $span.prependTo('#div1');
            // $p.prependTo('#div1');

            //在div前边插入兄弟h1标题
            // $('#div1').before($h);
            $h.insertBefore('#div1');

            //在后边插入兄弟元素
            //after()
            //insertAfter()

            //删除p标签
            $p.remove();    
        })
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

    10、计划列表

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计划列表</title>
    <style type="text/css">
        .list_con{
            width:400px;
            margin:50px auto 0;
        }

        .inputtxt{
            width:350px;
            height:30px;
            border:1px solid #ccc;
            padding:0px;
            text-indent:10px;
            
        }

        .inputbtn{
            width:40px;
            height:32px;
            padding:0px;
            border:1px solid #ccc;
        }

        .list{
            margin:0;
            padding:0;
            list-style:none;
            margin-top:20px;
        }

        .list li{
            height:30px;
            line-height:30px;
            border-bottom:1px solid #ccc;
        }

        .list li span{
            float:left;
        }

        .list li a{
            float:right;
            text-decoration:none;
            margin:0 10px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //绑定增加按钮的点击事件
            $('#btn1').click(function() {
                //获取文本框的内容
                var txt = $('#txt1').val();
                //清空文本框的内容
                $('#txt1').val('');

                //判断文本框的内容不允许为空
                if(txt == ''){
                    alert('请输入内容！');
                    return;
                }

                //按照用户输入的内容准备好一个li列表项（从结构中复制，并替换其中的文字）
                var $li = $('<li><span>' + txt + '</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');
                //把li追加到ul中
                $li.appendTo('#list');
            });

            /*
            //删除的点击监听（这种方式绑定会导致后增加的条目无法删除，因为监听在页面ready的时候绑定，还没有产生后增加的条目，所以无法实现动态绑定）
            $('.del').click(function() {
                $(this).parent().remove();
            });
            */

            //使用事件委托可以实现动态绑定，并且性能更高
            $('#list').delegate('a', 'click', function() {
                //获取点击元素的class属性的值
                var handler = $(this).attr('class');

                //根据class属性的值判断点的是删除还是排序
                switch(handler){
                    case 'del'://删除
                        var txt = $(this).parent().children(':first').html();
                        if(confirm('你确定要删除"'+txt+'"吗？')){
                            $(this).parent().remove();
                        }
                        break;
                    case 'up'://向上
                        //如果当前元素之前的元素长度为0，说明前边没有其它元素了
                        if($(this).parent().prev().length == 0){
                            alert('到顶了！');
                            return;
                        }
                        //把当前li插到前边，谁的前边？它前一个元素的前边
                        $(this).parent().insertBefore($(this).parent().prev());
                        break;
                    case 'down'://向下
                        //如果当前元素之后的元素长度为0，说明后边没有其它元素了
                        if($(this).parent().next().length == 0){
                            alert('到底了！');
                            return;
                        }
                        //把当前li插到后边，谁的后边？它后一个元素的后边
                        $(this).parent().insertAfter($(this).parent().next());
                        break;
                }
            });
        })
    </script>
</head>
<body>
    <div class="list_con">
    <h2>To do list</h2>
        <input type="text" name="" id="txt1" class="inputtxt">
        <input type="button" name="" value="增加" id="btn1" class="inputbtn">
        
        <ul id="list" class="list">

            <li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
            <li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
            <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>

        </ul>

    </div>
</body>
</html>

    11、幻灯片

    • html
    <!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>幻灯片</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/slide.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/slide.js"></script>
</head>
<body>
    <div class="center_con">

        <div class="slide fl">
            <ul class="slide_pics">
                <li><a href=""><img src="images/slide01.jpg" alt="幻灯片" /></a></li>
                <li><a href=""><img src="images/slide02.jpg" alt="幻灯片" /></a></li>
                <li><a href=""><img src="images/slide03.jpg" alt="幻灯片" /></a></li>
                <li><a href=""><img src="images/slide04.jpg" alt="幻灯片" /></a></li>
            </ul>
            <div class="prev"></div>
            <div class="next"></div>
            <ul class="points">
                <!-- 动态创建小圆点
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li> -->
            </ul>
        </div>
    • css
    body{
    font-family: 'Microsoft Yahei';
    color: #666;
    font-size: 12px;
}

.center_con{
    width: 600px;
    height: 400px;
    /*background-color: cyan;*/
    margin: 50px auto 0;
}

/* ----------幻灯片样式---------- */
.slide{
    width: 600px;
    height: 400px;
    position: relative;/* 父容器要设置定位，才能让子元素相对父容器定位 */
    overflow:hidden;
}
.slide .slide_pics{
    width: 600px;
    height: 400px;
    left:0;
    top:0;
    position:relative;
}
.slide .slide_pics li{
    width: 600px;
    height: 400px;
    left:0;
    top:0;
    position:absolute;
}

/* 左右翻页箭头样式 */
.prev,.next{
    width: 20px;
    height: 24px;
    position: absolute;/* 相对父容器进行绝对定位 */
    left:10px;
    top:188px;
    cursor: pointer;/* 鼠标指针成手形 */
    background: url(../images/icons.png) 0px -450px no-repeat;
}
.next{
    left: 570px;
    background: url(../images/icons.png) 0px -500px no-repeat;
}

/* 小圆点样式 */
.points{
    position: absolute;/* 块元素默认宽度为父宽度的100%，定位之后就变成行内块了，它不能继承父的宽度，如果没有设置宽高，就由内容决定，所以也必须给它一个宽度 */
    width: 100%;
    height: 11px;
    /*background-color: red;*/
    left: 0;
    bottom: 9px;
    text-align: center;/* 行内块的居中方式 */
    font-size: 0px;/* 去掉行内块间隙，它引起小圆点没有挨紧，并且向下超出高度范围 */
}
.points li{
    width: 11px;
    height: 11px;
    display: inline-block;
    background-color: #9f9f9f;
    margin: 0 5px;
    border-radius: 50%;/* 设置圆角，优雅降级，更好效果请升级浏览器，不兼容IE */
}
.points .active{
    background-color: #cecece;
}
    • js
    $(function(){
    var $li = $('.slide_pics li');
    var len = $li.length;//4张
    var $prev = $('.prev');//左按钮
    var $next = $('.next');//右按钮
    var nextli = 0;//将要运动过来的li
    var nowli = 0;//当前要离开的li
    var timer = null;


    //除第一个li，都定位到右侧
    $li.not(':first').css({left:600});

    //动态创建小圆点
    $li.each(function(index){
        //创建li
        var $sli = $('<li></li>');
        //第一个li添加选中样式
        if(index == 0){
            $sli.addClass('active');
        }
        //将小圆点的li添加到ul中
        $sli.appendTo('.points');
    })

    $points = $('.points li');
    // alert($points.length);//4个小圆点

    //小圆点的点击事件
    $points.click(function() {
        nextli = $(this).index();
        //当点击当前张的小圆点时，不做任何操作，防止跳变的Bug
        if(nextli == nowli){
            return;
        }
        move();
        $(this).addClass('active').siblings().removeClass('active');
    });

    //左按钮的点击事件
    $prev.click(function() {
        nextli--;
        move();
        //改变圆点样式
        $points.eq(nextli).addClass('active').siblings().removeClass('active');
    });

    //右按钮的点击事件
    $next.click(function() {
        nextli++;
        move();
        //改变圆点样式
        $points.eq(nextli).addClass('active').siblings().removeClass('active');
    });

    //针对外层的slide做鼠标进入和离开事件，因为鼠标指针有可能进入到左右翻页和小圆点的范围
    //mouseenter使鼠标进入子元素也能清除定时器
    $('.slide').mouseenter(function() {
        clearInterval(timer);
    });
    $('.slide').mouseleave(function() {
        timer = setInterval(autoplay, 3000);
    });

    //定时器循环自动播放
    timer = setInterval(autoplay, 3000);

    //自动播放的逻辑与点击下一张是相同的
    function autoplay(){
        nextli++;
        move();
        //改变圆点样式
        $points.eq(nextli).addClass('active').siblings().removeClass('active');
    }

    function move(){
        //向右走到第一张，再继续走时
        if(nextli < 0){
            nextli = len - 1;//将要来的是最后一张
            nowli = 0;//要离开的是第一张
            $li.eq(nextli).css({left:-600});//把最后一张定位到左侧，准备进入
            $li.eq(nowli).stop().animate({left: 600});//离开的第一张走到右侧
            $li.eq(nextli).stop().animate({left: 0});//马上要进来的最后一张走进来
            nowli = nextli;//要离开的赋值为刚进入的最后一张
            return;//下边是正常情况的，不执行，直接返回
        }
        //向左走到最后一张，再继续走时
        if(nextli > len - 1){
            nextli = 0;//将要来的是第一张
            nowli = len - 1;//要离开的是最后一张
            $li.eq(nextli).css({left:600});//把第一张定位到右侧，准备进入
            $li.eq(nowli).stop().animate({left: -600});//离开的最后一张走到左侧
            $li.eq(nextli).stop().animate({left: 0});//马上要进来的第一张走进来
            nowli = nextli;//要离开的赋值为刚进入的第一张
            return;//下边是正常情况的，不执行，直接返回
        }
        
        if(nextli > nowli){
            //马上要进来的这张瞬间移动到右边
            $li.eq(nextli).css({left:600});
            //当前这张离开
            $li.eq(nowli).stop().animate({left: -600});
        }else{
            //马上要进来的这张瞬间移动到左边
            $li.eq(nextli).css({left:-600});
            //当前这张离开
            $li.eq(nowli).stop().animate({left: 600});
        }
        //马上要进来的这张走到0的位置
        $li.eq(nextli).stop().animate({left: 0});
        nowli = nextli;
    }
})

    12、整屏滚动

    • html + js
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>整屏滚动</title>
    <link rel="stylesheet" type="text/css" href="css/test.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <script type="text/javascript">
        $(function(){
            //获取可视区的高度
            var $h = $(window).height();
            // alert($h);//973
            var $pages = $('.pages');
            var $points = $('.points li');
            var len = $pages.length;//一共有几屏
            var nowscreen = 0;//当前是第几屏
            var timer = null;

            //一开始给第一屏加淡入动画
            $pages.eq(0).addClass('moving');

            //把每一屏都设成可视区的高度
            $pages.css({height:$h});

            //鼠标滚轮的滚动事件
            $(window).mousewheel(function(event, data){
                //通过清除定时器实现函数节流，避免高频触发滚轮事件时一下滚动多次
                clearTimeout(timer);

                timer = setTimeout(function(){
                    //向下滑动是-1，向上滑动是1
                    // alert(data);
                    if(data == -1){//向下滑动
                        nowscreen++;
                        if(nowscreen > len -1){
                            nowscreen = len -1;
                        }
                    }else{//向上滑动
                        nowscreen--;
                        if(nowscreen < 0){
                            nowscreen = 0;
                        }
                    }

                    //修改top的值实现翻页
                    $('.pages_con').animate({top: -$h * nowscreen},300);

                    //设置当前小圆点和其它小圆点的样式
                    $points.eq(nowscreen).addClass('active').siblings().removeClass('active');

                    //当前屏做淡入动画，其它屏移除样式
                    $pages.eq(nowscreen).addClass('moving').siblings().removeClass('moving');
                },200);//延迟200毫秒是经验数据
            })

            //点击小圆点也实现翻页和动画
            $points.click(function() {
                $(this).addClass('active').siblings().removeClass('active');
                $('.pages_con').animate({top: -$h*$(this).index()}, 300);
                $pages.eq($(this).index()).addClass('moving').siblings().removeClass('moving');
            });
        })
    </script>
</head>
<body>
    <div class="pages_con">

        <div class="pages page1">
            <div class="main_con">
                <div class="left_img"><img src="images/001.png"></div>
                <div class="right_info">
                Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
                    
                </div>
            </div>
        </div>

        <div class="pages page2">
            <div class="main_con">
                <div class="right_img"><img src="images/002.png"></div>
                <div class="left_info">
                2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
                </div>
            </div>
            
        </div>

        <div class="pages page3">
            <div class="main_con">
                <div class="left_img"><img src="images/004.png"></div>
                <div class="right_info">
                以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。

                    
                </div>
            </div>          
        </div>

        <div class="pages page4">
            <div class="main_con">
                <div class="left_img"><img src="images/003.png"></div>
                <div class="right_info">
                    Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
                </div>
            </div>          
        </div>

        <div class="pages page5">
            <div class="main_con">
                <div class="center_img"><img src="images/005.png"></div>        
            </div>          
        </div>

    </div>
    <!-- 定位到屏幕右侧的小圆点 -->
    <ul class="points">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>
    • css
    body,ul{
    margin:0;
    padding:0;
}

ul{list-style:none;}

.pages_con{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    overflow:hidden;
}

.pages{
    height:600px;/*每个屏幕高度都不相同，先给个预设值600*/
    position:relative;
}
.page1{ background-color:orange;}
.page2{ background-color:lightgreen;}
.page3{ background-color:cyan;}
.page4{ background-color:pink;}
.page5{ background-color:lightblue;}

.points{
    width:16px;
    height:176px;
    position:fixed;
    right:20px;
    top:50%;
    margin-top:-88px;
}

.points li{
    width:13px;
    height:13px;
    margin:16px 0;
    border-radius:50%;
    border:1px solid #666;
    cursor:pointer;
}

.points li.active{
    background-color:#666;
}

.main_con{
    width:900px;
    height:400px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-450px;
    margin-top:-200px;
}

.main_con .left_img{
    width:363px;
    height:400px;
    float:left;
    position:relative;
    left:-50px;
    opacity:0;
    filter:alpha(opacity=0);
    /*css3过渡动画：所有属性同时变 时长 运动曲线 延迟*/
    transition:all 1000ms ease 300ms;
}

.main_con .right_info{
    width:500px;
    height:300px;
    margin-top:50px;
    float:right;
    font-family:'Microsoft Yahei';
    font-size:20px;
    line-height:50px;
    color:#666;
    text-indent:2em;
    text-align:justify;
    position:relative;
    right:-50px;
    opacity:0;
    filter:alpha(opacity=0);
    transition:all 1000ms ease 300ms;
}

.moving .main_con .left_img{
    left:0;
    opacity:1;
    filter:alpha(opacity=100);
}

.moving .main_con .right_info{
    right:0;
    opacity:1;
    filter:alpha(opacity=100);
}

.main_con .right_img{
    width:522px;
    height:400px;
    float:right;
    position:relative;
    top:-50px;
    opacity:0;
    filter:alpha(opacity=0);
    transition:all 1000ms ease 300ms;
}

.main_con .left_info{
    width:350px;
    height:300px;
    margin-top:50px;
    float:left;
    font-family:'Microsoft Yahei';
    font-size:20px;
    line-height:50px;
    color:#666;
    text-indent:2em;
    text-align:justify;
    position:relative;
    bottom:-50px;
    opacity:0;
    filter:alpha(opacity=0);
    transition:all 1000ms ease 300ms;
}

.moving .main_con .right_img{
    top:0;
    opacity:1;
    filter:alpha(opacity=100);
}

.moving .main_con .left_info{
    bottom:0;
    opacity:1;
    filter:alpha(opacity=100);
}

.main_con .center_img{
    width:611px;
    height:337px;
    position:absolute;
    left:50%;
    margin-left:-305px;
    bottom:-50px;
    opacity:0;
    filter:alpha(opacity=0);
    transition:all 1000ms ease 300ms;

}

.moving .main_con .center_img
{
    bottom:0;
    opacity:1;
    filter:alpha(opacity=100);
}

    相关文章

      网友评论

          本文标题：前端（绑定事件、冒泡事件、节点操作、幻灯片......）

          本文链接：https://www.haomeiwen.com/subject/ygwqwftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|前端（绑定事件、冒泡事件、节点操作、幻灯片......）|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！