web前端案例-电影预告动态滚动

web前端群，189394454，有视频、源码、学习方法等大量干货分享

效果知识点：html常用标签, css浮动定位盒模型，javascript自定义动画、鼠标跟随移动特效等。

👇html代码：

    <div id="box">
                <div class="pic">
                    <ul>
                        <li>
                            <img src="images/1.jpg" />
                            <div class="bigImg">
                                <img style="width:380px;height:350px;"  src="images/1.jpg" />
                            </div>
                        </li>
                        <li>
                            <img src="images/2.jpg" />
                            <div class="bigImg">
                                <img style="width:380px;height:350px;"  src="images/2.jpg" />
                            </div>
                        </li>
                        <li>
                            <img src="images/3.jpg" />
                            <div class="bigImg">
                                <img style="width:380px;height:350px;"  src="images/3.jpg" />
                            </div>
                        </li>
                        <li>
                            <img src="images/4.jpg" />
                            <div class="bigImg">
                                <img style="width:380px;height:350px;"  src="images/4.jpg" />
                            </div>
                        </li>
                        <li>
                            <img src="images/5.jpg" />
                            <div class="bigImg">
                                <img style="width:380px;height:350px;"  src="images/5.jpg" />
                            </div>
                        </li>
                        <li>
                            <img src="images/1.jpg" />
                            <div class="bigImg">
                                <img style="width:380px;height:350px;"  src="images/1.jpg" />
                            </div>
                        </li>
                        <li>
                            <img src="images/2.jpg" />
                            <div class="bigImg">
                                <img style="width:380px;height:350px;"  src="images/2.jpg" />
                            </div>
                        </li>
                        <li>
                            <img src="images/3.jpg" />
                            <div class="bigImg">
                                <img style="width:380px;height:350px;"  src="images/3.jpg" />
                            </div>
                        </li>
                        <li>
                            <img src="images/4.jpg" />
                            <div class="bigImg">
                                <img style="width:380px;height:350px;"  src="images/4.jpg" />
                            </div>
                        </li>
                        <li>
                            <img src="images/5.jpg" />
                            <div class="bigImg">
                                <img style="width:380px;height:350px;"  src="images/5.jpg" />
                            </div>
                        </li>
                    </ul>
                </div>
        </div>

👇css代码：

<style type="text/css">
        *{margin:0px;padding:0px;}
        body{overflow:hidden;}
        #box{
                    width:100%;height:211px;
                    margin:80px auto;background:url("images/bg1.jpg");
                    padding-top:35px;
                    }
        .pic{width:100%;height:175px;position:relative;}
        .pic ul{width:5000px;}
        .pic ul li{
                                width:254px;height:175px;border:1px solid #000;
                                float:left;list-style-type:none;
                                position:relative;
                                }
        img{width:254px;height:175px;}
        .bigImg{
                        width:380px;height:350px;border:5px solid #ddd;
                        box-shadow:0px 0px 20px #000;
                        position:absolute;left:0px;top:0px;z-index:10;
                        display:none;
                        }
    </style>

👇javascript代码：

    <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" >
            var i = 0;
            var time = 0;
                $(".pic ul li").hover(function(){
                        clearInterval(time);
                        clearInterval(time);
                        $(this).children(".bigImg").show();
                },function(){
                        $(this).children(".bigImg").hide();
                      time = setInterval("junmper()",10);
                })
                $(".pic ul li").mousemove(function(e){
                        var x = e.clientX; //鼠标当前点距离浏览器窗口左边的距离,也就是大图距离浏览器窗口左边的距离
                        var y = e.clientY; //鼠标当前点距离浏览器窗口上边的距离,也就是大图距离浏览器窗口上边的距离
                        var li_x = $(this).offset().left; //当前li距离浏览器窗口左边的距离
                        var li_y = $(this).offset().top;//当前li距离浏览器窗口上边的距离
                        var yd_x = x-li_x; // 鼠标当前点距离li左侧的距离
                        var yd_y = y-li_y; // 鼠标当前点距离li上侧的距离
                        $(this).children(".bigImg").css({left:yd_x,top:yd_y});
                })
                function junmper(){
                    i--;
                    $(".pic").css("left",i+'px');
                    if (i==-window.innerWidth)
                    i=0;
                }
                time = setInterval("junmper()",10);
        </script>