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

港控/mmm° 2022-09-10 10:26 231阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，231人围观）

还没有评论，来说两句吧...

相关阅读

相关简单实现jQuery鼠标经过切换图片特效

html部分代码： <!doctype html> <html lang="ch-ZN"> <head> <meta charset=

迈不过友情╰/ 2022年10月22日 11:59/ 0 赞/ 248 阅读

相关 css实现图片上下居中显示

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

我就是我/ 2022年09月22日 15:58/ 0 赞/ 207 阅读

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

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

港控/mmm°/ 2022年09月10日 10:26/ 0 赞/ 232 阅读

相关 jQuery – 鼠标经过(hover)事件的延时处理

一、关于鼠标hover事件及延时鼠标经过事件为web页面上非常常见的事件之一。简单的hover可以用CSS :hover伪类实现，复杂点的用js。一般情况下，我们是

曾经终败给现在/ 2022年08月26日 13:27/ 0 赞/ 231 阅读

相关 30款css3实现的鼠标经过图片显示描述特效

今天给大家分享30款css3实现的鼠标经过图片显示描述特效，鼠标经过这些图片的时候以非常炫的方式显示图片的描述。为保证最佳的效果，请在 IE10+、Chrome、Firef

小鱼儿/ 2022年08月06日 15:18/ 0 赞/ 377 阅读

相关鼠标经过，图片会放大（从中心位置放大）

js部分： //鼠标经过a标签，对应的图片会放大效果 var zoom = 1.03; var width = $(thi

叁歲伎倆/ 2022年08月06日 12:13/ 0 赞/ 227 阅读

相关 css3鼠标经过，图片放大效果

css代码 /图片划过改变图片大小效果/ .list ul li { width: 228px; height: 270px; overflow: hidde

旧城等待，/ 2022年07月14日 15:29/ 0 赞/ 371 阅读

相关 css3鼠标经过，图片旋转

<style> .navigation:hover .img { -webkit-transition:0.4s linear;transition:0.4s ease

浅浅的花香味﹌/ 2022年06月10日 08:58/ 0 赞/ 310 阅读

相关 jquery实现鼠标悬浮显示图片

实现鼠标悬浮显示图片图片跟随鼠标 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

桃扇骨/ 2022年06月04日 05:50/ 0 赞/ 411 阅读

相关实现鼠标经过,产品图片的局部放大功能

vue中实例：操作dom实现参考：https://blog.csdn.net/alightman/article/details/78074687 注意点： 1、小图、

た入场券/ 2022年05月23日 01:43/ 0 赞/ 329 阅读