利用jquery实现图片显隐特效
大家可以先看看 我博客 的效果，当鼠标悬停到图片上时，图片变得透明，效果很炫是不是。如何实现这一特效呢？当然要用到如日中天、功能强大的jquery，很多wordpress主题中都有加载jquery来实现一些特效，比如滑动菜单、图片幻灯等。下面就教大家如何把这一特效加入到你的wordpress主题中。
首先需要在header.php中加载jquery，可以使用外链也可以内链。
外链可以利用google为我们提供的JS库，据说可以提高js加载速度，格式如下：
- <script type=“text/javascript” src=“http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js”></script>
内链格式为：
- <script type=“text/javascript” src=“<?php bloginfo(‘stylesheet_directory’); ?>/js/jquery.min.js” ></script>
然后再在header.php中添加：
- <script type=“text/javascript”>
- $(function () {
- $(‘img’).hover(
- function() {$(this).fadeTo(“fast”, 0.5);},
- function() {$(this).fadeTo(“fast”, 1);
- });
- });
- </script>
保存后，刷新一下页面看看效果如何。上面的代码是使页面中所有的图片都具有显隐特效，你也可以在上面的代码中添加选择器，让特定Div容器中的图片具有显隐特效，修改(‘img’)为例如(‘.thumbnail img,.entry img’)。
上面的特效是鼠标悬停到图片上时，图片变得透明，我目前用的主题采用的就是上面代码，还有一种是鼠标悬停到图片上时，图片变得清晰，我制作的HotNews pro2.1主题随机日志缩略图采用是这种效果，代码如下：
- <script type=“text/javascript”>
- $(function() {
- $(‘img’).animate({“opacity”: .5 });
- $(‘img’).hover(function() {
- $(this).stop().animate({ “opacity”: 1 });
- }, function() {
- $(this).stop().animate({ “opacity”: .5 });
- });
- });
- </script>
代码修改方法同上，采用哪种图片显隐特效就看你喜好了，这一特效支持所有浏览器。
代码下载
使用热点新闻2.1主题的朋友可以直接下载替换文件就可以了。
点此下载替换文件
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
相关文章
写给所有做网站的朋友的一封信
现在就开始执行“1+N”互联网推广和没有开始执行的人，一两天看不出任何区别； 一两个月看来差异也是微乎其微的；但在2-5年的长远时间来看的时候，你的高质量询盘不断增加，你的互联网资产已经建立完成，对手已经很难匹敌，现在你看到这段文字的时候就是最好的开始，现在就是最好的时候，马上开始“1+N”体系的整体互联网推广吧，我们和你一起，开创互联网大未来！
18324743309
点击咨询
