码迷,mamicode.com
首页 > 其他好文 > 详细

两种方式实现鼠标悬停图片逐渐变大

时间:2017-03-10 17:33:20      阅读:320      评论:0      收藏:0      [点我收藏+]

标签:比较   渐变   function   log   img   nbsp   children   val   set   

鼠标悬停图片逐渐变大这是一个很常见的效果,这里推荐两种方式,各有优缺点:

1.利用js,通过定时器实现宽高的加减。

//鼠标移动图片变大
function change_large(obj,speed,target_width,target_height){
    var timer = null;
    var bengin_width = 140;//初始宽度
    var bengin_height = 180;//初始高度
    clearInterval(timer);
    timer = setInterval(function(){
        if(bengin_width == target_width && bengin_height == target_height){
            clearInterval(timer);
        }
        else{
            //alert(obj);
            bengin_width += speed;
            bengin_height += speed;
            obj.css("width",bengin_width);
            obj.css("height",bengin_height);
        }
    }, 1);
}
//鼠标移动图片变小
function change_small(obj,speed,target_width,target_height){
    var timer = null;
    var bengin_width = 160;
    var bengin_height = 200;
    clearInterval(timer);
    timer = setInterval(function(){
        if(bengin_width == target_width && bengin_height == target_height){
            clearInterval(timer);
        }
        else{
            //alert(obj);
            bengin_width += speed;
            bengin_height += speed;
            obj.css("width",bengin_width);
            obj.css("height",bengin_height);
        }
    }, 1);
}

$(".div_item").mouseenter(function(){
    var obj = $(this).children("img");
    change_large(obj,1,160,200);
});
$(".div_item").mouseleave(function(){
    var obj = $(this).children("img");
    change_small(obj,-1,140,180);
});

2.第二种比较简答,直接上jquery的animate()

$(".div_item").mouseenter(function(){
    $(this).children("img").animate({
        height:‘+=20px‘,
        width:‘+=20px‘
    },100);
});
$(".div_item").mouseleave(function(){
    $(this).children("img").animate({
        height:‘-=20px‘,
        width:‘-=20px‘
    },100);
});

两种比较起来,第二种会导致当鼠标过一次就会变大缩小一次,会造成次数过多,与实际演示的不匹配,建议用第一种,第一种也还可以改进。

 

两种方式实现鼠标悬停图片逐渐变大

标签:比较   渐变   function   log   img   nbsp   children   val   set   

原文地址:http://www.cnblogs.com/jlj9520/p/6531537.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!