大家可以先看看 我博客 的效果,当鼠标悬停到图片上时,图片变得透明,效果很炫是不是。如何实现这一特效呢?当然要用到如日中天、功能强大的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主题的朋友可以直接下载替换文件就可以了。
本站文章大部分为原创,用于个人学习记录,可能对您有所帮助,仅供参考!
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
北京市海淀区 1F
试试去…
上海市徐汇区 2F
我是看了,也想这么做。
但我不隐瞒,我一点也看不懂。
干瞪眼,羡慕!
中国 B1
@ 朱芳文 这个没任何难度啊,只要把第一段和第三段代码粘贴到header.php文件《/head》标签前就可以了
中国 B1
@ 朱芳文 你在用热点新闻主题,就更简单了,只把第三段加到header.php中就要可以了
贵州省贵阳市 3F
我照做了,但没效果,怎么回事?
中国 B1
@ xia 嗯,文中代码标点,需要换成英文标点,我已作了热点新闻2.1的替换文件,可以到主题发布页下载替换
广东省深圳市南山区 4F
谢谢,已经使用了。很拉风。
广西桂林市 5F
Featured Content Gallery是不是不能和这个同时使用??谢谢!
四川省凉山州冕宁县 6F
我照做了也没效果,很奇怪。。。
辽宁省沈阳市 B1
@ 流氓徒 如果代码无误,就是与主题调用的其它JS代码冲突
四川省遂宁市 7F
请问你的这些圆角边框如何实现?为什么发布出来的2.2版本不一样呢?
江苏省常州市 8F
好东东~~~
浙江省台州市 9F
在我的主题下无论如何不会成功,不知道是不是和我的图片灯箱有关
台湾省台北市 10F
请问你现在这个主题上面的图片只要把鼠标放上去标题就跟上一个动画区块显示出来是怎么实现的?看上了这个特效,谢谢
广东省云浮市 11F
额、这个要学习下、!
宁夏银川市 12F
如鸟哥所写的,我的站已经加上了..但是打开首页之后 有些浏览器看不到原本more标签之前的图片…进入一篇文章然后切换到主页才能显示..请问这是什么原因哦?
宁夏银川市 B1
@ Ps7isy 还有鸟哥 我加上之后我站的表情还有侧边栏评论者头像啊神马的也成这样了,,,是不是需要选择特定的div呢?代码该怎么修改
中国 B2
@ Ps7isy 貌似文章中写的已很明白
宁夏银川市 B3
@ 知更鸟 @知更鸟 : 只能说 – – 在我这个不懂php的人用来,还是第一个比较方便.多谢鸟哥
北京市 13F
嗯 试过了 不错 可是 我留言上图像也是显隐效果的呢。
北京市 B1
@ 这个男人不坏 嘿嘿 好了 我把js代码img前加了一个类。留言板里就好了
中国 B2
@ 这个男人不坏 是的,可以加选择
江苏省苏州市常熟市 14F
个
湖北省武汉市 15F
鸟哥,我来了,学习中,我发现知更鸟的主题不支持很多代码呢,国内的广告代码基本不能直接放在对应方框显示出来,需要设置js调用!求解释!
陕西省西安市 16F
搞定了 是个好东西啊~~为什么我安装了调用谷歌那个库的插件 还是要使用第一段代码啊 按理来说插件会自动调用的
上海市 17F
我用了这个特效,经过测试PNG图片在IE8上会变得很难看,不知道你是怎么解决的,谢谢解答。(初步观察你是过滤掉了PNG,想问下怎么实现的)
北京市 B1
@ 轩 找了好几个插件,,顶一个
广东省广州市 18F
博主,不知到为什么我不能实现和你一样的效果,首先序号都在竖条的后面,然后代码会偶尔空一行,留言中的切换到可视化再发表已经用过。请博主指教。
浙江省杭州市 19F
你好,使用了这个效果感觉不如您的网站这个效果好看,不知能否透露下代码,谢谢~~
来自外部的引用