cari

Rumah >hujung hadapan web >tutorial js >一个简单的小动画效果

一个简单的小动画效果

PHP中文网
PHP中文网asal
2017-06-19 17:34:461796semak imbas

演示效果：

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

代码：

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

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/reset.css?1.1.10" /><script src="js/jquery-2.1.0.js?1.1.10" type="text/javascript" charset="utf-8"></script><script src="js/TweenMax.js?1.1.10" 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?1.1.10" 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);

 

Atas ialah kandungan terperinci 一个简单的小动画效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：highcharts用法的实例代码Artikel seterusnya：angular分页插件

Artikel berkaitan

Lihat lagi