jQuery实现图片的上下左右翻滚_图片特效

jQuery实现图片的上下左右翻滚: 发布时间：2020-07-25编辑：脚本学堂

jQuery实现图片的上下左右翻滚，将鼠标放在图片上的时候，图片会向左向右翻滚，或向上向下翻滚。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>实现图片显示上下左右翻滚</title>
<meta name="keywords" content="图片显示,上下左右翻滚" >
<style type="text/css"> 
body{margin:0 auto;font:12px/1.5 tahoma,arial,5b8b4f53;color:#828282;background:#fff}
body,div,p,span,a,ul,li,b,form,input,h2,h3,img{margin:0;padding:0}
ul,li{list-style-type: none}
img{border:none;}
.top{width:500px;margin:20px auto}
.top div{width:122px;height:56px;float:left;margin-left:5px;display:inline;border:1px #ccc solid;position:relative;overflow:hidden}
.top div img{position:absolute}
.bottom{width:500px;margin:20px auto}		
.bottom div{width:122px;height:56px;float:left;margin-left:5px;display:inline;border:1px #ccc solid;position:relative;overflow:hidden}
.bottom div img{position:absolute}	
</style>
</head>
<body> 
<div class="top">
<div><a href="#"  target="_blank" rel="nofollow"><img src="/source/images/201207/shu.jpg" /></a></div>
</div>
<div class="bottom">
<div><a href="#" target="_blank" rel="nofollow"><img src="/source/images/201207/heng.jpg" /></a></div>
</div>
<div style="width:100%;height:600px;margin:0 auto"></div>
<script type="text/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>" src="/source/js/jquery1.3.2.js"></script>
<script type="text/javascript">
$(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});
	});
})
</script>
</body>
</html>

提示：可修改代码后再运行!

上一篇：大屏jQuery焦点图切换幻灯片代码
下一篇：纯JavaScript实现的放大镜效果

与 jQuery实现图片的上下左右翻滚有关的文章

本文标题：jQuery实现图片的上下左右翻滚
本页链接：http://www.jb200.com/tx/120.html

浏览排行

栏目分类

热点文章

jQuery实现图片的上下左右翻滚