鼠标移动图片向上滚动

来源：互联网发布：pptv网络电视官方编辑：程序博客网时间：2024/04/29 13:15

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>中国站长天空-网页特效-图片特效-鼠标悬停图片上下或左右滑动的效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/css">
html,body,div,img{margin:0;padding:0;border:none;}
html{font:1em Arial,Helvetica,sans-serif;color:#444;}
h1{text-align:center;}
.clear{overflow:auto;}
#vertical,#horizontal{margin:50px auto;width:909px;}
#vertical div,#horizontal div{margin-right:3px;float:left;width:296px;height:130px;border:1px solid #999;position:relative;overflow:hidden;}
#vertical img,#horizontal img{position:absolute;}
</style>
<script type="text/javascript" src="http://www.zzsky.cn/effect/images/201310/131700/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
   //Vertical
   $("#vertical div a").hover(function(){
       $("img",this).stop().animate({top:"-130px"},{queue:false,duration:200});
   },function(){
       $("img",this).stop().animate({top:"0px"},{queue:false,duration:200});
   });
   //Horizontal
   $("#horizontal div a").hover(function(){
       $("img",this).stop().animate({left:"-296px"},{queue:false,duration:200});
   },function(){
       $("img",this).stop().animate({left:"0px"},{queue:false,duration:200});
   });
});
</script>
</head>
<body>

<div id="vertical" class="clear">
   <h1>jQuery image slide on hover effect (vertical)</h1>
   <div><a href="http://blog.163.com/chen_hui/blog/#"><img src="http://www.zzsky.cn/effect/images/201310/131700/image-1.jpg" alt=""></a></div>
   <div><a href="http://blog.163.com/chen_hui/blog/#"><img src="http://www.zzsky.cn/effect/images/201310/131700/image-2.png" alt=""></a></div>
</div>
<div id="horizontal" class="clear">
   <h1>jQuery image slide on hover effect (horizontal)</h1>
   <div><a href="http://blog.163.com/chen_hui/blog/#"><img src="http://www.zzsky.cn/effect/images/201310/131700/image-3.jpg" alt=""></a></div>
   <div><a href="http://blog.163.com/chen_hui/blog/#"><img src="http://www.zzsky.cn/effect/images/201310/131700/image-4.png" alt=""></a></div>
</div>
</body>
</html>

转自：http://www.zzsky.cn

0 0