欢迎您  本站地址:   jQuery手风琴图片滑动展开切换特效-小库平台

小库平台

 找回密码
 立即注册
jQuery手风琴图片滑动展开切换特效-小库平台

小库平台

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

jQuery手风琴图片滑动展开切换特效

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

jQuery手风琴图片滑动展开切换特效是一款仿游戏网站的鼠标经过的时候图片高亮滑动展开切换代码。

js代码
<scripttype="text/javascript">
$(function(){
//初始化第一个状态
jQuery('.dhulli.curr').animate({width:'246px'},'slow');
jQuery('.dhulli.curr.layer').animate({height:'60px'},'slow');
jQuery('.dhulli.curr.layer.p1').animate({left:'-200%'},'slow');
jQuery('.dhulli.curr.layer.p2').animate({right:'145px'},'slow');jQuery('.sfqulli').hover(function(){
//获取索引
var_index=$(this).index();$(this).addClass('curr')
.stop()
.animate({
width:'246px'
},'slow')
.siblings()
.stop()
.animate({
width:'108px'
},'slow')
.removeClass('curr');$(this).find('.layer').stop().animate({height:'60px'},'slow').parent().siblings().find('.layer').stop().animate({
height:'100%'
},'slow');$(this).find('.layer.p1').stop().animate({left:'-200%'},'slow').siblings('.p2').stop().animate({
right:'145px'
},'slow').parent().parent().siblings().find('.layer.p1').stop().animate({left:'10px'},'slow').siblings('.p2').stop().animate({
right:'-200%'
},'slow')},function(){
//移出})
});
</script>



下载
回复

使用道具 举报

小黑屋|小库平台

GMT+8, 2024-9-20 22:53 , Processed in 0.811932 second(s), 19 queries , Xcache On.

Powered by Discuz! 3.4

小库提示

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