jquery实现图片显示上下左右翻滚
这两天要么不是折腾shopex,要么弄discuz,咱的jquery博客有点忽视了。
白天公司的事情,晚上家里事情也多。
惆怅,时间不够用。
公司的需求像苍蝇似的,一会飞一个,鸡毛蒜皮多如毛。
最近弄商城个人中心相册,看了不少东西,还是老外的做的好。
今天分享一个早上整的jquery实现图片显示上下左右翻滚。
大体思路是这样的,鼠标移动到图片上图片上去,显示另外一个,实现上下 左右显隐效果。
其实是一张图片利用animate
(*^__^*) 嘻嘻……
$(document).ready(function(){
$(".top div a").hover(function(){
$("img",this).stop().animate({top:"-56px"},{queue:false,duration:200});
},function(){
$("img",this).stop().animate({top:"0px"},{queue:false,duration:200});
});
$(".bottom div a").hover(function(){
$("img",this).stop().animate({left:"-122px"},{queue:false,duration:200});
},function(){
$("img",this).stop().animate({left:"0px"},{queue:false,duration:200});
});
})
在线效果DEMO
转自 天外飞仙 http://www.jqueryba.com/399.html
没有成功真的很急人,不过我不会放弃的,因为我坚信当你想要放弃时你离成功只有一步!