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

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

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

js代码

<script type=”text/javascript”>
$(function(){
// 初始化 第一个 状态
jQuery(‘.dh ul li.curr’).animate({width:’246px’},’slow’);
jQuery(‘.dh ul li.curr .layer’).animate({height:’60px’},’slow’);
jQuery(‘.dh ul li.curr .layer .p1′).animate({left:’-200%’},’slow’);
jQuery(‘.dh ul li.curr .layer .p2′).animate({right:’145px’},’slow’);

jQuery(‘.sfq ul li’).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>

云部落资源网所有软件,源码,素材,等资源均来自网友上传,或网络收集,由于收集过程中几经转载,所以很多作品的原作者不详如果有侵犯版权请及时联系我们,我们会在第一时间处理。
如果该资源不能下载,请联系本站在线客服报错,谢谢合作!!

本站部分素材资源及板块内容来自网络,如有侵犯您的权益,请联系我们,站长会立即处理,转载请注明来源网址!
云部落资源网 » jQuery手风琴图片滑动展开切换特效源代码