欢迎您  本站地址:   jQuery鼠标悬停图片边框动画特效-小库平台

小库平台

 找回密码
 立即注册
jQuery鼠标悬停图片边框动画特效-小库平台

小库平台

 找回密码
 立即注册
上一主题 下一主题

jQuery鼠标悬停图片边框动画特效

跳转到指定楼层
楼主
|只看大图 回帖奖励 |倒序浏览 |阅读模式

jQuery鼠标悬停图片边框动画特效是一款鼠标移动商品图片的时候动画显示红色边框的动画代码。

js代码
<script>
$(function(){
//边框效果--移入
functionbiankuang(){
$('.biankuang_1').stop(true).animate({
height:'305px'
},300)
$('.biankuang_2').stop(true).delay(300).animate({
width:'360px'
},300)
$('.biankuang_3').stop(true).animate({
height:'305px'
},300)
$('.biankuang_4').stop(true).delay(300).animate({
width:'360px'
},300)
}
//边框效果--移出
functionbiankuang1(){$('.biankuang_1').stop(true).delay(100).animate({
height:'0px'
},100)
$('.biankuang_2').stop(true).animate({
width:'0px'
},100)
$('.biankuang_3').stop(true).delay(100).animate({
height:'0px'
},100)
$('.biankuang_4').stop(true).animate({
width:'0px'
},100)
}
//触发$('.cn_gobuy').hover(
function(){
$('.text_gobuy').addClass('text_gobuy_show');
$('.search_y').animate({left:'150',opacity:1},300);
biankuang();
},
function(){
$('.text_gobuy').removeClass('text_gobuy_show');
$('.search_y').animate({left:'100',opacity:0},300);
biankuang1();
}
);})</script>



下载
回复

使用道具 举报

小黑屋|小库平台

GMT+8, 2024-9-20 07:46 , Processed in 0.791364 second(s), 19 queries , Xcache On.

Powered by Discuz! 3.4

小库提示

扫描下方二维码,访问手机版。