一個簡單的小動畫效果
- PHP中文网原創
- 2017-06-19 17:34:461771瀏覽
示範效果：
#專案需要做這個效果，把效果寫出來了順便就封裝成了一個插件，也練習了一下插件的寫法。
程式碼：
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);
以上是一個簡單的小動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn