jquery实现鼠标经过图片时，图片上下跳动

salestina

于 2021-09-07 15:08:54 发布

阅读量590

点赞数

分类专栏： javaScript 文章标签： jquery javascript

本文链接：https://blog.csdn.net/salestina/article/details/120158288

版权

javaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<ul id="ul">
    <li><img src="images/01.jpg"/></li>
    <li><img src="images/02.jpg"/></li>
</ul>

<script type="text/javascript">
    $(function(){
	    $("#ul img").each(function(k,img){
		    new JumpObj(img,10);
	    });
    });
</script>

<script type="text/javascript">
    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 jump() {
		    var t = parseInt(elem.style.top);
		    if (!drct) motionStart();
		    else {
			    var nextTop = t - step * drct;
			if (nextTop >= -curMax && nextTop <= 0) elem.style.top = nextTop + 'px';
			else if(nextTop < -curMax) drct = -1;
		    else {
				var nextMax = curMax / 2;
				if (nextMax < 1) {motionOver();return;}
				curMax = nextMax;
				drct = 1;
			}
		}
		setTimeout(function(){jump()}, 200 / (curMax+3) + drct * 3);
	    }

	    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;
    }
</script>