jquery制作鼠标经过图片实现上下抖动动画特效

最新推荐文章于 2021-09-07 15:08:54 发布

weixin_30593443

最新推荐文章于 2021-09-07 15:08:54 发布

阅读量472

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hangun/p/6645761.html

版权

html:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<html xmlns="http://www.w3.org/1999/xhtml">
　　<head>
　　　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
　　　　　　<title>jquery制作鼠标经过图片实现上下抖动动画特效</title>
　　　　<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
　　　　<script type="text/javascript" src="js/jump.js"></script>
　　　　<script type="text/javascript">
　　　　$(function(){
　　　　　　$("#ul img").each(function(k,img){
　　　　　　　　new JumpObj(img,10);
　　　　　　　　//第一个参数代表元素对象
　　　　　　　　//第二个参数代表抖动幅度
　　　　　　});
　　　　});
　　　　</script>

　　</head>
　　<body>
　　　　<div class="img_box">
　　　　　　<ul id="ul">
　　　　　　　　<li><a href="#"><img src="images/01.jpg"/></a></li>
　　　　　　　　<li><a href="#"><img src="images/02.jpg"/></a></li>
　　　　　　　　<li><a href="#"><img src="images/03.jpg"/></a></li>
　　　　　　　　<li><a href="#"><img src="images/04.jpg"/></a></li>
　　　　　　</ul>
　　　　</div>

　　</body>
</html>

jump.js:

　　function JumpObj(elem, range, startFunc, endFunc) {
　　　　var curMax = range = range || 6;
　　　　startFunc = startFunc || function(){};
　　　　endFunc = endFunc || function(){};
　　　　var drct = 0;
　　　　var step = 1;

　　　　init();

　　　　function init() { elem.style.position = 'relative';active() }
　　　　function active() { elem.onmouseover = function(e) {if(!drct)jump()} }
　　　　function deactive() { elem.onmouseover = null }

　　　　function motionStart() {
　　　　　　startFunc.apply(this);
　　　　　　elem.style.top='0';
　　　　　　drct = 1;
　　　　}

　　　　function motionOver() {
　　　　　　endFunc.apply(this);
　　　　　　curMax = range;
　　　　　　drct = 0;
　　　　　　elem.style.top = '0';
　　　　}

　　　　this.jump = jump;
　　　　this.active = active;
　　　　this.deactive = deactive;
}

转载于:https://www.cnblogs.com/hangun/p/6645761.html

weixin_30593443

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery制作鼠标经过图片实现上下抖动动画特效

html:　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">　　<html xmlns="http://www.w3.org/1999/xhtml">　　<head&...
复制链接

扫一扫