jquery实现图片上下左右翻滚效果代码

我们先来看看核心代码

 代码如下 复制代码

$(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});
 });
})

具体的实例演示代码

 代码如下 复制代码

<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>

<div class="top">
 <div><a href="http://www.111cn.net/"  target="_blank" rel="nofollow"><img src="images/shu.jpg" /></a></div>
</div>

<div class="bottom">
 <div><a href="http://www.111cn.net/" target="_blank" rel="nofollow"><img src="images/heng.jpg" /></a></div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.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>

时间: 2024-09-30 12:01:41

jquery实现图片上下左右翻滚效果代码的相关文章

jquery实现图片水平滚动效果代码分享_jquery

本文实例讲述了jquery实现图片水平滚动效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery实现图片水平滚动效果代码如下 <HEAD> <META content="text/html; charset=gb2312" http-equiv="Content-Type"> &

jQuery实现图片轮播效果代码(基于jquery.pack.js插件)_jquery

本文实例讲述了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"> <he

jQuery实现图片轮播效果代码_jquery

整理以前用jQuery实现的图片轮播效果.  1. 不做操作时,自动轮播  2. 鼠标悬浮在图片上时,停止自动轮播,隐藏在图片左右的箭头会显示出来  3. 手动轮播1:鼠标指向图片底部的小标按钮,可以切换对应的图片  4. 手动轮播2:点击左右箭头也可以切换图片 效果图:(PS:用软件捕捉的,不太会弄,感觉图片都失真了) 下面是代码区域: **inde.html部分代码** <div class="box"> <ul class="img">

基于jquery实现图片广告轮换效果代码_jquery

效果图:实现代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

jquery 图片滚动切换效果代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.111cn.net/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="conte

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-

基于jquery实现的上传图片及图片大小验证、图片预览效果代码_jquery

jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 复制代码 代码如下: */ function submit_upload_picture(){ var file = $('file_c').value; if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){ alert("图片类型必须是.gif,jpeg,jpg,png中的一种") }else{ $('both_form').action="file!u

js游戏人物上下左右跑步效果代码分享_javascript技巧

本文实例讲述了js游戏人物上下左右跑步效果.分享给大家供大家参考.具体如下: js游戏人物上下左右跑步效果是一款jquery ui制作的点击按钮网格布局头像图片动画切换特效.你操控着游戏人物,掌控一切是不是很有意思,感兴趣的小伙伴们可以学习一下 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery实现热气球动画背景登录框代码如下 <!DOCTYPE html>

jquery实现图片翻页效果

 jquery实现图片翻页效果,大家可以使用下面的方法    代码如下: $(function($){       $.fn.changeList = function(options){           var defaults = {                       tag : 'li', // tab name                       subName : '.utilTabSub', // sub class name