大家可以先看看 我博客 的效果,当鼠标悬停到图片上时,图片变得透明,效果很炫是不是。如何实现这一特效呢?当然要用到如日中天、功能强大的jquery,很多WordPress主题中都有加载jquery来实现一些特效,比如滑动菜单、图片幻灯等。下面就教大家如何把这一特效加入到你的WordPress主题中。
首先需要在header.php中加载jquery,可以使用外链也可以内链。
外链可以利用google为我们提供的JS库,据说可以提高js加载速度,格式如下:
- <script type= src=></script>
内链格式为:
- <script type= src= ></script>
然后再在header.php中添加:
- <script type=>
- $(function () {
- $(\’img\’).hover(
- function() {$().fadeTo(, );},
- function() {$().fadeTo(, );
- });
- });
- </script>
保存后,刷新一下页面看看效果如何。上面的代码是使页面中所有的图片都具有显隐特效,你也可以在上面的代码中添加选择器,让特定Div容器中的图片具有显隐特效,修改(\’img\’)为例如(\’.thumbnail img,.entry img\’)。
上面的特效是鼠标悬停到图片上时,图片变得透明,我目前用的主题采用的就是上面代码,还有一种是鼠标悬停到图片上时,图片变得清晰,我制作的HotNews pro2.1主题随机日志缩略图采用是这种效果,代码如下:
- <script type=>
- $(function() {
- $(\’img\’).animate({: . });
- $(\’img\’).hover(function() {
- $().stop().animate({ : });
- }, function() {
- $().stop().animate({ : . });
- });
- });
- </script>
代码修改方法同上,采用哪种图片显隐特效就看你喜好了,这一特效支持所有浏览器。
代码下载
使用热点新闻2.1主题的朋友可以直接下载替换文件就可以了。
点此下载替换文件
暂无评论内容