jquery控制图片由中心点缓慢变大效果

来源：互联网发布：飞客数据恢复怎么样编辑：程序博客网时间：2024/05/23 20:10

制作样式如上

附上主要代码

<script>    $(function(){        $("img").mouseover(function(){            $(this).parent(".col").animate({                width:"310px",                height:"210px"            },"normal");        });        $("img").mouseout(function(){            $(this).parent(".col").animate({                width:"300px",                height:"200px"            },"normal");        });    });</script>

这里主要用到了animate方法其中可以设置动画执行的时间

4中方式

1）自己制定时间 1200 (代表1.2秒)

2）“normal”: 一般速度

3) “slow”：速度很慢

4) "fast" :速度很快

注意点:

开始的时候使用$(".col").mouseout 这样的形式来写的但是这样会多次触发mouseout以及mouseover事件因为在里层还有img标签相当于触发img的父元素col又触发了img元素

解决方法:

1) 如上图所示选择最内部的元素触发相关事件即可

2) 将mouseout以及mouseover换成 mouseleave以及mouseenter即可后者只会触发一次不管是否触发他的子元素!

0 0