首页 > 代码库 > 划入某个区域的小动画效果

划入某个区域的小动画效果

2024-10-08 14:37:01   214人阅读

演示效果：

技术分享

项目需要做这个效果，把效果写出来了顺便就封装成了一个插件，也练习了一下插件的写法。

代码：

html:这个没什么说的，就是简单的布局：在图片上有一个介绍，介绍定位在区域外部。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/TweenMax.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            ul {
                width: 800px;
                margin: 100px auto;
            }
            ul li {
                display: inline-block;
                width: 45%;
                cursor: pointer;
                position: relative;
                margin-top: 30px;
                overflow: hidden;
            }
            ul li img {
                width: 100%;
                height: 100%;
            }
            ul li .info {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 100%;
                left: 100%;
                background-color: rgba(255, 255, 255, .6);
                color: #f00;
                text-align: center;
                line-height: 80px;
            }
        </style>
    </head>
    <body>
        <ul class="clearfix">
            <li> <img src="img/animation1.jpg" />
                <div class="info">点我吧</div>
            </li>
            <li> <img src="img/animation2.jpg" />
                <div class="info">点我吧</div>
            </li>
            <li> <img src="img/animation3.jpg" />
                <div class="info">点我吧</div>
            </li>
            <li> <img src="img/animation4.jpg" />
                <div class="info">点我吧</div>
            </li>
        </ul>
        <script src="js/lonelyAni.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                $("ul li").lonelyMove({
                    moveClass: ".info"
                });
            });
        </script>
    </body>
</html>

JS插件效果:把效果封装成了一个插件，以后直接调用就行了。

 

//移入移出插件
(function($) {
    $.fn.extend({
        "lonelyMove": function(options) {
            var defaults = {
                time: .3,
                close: null
            }
            var opts = $.extend(true, defaults, options);
            var vision = /mobile/.test(navigator.userAgent.toLowerCase());
            return $(this).on(‘mouseenter mouseleave‘, function(event) {
                if(!vision) {
                    var event = event || window.event,
                        liWidth = $(this).width(),
                        liHeight = $(this).height(),
                        u0 = (event.pageX - ($(this).offset().left) - (liWidth / 2)) * (liWidth > liHeight ? (liHeight / liWidth) : 1),
                        F0 = (event.pageY - ($(this).offset().top) - (liHeight / 2)) * (liHeight > liWidth ? (liWidth / liHeight) : 1),
                        index = Math.round((((Math.atan2(F0, u0) * (180 / Math.PI)) + 180) / 90) + 3) % 4,
                        location = [{
                            ‘top‘: "-100%",
                            ‘left‘: ‘0%‘
                        }, {
                            ‘top‘: ‘0%‘,
                            ‘left‘: "100%"
                        }, {
                            ‘top‘: "100%",
                            ‘left‘: ‘0%‘
                        }, {
                            ‘top‘: ‘0%‘,
                            ‘left‘: "-100%"
                        }],
                        type = event.type;
                    if(type == ‘mouseenter‘) {
                        $(this).find(opts.moveClass).css(location[index]);
                        TweenMax.to($(this).find(opts.moveClass), opts.time, {
                            css: {
                                top: 0,
                                left: 0
                            },
                            ease: Cubic.Linear
                        });
                    } else {
                        TweenMax.to($(this).find(opts.moveClass), opts.time, {
                            css: location[index],
                            ease: Cubic.Linear
                        });
                    }
                }
            });
        }
    });
})(jQuery);

 

划入某个区域的小动画效果


联系
我们