jQuery实现WordPress读者墙、排行榜图片放大效果
发布:smiling 来源: PHP粉丝网 添加日期:2014-03-18 13:47:36 浏览: 评论:0
因为图片很小,很难看清别人头像显示的是什么,如果有个鼠标移动图片上面,图片放大,是不是很炫?看看我写的DEMO吧,jQuery能很容易的写出这个效果.
HTML和CSS代码我就不解释了,只把jQuery代码做个解释,代码如下:
- $(function(){
- $(".head img").hover(function(){
- $(this).stop(true)//防止鼠标移动过快导致多图放大
- .parents("li").addClass("zin").end()//找到img的祖先元素,加上"zin"这个类
- .animate({left:-20,top:-20,width:80,height:80},200);//执行图片放大动作,200是图片放大速度
- },function(){
- $(this).stop(true)
- .parents("li").removeClass("zin")
- .end().animate({left:0,top:0,width:40,height:40},200);
- });
- });
animate这个动作是我最先写出来的,因为很简单,而.stop(true)是为了鼠标快速移动图片后,图片连续放大,加了这个后,你把鼠标在头像上面快速的晃动,头像都不会变大的,只有鼠标停住最后一张图片才会放大,而最关键的是中间的加z-index属性,因为图片放大,会被旁边的图片遮住,所以肯定要调整z-index的数值,让当前的图片显示在最上面,我之前一直都往img上面加z-index,后来CSS群里的朋友说应该是往li上加,还帮加了这样一段代码,真是太感谢了!
提醒一句,最外面的div(我这里是head)不能加overflow:hidden,不然图片放大都被外面的层遮住了,所以我定义了.head{height:110px;}固定高度,反正这个div一般都是固定内容,所以固定高度是没有问题的
完全实例代码:
- <!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>jQuery实现WordPress读者墙、排行榜图片放大效果</title>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
- <style type="text/css">
- div,img,ul,li{margin:0; padding:0;}
- img{border:0; vertical-align:top;}
- ul,li{list-style:none;}
- .head{width:260px; height:110px; background:#eee; margin:30px 0 0 50px;}
- .head img{width:40px; height:40px; position:absolute;}
- .head li{float:left; display:inline; width:40px; height:40px; position:relative; margin:10px 0 0 10px;}
- .zin{z-index:999;}
- </style>
- <script type="text/javascript">
- $(function(){
- $(".head img").hover(function(){
- $(this).stop(true).parents("li").addClass("zin").end().animate({left:-20,top:-20,width:80,height:80},200);
- },function(){
- $(this).stop(true).parents("li").removeClass("zin").end().animate({left:0,top:0,width:40,height:40},200);
- });
- });
- </script>
- </head>
- <body>
- <div class="head">
- <ul>
- <li><a href="#"><img src="/f54f7e8880a77d9be41f85c973d4b7d0?s=80&d=&r=G" /></a></li>
- <li><a href="#"><img src="/fc3a22c058a3522f537fc14b7d5efbd2?s=80&d=&r=G" /></a></li>
- <li><a href="#"><img src="/2a72dea50051d8d74174edfeb3a1bc48?s=80&d=&r=G" /></a></li>
- <li><a href="#"><img src="/1ab32ab973c831bcee66ea906131e9f9?s=80&d=&r=G" /></a></li>
- <li><a href="#"><img src="/d45ac8a503b026458ee3b7678591acc6?s=80&d=&r=G" /></a></li>
- <li><a href="#"><img src="/3466e178f178d151c1cd8ad59b489e2b?s=80&d=&r=G" /></a></li>
- <li><a href="#"><img src="/0aafdfc08a51e5b518a43136a8aebf01?s=80&d=&r=G" /></a></li>
- <li><a href="#"><img src="/d5aa9bea3ff3966be2739aa7e1861471?s=80&d=&r=G" /></a></li>
- <li><a href="#"><img src="/07af1897f14014c388ec1a3a211e4663?s=80&d=&r=G" /></a></li>
- <li><a href="#"><img src="/465d00391a0bd1c066aac037df4bf5d1?s=80&d=&r=G" /></a></li>
- </ul>
- </div>
- </body>
- </html>
Tags: jQuery WordPress 读者墙 图片放大
相关文章
- ·WordPress 调用 jQuery一些方法小结(2014-03-22)
- ·WordPress屏蔽主题或者插件加载的jQuery文件(2015-10-15)
- ·WordPress初级教程1:什么是博客?(2013-11-11)
- ·WordPress初级教程-2: 什么是WordPress?(2013-11-11)
- ·WordPress初级教程-3: WordPress的功能和特点(2013-11-11)
- ·WordPress初级教程-4: 选择WordPress博客的主机和域名(2013-11-11)
- ·WordPress初级教程-5: 安装WordPress(2013-11-11)
- ·WordPress初级教程-6: 本地安装WordPress(2013-11-11)
- ·WordPress初级教程-7: 一个数据库中安装多个WordPress博客(2013-11-11)
- ·WordPress初级教程-8: WordPress控制面板/ Dashboard(2013-11-11)
- ·WordPress初级教程-9: WordPress用户设置/ Users(2013-11-11)
- ·WordPress初级教程-10: WordPress博客配置/ Settings(2013-11-11)
- ·关于wordpress上传图片不显示的原因(2013-11-11)
- ·WordPress程序的脆弱点你知道吗 (2013-11-11)
- ·总结八大Wordpress网站百度收录实现秒收的方法绝招 (2013-11-11)
- ·WordPress如何网站投稿者也可以上传图片(2014-03-18)
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)