txf2004
- 浏览: 6881228 次
- 性别:
- 来自: 上海
-
最新评论
-
autosuggestion：
实现一个智能提示功能需要JavaScript、ajax、数据库 ...
自动提示结果 -
岁月之眸：
...
Java读TXT文件 -
yujian58：
写的好。
在线客服技术方案 -
QQ1067184821：
你好，能不能发个完整的给我呢？1067184821@qq.co ...
Extjs3.2+Json lib动态树与GridPanel简单展现 -
chenhua0725：
能不能发一个完成的包给我呢，谢谢了，83667664@qq.c ...
Extjs3.2+Json lib动态树与GridPanel简单展现
jquery实现图片显示上下左右翻滚
这两天要么不是折腾shopex,要么弄discuz,咱的jquery博客有点忽视了。
白天公司的事情，晚上家里事情也多。
惆怅，时间不够用。
公司的需求像苍蝇似的，一会飞一个，鸡毛蒜皮多如毛。
最近弄商城个人中心相册，看了不少东西，还是老外的做的好。
今天分享一个早上整的jquery实现图片显示上下左右翻滚。
大体思路是这样的，鼠标移动到图片上图片上去，显示另外一个，实现上下 左右显隐效果。
其实是一张图片利用animate
白天公司的事情，晚上家里事情也多。
惆怅，时间不够用。
公司的需求像苍蝇似的，一会飞一个，鸡毛蒜皮多如毛。
最近弄商城个人中心相册，看了不少东西，还是老外的做的好。
今天分享一个早上整的jquery实现图片显示上下左右翻滚。
大体思路是这样的，鼠标移动到图片上图片上去，显示另外一个，实现上下 左右显隐效果。
其实是一张图片利用animate
(*^__^*) 嘻嘻…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>jquery实现图片显示上下左右翻滚 | jQuery吧-Write Less, Do More</title>
<meta name="keywords" content="jquery,jquery博客,jquery效果,前端开发,web前端,web前端开发,设计,前端资源,html+CSS,JavaScript,html5,css3,浏览器兼容,php" >
<meta name="description" content="jQuery吧,Write Less, Do More,重注前端开发,web前端开发">
<link rel="shortcut icon" href="http://www.jqueryba.com/favicon.ico" type="image/x-icon"/>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.jqueryba.com/feed/" />
<link rel="stylesheet" type="text/css" media="all" href="http://www.jqueryba.com/wp-content/themes/jQueryba/style.css" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" media="all" href="http://www.jqueryba.com/wp-content/themes/jQueryba/style_ie7.css" /><![endif]-->
<link rel="pingback" href="http://www.jqueryba.com/xmlrpc.php" />
<link rel="alternate" type="application/rss+xml" title="jQuery吧-Write Less, Do More » jquery实现图片显示上下左右翻滚 评论 Feed" href="http://www.jqueryba.com/399.html/feed" />
<script type='text/javascript' src='http://www.jqueryba.com/wp-includes/js/comment-reply.js?ver=20090102'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.jqueryba.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.jqueryba.com/wp-includes/wlwmanifest.xml" />
<link rel='prev' title='jquery博客实现底部固定类似人人校内似的' href='http://www.jqueryba.com/396.html' />
<meta name="generator" content="WordPress 3.3.1" />
<link rel='canonical' href='http://www.jqueryba.com/399.html' />
<link rel='shortlink' href='http://www.jqueryba.com/?p=399' />
<link rel="stylesheet" type="text/css" href="http://www.jqueryba.com/wp-content/plugins/wp-code-highlight/css/wp-code-highlight.css" media="screen" />
</head>
<body>
<div id="head">
<div id="header">
<div id="top_ad" style="z-index:9999">
<script type="text/javascript">/*468*60，创建于2012-5-7*/ var cpro_id = 'u883919';</script><script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script>
</div>
<h1 id="logo">
<a href="http://www.jqueryba.com/" title="jquery博客" rel="home" ></a>
<span id="site-description">jQuery吧</span>
</h1>
</div><!-- #header -->
</div><!-- #head -->
<div id="nav">
<div id="menu-left"></div>
<ul id="menu-menu">
<li class="current-menu-item"><a href="http://www.jqueryba.com/" title="首页">首页</a></li>
<li><a href="http://www.jqueryba.com/category/jquery" target="_blank" title="jQuery">jQuery</a></li>
<li><a href="http://www.jqueryba.com/category/javascript" target="_blank" title="javascript">javascript</a></li>
<li><a href="http://www.jqueryba.com/category/htmlcss" target="_blank" title="HTML+CSS">HTML+CSS</a></li>
<li><a href="http://www.jqueryba.com/category/phplearn" target="_blank" title="php,discuz,shopex,thinkphp,smarty">php</a></li>
<li><a href="http://www.jqueryba.com/category/webresources" target="_blank" title="前端资源">前端资源</a></li>
<li><a href="http://www.jqueryba.com/category/mood" target="_blank" title="折腾">折腾</a></li>
<li><a href="http://www.jqueryba.com/57.html" target="_blank" title="关于我">关于我</a></li>
</ul>
<div id="menu-right"></div>
</div>
<div id="main"> <div id="content" role="main">
<div class="arc_box" style="padding:5px;">
<p><font style="font-weight:bold; color:#666">当前位置:</font> <a href="http://www.jqueryba.com/" title="首页">首页</a> » <a href="http://www.jqueryba.com/category/jquery" title="查看 jquery 中的全部文章">jquery</a> » <a href="http://www.jqueryba.com/category/jquery/jquerylearn" title="查看 jquery练习 中的全部文章">jquery练习</a> » 阅读正文</p>
</div>
<div class="arc_box">
<h2><a href="http://www.jqueryba.com/399.html">jquery实现图片显示上下左右翻滚</a>
</h2>
<div class="acr_where">[ <a href="http://www.jqueryba.com/category/jquery/jquerylearn" title="查看 jquery练习 中的全部文章" rel="category tag">jquery练习</a> ]</div>
<div class="entry">
<p>这两天要么不是折腾<strong>shopex</strong>,要么弄<strong>discuz</strong>,咱的<strong>jquery</strong>博客有点忽视了。<br />
白天公司的事情，晚上家里事情也多。<br />
惆怅，时间不够用。<br />
公司的需求像苍蝇似的，一会飞一个，鸡毛蒜皮多如毛。<br />
最近弄商城个人中心相册，看了不少东西，还是老外的做的好。<br />
今天分享一个早上整的<em>jquery实现图片显示</em>上下左右翻滚。<br />
大体思路是这样的，鼠标移动到图片上图片上去，显示另外一个，实现上下 左右显隐效果。<br />
其实是一张图片利用<em>animate</em><br />
(*^__^*) 嘻嘻……</p>
<pre class="wp-code-highlight prettyprint linenums:1">$(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});
});
})</pre>
<p>在线效果<a href="http://www.jqueryba.com/jquery/picTopBot/pictopbot.html">DEMO</a></p>
<div style="text-indent:0px;margin-top:10px">
本文分类：<a href="http://www.jqueryba.com/category/jquery/jquerylearn" title="查看 jquery练习 中的全部文章" rel="category tag">jquery练习</a></br>
本文标签：标签：<a href="http://www.jqueryba.com/tag/animate" rel="tag">animate</a>, <a href="http://www.jqueryba.com/tag/discuz" rel="tag">discuz</a>, <a href="http://www.jqueryba.com/tag/jquery%e5%ae%9e%e7%8e%b0%e5%9b%be%e7%89%87%e6%98%be%e7%a4%ba" rel="tag">jquery实现图片显示</a>, <a href="http://www.jqueryba.com/tag/shopex" rel="tag">shopex</a>, <a href="http://www.jqueryba.com/tag/%e4%b8%8a%e4%b8%8b%e5%b7%a6%e5%8f%b3%e7%bf%bb%e6%bb%9a" rel="tag">上下左右翻滚</a></br>
流行热度：已超过了 19 人围观
</br>
起飞时间: 2012年06月1号 9:27
</br>
文章链接：http://www.jqueryba.com/399.html (转载时请注明本文出处及文章链接)
</br>
<!-- Baidu Button BEGIN -->
<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
<span class="bds_more">分享到：</span>
<a class="bds_qzone"></a>
<a class="bds_tsina"></a>
<a class="bds_tqq"></a>
<a class="bds_renren"></a>
<a class="shareCount"></a>
</div>
<script type="text/javascript" id="bdshare_js" data="type=tools&uid=676909" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours();
</script>
<!-- Baidu Button END -->
</br>
上一篇 >：<a href="http://www.jqueryba.com/396.html" rel="prev">jquery博客实现底部固定类似人人校内似的</a></br>
下一篇 >：</div>
</div>
</div>
<div class="sber" style="width:830px;margin-bottom: 10px;">
<span class="box_lt"></span><span class="title"><h3>相关文章</h3></span><span class="box_rt"></span>
<div class="arc_box" style="border:none;">
<ul id="tags_related">
<li><a href="http://www.jqueryba.com/272.html" title="jQuery实现图片震动效果jquery博客右侧广告效果">
<img src="http://www.jqueryba.com/wp-content/themes/xmsz/images/bg.png" />
<span>jQuery实现图片震动效果jquery博客右侧广告效果</span></a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!-- end: relatedposts -->
<!-- You can start editing here. -->
<!-- If comments are open, but there are no comments. -->
<div class="clear"></div>
<div id="respond">
<div id="cancel-comment-reply">
<small><a rel="nofollow" id="cancel-comment-reply-link" href="/399.html#respond" style="display:none;">【点击此处取消回复评论】</a></small>
</div>
<form action="http://www.jqueryba.com/wp-comments-post.php" method="post" id="commentform">
<div id="author-info">
<p><label for="author"><small>昵称(*):</small></label></br><input type="text" name="author" id="author" value="" size="22" tabindex="1" required/></p>
<p><label for="email"><small>邮箱(*):</small></label></br><input type="text" name="email" id="email" value="" size="22" tabindex="2" required/></p>
<p><label for="url"><small>网站:</small></label></br><input type="text" name="url" id="url" value="" size="22" tabindex="3" /></p>
</div>
<p><label for="comment"><small>评论内容:</small></label></br><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4" ></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="提交评论" />
<input type="checkbox" name="comment_mail_notify" id="comment_mail_notify" value="comment_mail_notify" checked="checked" style="margin:10px;" /><label for="comment_mail_notify">接收回复邮件通知</label></p>
<input type='hidden' name='comment_post_ID' value='399' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</form>
</div><!--end respond-->
</div><!-- #content -->
<div id="sidebar">
<div class="sber">
<span class="box_lt"><h3>蜘丝马迹</h3></span><span class="title"></span><span class="box_rt"></span>
<div id="footprint">
<div id="footprint_url"><span>jQueryba</span>http://www.jqueryba.com/</div>
<ul>
<li id="rss" class="cur">
<a href="http://www.jqueryba.com/feed" alt="RSS" target="_blank">jQuery吧的RSS</a><em></em>
</li>
<li id="sina" class=""><a href="http://weibo.com/divjs" target="_blank" alt="微博：" rel="nofollow">jQuery吧的微博</a><em></em>
</li>
<li id="tencent" class=""><a href="tencent://message/?uin=297399654" target="_blank" alt="QQ：" rel="nofollow">jQuery吧的QQ</a><em></em>
</li>
<li id="tudou" class=""><a href="http://www.tudou.com/home/jqueryba/" target="_blank" alt="土豆：" rel="nofollow">jQuery吧的土豆视频</a><em></em>
</li>
<li id="google" class=""><a href="http://www.jqueryba.com/" target="_blank" alt="G+：" rel="nofollow">jQuery吧的GOOGLE+</a><em></em>
</li>
</ul>
</div>
<span class="box_bottom"></span>
</div>
<div class="clear"></div>
<form action="http://jqueryba.com" id="cse-search-box" target="_blank">
<div id="searchl"></div>
<input type="hidden" name="cx" value="partner-pub-8979706488065305:0323724749" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" size="55" id="searchbox" value="搜索您的关键词..." border="none" />
<input type="submit" name="sa" value="搜索" id="searchsub"/>
<div id="searchr"></div>
<div id="relate">
<span id="gsthot">热门查询: </span><span ><a id="sclose" href="#" style="float:right" >[关闭]</a></span>
<div id="gword"><!--原来放广告js的-->
</div>
<ul id="cloud">
<a href='http://www.jqueryba.com/tag/animate' class='tag-link-112' title='2 个话题' style='font-size: 10pt;'>animate</a>
<a href='http://www.jqueryba.com/tag/apply' class='tag-link-124' title='2 个话题' style='font-size: 10pt;'>apply</a>
<a href='http://www.jqueryba.com/tag/css-sprite%e4%bc%98%e5%8a%bf' class='tag-link-51' title='1 个话题' style='font-size: 10pt;'>css sprite优势</a>
<a href='http://www.jqueryba.com/tag/css%e6%b5%8f%e8%a7%88%e5%99%a8%e5%85%bc%e5%ae%b9' class='tag-link-58' title='2 个话题' style='font-size: 10pt;'>css浏览器兼容</a>
<a href='http://www.jqueryba.com/tag/ie' class='tag-link-33' title='2 个话题' style='font-size: 10pt;'>ie</a>
<a href='http://www.jqueryba.com/tag/ie6' class='tag-link-55' title='2 个话题' style='font-size: 10pt;'>IE6</a>
<a href='http://www.jqueryba.com/tag/javascript' class='tag-link-22' title='2 个话题' style='font-size: 10pt;'>javascript</a>
<a href='http://www.jqueryba.com/tag/jquery' class='tag-link-4' title='3 个话题' style='font-size: 10pt;'>jquery</a>
<a href='http://www.jqueryba.com/tag/jquery%e5%8d%9a%e5%ae%a2' class='tag-link-83' title='2 个话题' style='font-size: 10pt;'>jquery博客</a>
<a href='http://www.jqueryba.com/tag/jquery%e6%95%88%e6%9e%9c' class='tag-link-113' title='4 个话题' style='font-size: 10pt;'>jquery效果</a>
<a href='http://www.jqueryba.com/tag/jquery%e8%87%aa%e5%8a%a8%e5%88%87%e6%8d%a2' class='tag-link-21' title='2 个话题' style='font-size: 10pt;'>jquery自动切换</a>
<a href='http://www.jqueryba.com/tag/php' class='tag-link-130' title='2 个话题' style='font-size: 10pt;'>PHP</a>
<a href='http://www.jqueryba.com/tag/shopex' class='tag-link-159' title='2 个话题' style='font-size: 10pt;'>shopex</a>
<a href='http://www.jqueryba.com/tag/table%e5%88%87%e6%8d%a2%e5%9b%be' class='tag-link-29' title='2 个话题' style='font-size: 10pt;'>table切换图</a>
<a href='http://www.jqueryba.com/tag/table%e9%80%89%e9%a1%b9%e5%8d%a1' class='tag-link-23' title='2 个话题' style='font-size: 10pt;'>table选项卡</a>
<a href='http://www.jqueryba.com/tag/web%e5%89%8d%e7%ab%af' class='tag-link-19' title='2 个话题' style='font-size: 10pt;'>web前端</a>
<a href='http://www.jqueryba.com/tag/web%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91' class='tag-link-129' title='2 个话题' style='font-size: 10pt;'>WEB前端开发</a>
<a href='http://www.jqueryba.com/tag/wordpress' class='tag-link-100' title='2 个话题' style='font-size: 10pt;'>wordpress</a>
<a href='http://www.jqueryba.com/tag/%e5%9b%be%e7%89%87%e9%80%89%e6%8b%a9' class='tag-link-13' title='1 个话题' style='font-size: 10pt;'>图片选择</a>
<a href='http://www.jqueryba.com/tag/%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1' class='tag-link-12' title='1 个话题' style='font-size: 10pt;'>网页设计</a></ul>
<input type="text" name="q" id="orgsearchbox" />
</div>
</form>
<div class="clear"></div>
<div id="news">
<h3>新鲜报道</h3>
<ul class="news_list">
<li>
<div class="news_l"></div>
<div class="info">
<img src="http://www.jqueryba.com/wp-content/themes/jQueryba/images/bg.png" />
<h4><a target="_blank" title="jquery实现图片显示上下左右翻滚" href="http://www.jqueryba.com/399.html">jquery实现图片显示上下左右翻滚</a></h4>
<span>起飞时间: 2012-06-01 09:27:54</span>
</div>
<div class="news_r"></div>
</li>
<li>
<div class="news_l"></div>
<div class="info">
<img src="http://www.jqueryba.com/wp-content/themes/jQueryba/images/bg.png" />
<h4><a target="_blank" title="jquery博客实现底部固定类似人人校内似的" href="http://www.jqueryba.com/396.html">jquery博客实现底部固定类似人人校内似的</a></h4>
<span>起飞时间: 2012-05-30 17:49:24</span>
</div>
<div class="news_r"></div>
</li>
<li>
<div class="news_l"></div>
<div class="info">
<img src="http://www.jqueryba.com/wp-content/themes/jQueryba/images/bg.png" />
<h4><a target="_blank" title="shopex后台提示服务器不是apache,无法使用htaccess文件.请手动启用rewrite,否则无法启用伪静态." href="http://www.jqueryba.com/392.html">shopex后台提示服务器不是apache,无法使用htaccess文件.请手动启用rewrite,否则无法启用伪静态.</a></h4>
<span>起飞时间: 2012-05-30 11:28:25</span>
</div>
<div class="news_r"></div>
</li>
<li>
<div class="news_l"></div>
<div class="info">
<img src="http://www.jqueryba.com/wp-content/themes/jQueryba/images/bg.png" />
<h4><a target="_blank" title="jquery博客纯css模拟淘宝详细页面底部固定" href="http://www.jqueryba.com/387.html">jquery博客纯css模拟淘宝详细页面底部固定</a></h4>
<span>起飞时间: 2012-05-29 21:12:34</span>
</div>
<div class="news_r"></div>
</li>
<li>
<div class="news_l"></div>
<div class="info">
<img src="http://www.jqueryba.com/wp-content/themes/jQueryba/images/bg.png" />
<h4><a target="_blank" title="jquery博客仿百度空间相册展示相册效果文字显隐" href="http://www.jqueryba.com/378.html">jquery博客仿百度空间相册展示相册效果文字显隐</a></h4>
<span>起飞时间: 2012-05-26 18:40:33</span>
</div>
<div class="news_r"></div>
</li>
</ul>
<span class="box_bottom"></span>
</div>
<div class="clear"></div>
<div class="sber" style="margin-bottom:50px">
<span class="box_lt"><h3>特约赞助</h3></span><span class="title"></span><span class="box_rt"></span>
<div class="ad"><a href="http://item.taobao.com/item.htm?id=15184563490&" target="_blank" title="天丝四件套 正品 2012家纺 四件套 纯天丝 顶极面料 特价 婚庆" rel="nofollow"><img src="http://www.jqueryba.com/jquery/bedding.jpg" border="0"></a></div>
<span class="box_bottom"></span>
</div>
<div class="clear"></div>
<div class="sber" id="randw">
<span class="box_lt"><h3>绵绵不绝</h3></span><span class="title"></span><span class="box_rt"></span>
<ul class="box_list" id="rand">
<li>
<div class="num">1</div>
<div class="info">
<h4><a target="_blank" title="jquery实现广告伸缩效果" href="http://www.jqueryba.com/265.html">jquery实现广告伸缩效果</a></h4>
<span>已经被外星人调戏了 166 次</span>
</div>
</li>
<li>
<div class="num">2</div>
<div class="info">
<h4><a target="_blank" title="jQuery实现图片震动效果jquery博客右侧广告效果" href="http://www.jqueryba.com/272.html">jQuery实现图片震动效果jquery博客右侧广告效果</a></h4>
<span>已经被外星人调戏了 120 次</span>
</div>
</li>
<li>
<div class="num">3</div>
<div class="info">
<h4><a target="_blank" title="javascript之调用被覆盖的方法" href="http://www.jqueryba.com/316.html">javascript之调用被覆盖的方法</a></h4>
<span>已经被外星人调戏了 105 次</span>
</div>
</li>
<li>
<div class="num">4</div>
<div class="info">
<h4><a target="_blank" title="jquery实现图片显示上下左右翻滚" href="http://www.jqueryba.com/399.html">jquery实现图片显示上下左右翻滚</a></h4>
<span>已经被外星人调戏了 19 次</span>
</div>
</li>
<li>
<div class="num">5</div>
<div class="info">
<h4><a target="_blank" title="CSS文档流与块级元素(block)内联元素(inline)那点事" href="http://www.jqueryba.com/204.html">CSS文档流与块级元素(block)内联元素(inline)那点事</a></h4>
<span>已经被外星人调戏了 2471 次</span>
</div>
</li>
<li>
<div class="num">6</div>
<div class="info">
<h4><a target="_blank" title="jQuery仿淘宝商城天猫鼠标移动过去，透明度降低" href="http://www.jqueryba.com/22.html">jQuery仿淘宝商城天猫鼠标移动过去，透明度降低</a></h4>
<span>已经被外星人调戏了 206 次</span>
</div>
</li>
<li>
<div class="num">7</div>
<div class="info">
<h4><a target="_blank" title="拒绝插件wordpress首页利用代码进行文章字符串截取" href="http://www.jqueryba.com/223.html">拒绝插件wordpress首页利用代码进行文章字符串截取</a></h4>
<span>已经被外星人调戏了 109 次</span>
</div>
</li>
</ul>
<span class="box_bottom"></span>
</div>
<div class="clear"></div>
<div id="link">
<span id="linktop"></span>
<ul id="linkul">
<li><a href="http://www.peiyuanyu.com/" title="裴源雨的博客" target="_blank">裴源雨的博客</a></li>
<li><a href="http://www.w3cfuns.com/" title="前端开发网" target="_blank">前端开发网</a></li>
<li><a href="http://www.niumowang.org/" title="前端开发-牛魔王" target="_blank">前端开发-牛魔王</a></li>
<li><a href="http://gongxinjun.com/" title="鑫发现——关注前端最新资讯" target="_blank">鑫发现</a></li>
<li><a href="http://yundanran.com" title="云淡然(博客)" target="_blank">云淡然(博客)</a></li>
<li><a href="http://www.jsv8.net/" title="web前端开发" target="_blank">web前端开发</a></li>
<li><a href="http://qitiancom.com/" title="web前端|朱宝祥" target="_blank">web前端|朱宝祥</a></li>
<li><a href="http://www.showcoo.net/" title="秀客,ShowCoo,猪也有理想,技术,图片" target="_blank">ShowCoo</a></li>
<li><a href="http://www.coblogs.co/" title="MrCo.Blog" target="_blank">MrCo.Blog</a></li>
<li><a href="http://www.fenghaizi.com/" title="疯孩子博客" target="_blank">疯孩子博客</a></li>
<li><a href="http://www.songwenlei.com/" title="文磊网赚博客" target="_blank">文磊网赚博客</a></li>
<li><a href="http://www.zoneself.org/" title="飞自由php技术博客" target="_blank">php技术博客</a></li>
<li><a href="http://xcodebox.com" title="帝国cms" target="_blank">帝国cms</a></li>
<li><a href="http://www.wopao.org/" title="Thunur" target="_blank">Thunur</a></li>
<li><a href="http://lifesky.taobao.com/" title="寤寐思纺 床上用品 四件套 被套 婚庆 可爱 全棉" target="_blank" rel="nofollow">寤寐思纺</a></li>
<li><a href="http://www.jqueryba.com/312.html" title="申请友情链接" target="_blank">申请友情链接</a></li>
</ul>
<span id="linkbto"></span>
</div>
<div class="clear"></div>
</div><div style=" clear:both"></div>
<!--WP Code Highlight_start-->
<script type="text/javascript">
window.onload = function(){prettyPrint();};
</script>
<script type="text/javascript" src="http://www.jqueryba.com/wp-content/plugins/wp-code-highlight/js/wp-code-highlight.js"></script>
<!--WP Code Highlight_end-->
<div style="clear:both"></div>
</div><!-- #main -->
<div id="footer" role="contentinfo">
<div id="colophon">
Copyright ©<a href="http://www.jqueryba.com/" title="jquery博客,jquery学习,jquery制作,jquery学习制作,jquery效果,前端开发,web前端,web前端开发,前端开发工程师,前端开发攻城师,设计,前端资源,html+CSS,JavaScript,Ajax,jQuery学习,html5,css3,浏览器兼容,网页布局制作">jquery博客</a>,All Rights Reserved.Theme by<a href="http://www.jqueryba.com/">天外飞仙</a>.查询了37次 共花了0.401秒 0.79 seconds
</div>
<span style="display:none"><script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fb7679a05ae7af02a48583ca79a7c992c' type='text/javascript'%3E%3C/script%3E"));
</script>
</span><!-- #colophon -->
</div><!-- #footer -->
</div><!-- #wrapper -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1" type="text/javascript" charset="utf-8"></script>
<script src="http://www.jqueryba.com/wp-content/themes/jQueryba/footer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://www.google.com.hk/coop/cse/brand?form=cse-search-box&lang=zh-Hans"></script>
<script type="text/javascript" src="http://www.google.com/cse/query_renderer.js"></script>
</body>
</html>
在线效果DEMO
分享到：
发表评论
相关推荐
Jquery实现div左右上下收缩，文档中包含上下收缩，左右收缩
鼠标移动到文字上后，背景图片呈现上下翻滚样式，类似flash导航效果
Jquery实现无缝隙上下左右滚动，超简便代码 值得一看的代码
里面有两个文件，jquery-1.4.2.min.js另外一个是xialalrtb.html这两个文件，打开xialalrtb.html就可以成功运行
jquery实现图片上下抖动
它可以判断外部div以及内部div的宽度高度，从而实现上下左右居中的目的，兼容主要浏览器 使用方法简单： 1、确保head中引入jquery库以及本例的css样式 2、将代码部分拷贝到你需要的地方 3、在代码...
jquery图像幻灯片上下滑动图片切换
插件描述：jQuery鼠标悬停上下翻滚动画导航菜单。 参考示例：http://www.jq22.com/jquery-info5332
jquery实现图片左右连续滚动
jquery实现图片左右来回循环飘动，适合用在一些适宜作为左右来回飘动的图片，比如在网页顶部做一个飘动的云彩，一个左右来回飘动的气球等
有时候客户要求项目需要像手机操作一样，可以用div+css+jquery实现类似于android/iphone的效果来展示客户体验。个人共享给大家，希望能够帮助到你.绝对没有错，谢谢！
jquery实现的左右选择，样式美观 使用方便 可以直接拿来用 有说明
Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮 ...Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮
用jQuery实现的上下滚动公告栏。主要用jQuery中的animate()方法和setInterval()实现的，代码简单使用。
jquery实现用户信息左右选择特效 改进了多选列表的选择非（select多选框左右移动）， 能添加的信息更多，操作也更多，容易移植和更改。 打包文件包含了jquery1.8
Jquery实现评论内容上下滑动切换效果实例源码，供大家一起参考学习。
jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效
jquery实现上下翻转的网格图片导航效果
正所谓“优秀的代码亦收藏不易找”啊，上下翻滚的图片文字特效，整屏整屏的翻滚，很齐全的图片翻滚特效，懒人之家推荐下载收藏！
jQuery实现图片左右滚动 jQuery实现图片左右滚动 jQuery实现图片左右滚动