版头跟随鼠标移动效果

作者: 谢小逸 | 来源:发表于2017-06-14 17:30 被阅读0次

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>鼠标动版头</title>
    <style>
    .userDefinedArea {
        width: 1920px;
        margin: 0 auto
    }
    
    .user-yh-top {
        width: 990px;
        height: 565px;
        position: relative;
        margin: 0 auto;
        margin: 0 auto;
    }
    
    .user-yh-top p {
        position: absolute;
        top: 0;
        left: 50%;
    }
    
    .user-yh-top p.p1 {
        margin-left: -960px;
        width: 1920px;
        height: 100%;
    }
    
    .user-yh-top p.p2 {
        margin-left: -495px;
        width: 990px;
        height: 278px;
        z-index: 9999;
    }
    
    .user-yh-top p.p3 {
        margin-left: -495px;
        width: 990px;
        height: 284px;
        bottom: 0;
        top: auto;
    }
    
    .user-yh-top p.p4 {
        margin-left: -524px;
        width: 210px;
        height: 344px;
        top: 160px;
    }
    </style>
</head>

<body>
    <div class="mc" style=" min-height:0px;">
        <div class="j-module" module-function="autoCenter" module-param="{}">
            <div class="userDefinedArea">
                <div class="user-yh-top">
                    <p class="p1">![](https://img.haomeiwen.com/i6449520/8e258859470e9c38.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</p>
                    <p class="p2" >![](https://img.haomeiwen.com/i6449520/66b7f9353125ab08.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</p>
                    <p class="p3">![](https://img.haomeiwen.com/i6449520/fdd5d7950d2b6f75.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</p>
                    <p class="p4">![](https://img.haomeiwen.com/i6449520/f0c9ed18dd839fcc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</p>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="http://t.moonbasa.com/Scripts/jquery-1.7.1.min.js?id=20141128"></script>
    <script>
    (function() {
        $.fn.mouseMove = function() {
            var container = $(this),
                height = container.offset().top,
                middle = $(window).width() / 2;
            container.find('p.p2').each(function() {
                var s = $(this);
                s.attr('offset-left', s.css('left') || 0);
                s.attr('offset-top', s.css('top') || 0);
                s.attr('offset-speed-x', Math.random() * 0.08);
                s.attr('offset-speed-y', Math.random() * 0.06);
            });
            $(document).mousemove(function(e) {
                if ($(document).scrollTop() <= height) {
                    var myMouseX = e.pageX - middle,
                        myMouseY = e.pageY - height / 2;
                    container.find('p.p2').each(function() {
                        var s = $(this);
                        s.css('left', parseInt(s.attr('offset-left')) + myMouseX * parseFloat(s.attr('offset-speed-x')));
                        s.css('top', parseInt(s.attr('offset-top')) + myMouseY * parseFloat(s.attr('offset-speed-y')));
                    });
                }
            });
        }
        $('.user-yh-top').mouseMove();
    })(jQuery);
    </script>
</body>

</html>

网友评论

本文标题：版头跟随鼠标移动效果

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

延伸阅读

深度阅读

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

版头跟随鼠标移动效果

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读