利用jquery实现图片显隐特效

发布时间:2020-05-05

大家可以先看看 我博客 的效果,当鼠标悬停到图片上时,图片变得透明,效果很炫是不是。如何实现这一特效呢?当然要用到如日中天、功能强大的jquery,很多wordpress主题中都有加载jquery来实现一些特效,比如滑动菜单、图片幻灯等。下面就教大家如何把这一特效加入到你的wordpress主题中。

首先需要在header.php中加载jquery,可以使用外链也可以内链。

外链可以利用google为我们提供的JS库,据说可以提高js加载速度,格式如下:

  1. <script type=“text/javascript” src=“http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js”></script>

内链格式为:

  1. <script type=“text/javascript” src=“<?php bloginfo(‘stylesheet_directory’); ?>/js/jquery.min.js” ></script>

然后再在header.php中添加:

  1. <script type=“text/javascript”>
  2. $(function () {
  3. $(‘img’).hover(
  4. function() {$(this).fadeTo(“fast”0.5);},
  5. function() {$(this).fadeTo(“fast”1);
  6. });
  7. });
  8. </script>

保存后,刷新一下页面看看效果如何。上面的代码是使页面中所有的图片都具有显隐特效,你也可以在上面的代码中添加选择器,让特定Div容器中的图片具有显隐特效,修改(‘img’)为例如(‘.thumbnail img,.entry img’)。

上面的特效是鼠标悬停到图片上时,图片变得透明,我目前用的主题采用的就是上面代码,还有一种是鼠标悬停到图片上时,图片变得清晰,我制作的HotNews pro2.1主题随机日志缩略图采用是这种效果,代码如下:

  1. <script type=“text/javascript”>
  2. $(function() {
  3. $(‘img’).animate({“opacity”: .5 });
  4. $(‘img’).hover(function() {
  5. $(this).stop().animate({ “opacity”1 });
  6. }, function() {
  7. $(this).stop().animate({ “opacity”: .5 });
  8. });
  9. });
  10. </script>

代码修改方法同上,采用哪种图片显隐特效就看你喜好了,这一特效支持所有浏览器。
代码下载

 

利用jquery实现图片显隐特效

使用热点新闻2.1主题的朋友可以直接下载替换文件就可以了

点此下载替换文件

 

利用jquery实现图片显隐特效

大熊wordpress凭借多年的wordpress企业主题制作经验,坚持以“为用户而生的wordpress主题”为宗旨,累计为2000多家客户提供品质wordpress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。大熊wordpress能坚持多年,是因为我们一直诚信。我们明码标价(wordpress做网站需要多少钱),从不忽悠任何客户,我们的报价宗旨:“拒绝暴利,只保留合理的利润”。如果您有网站建设、网站改版、网站维护等方面的需求,请立即咨询右侧在线客服或拨打咨询热线:18324743309,我们会详细为你一一解答你心中的疑难。

相关文章

写给所有做网站的朋友的一封信

写给所有做网站的朋友的一封信

现在就开始执行“1+N”互联网推广和没有开始执行的人,一两天看不出任何区别; 一两个月看来差异也是微乎其微的;但在2-5年的长远时间来看的时候,你的高质量询盘不断增加,你的互联网资产已经建立完成,对手已经很难匹敌,现在你看到这段文字的时候就是最好的开始,现在就是最好的时候,马上开始“1+N”体系的整体互联网推广吧,我们和你一起,开创互联网大未来!

点击查看详情

准备开启WordPress网站建设推广?

我们相信高端漂亮的网站不应该是昂贵的,这就是wordpress对每个人都是免费的原因
wordpress建站免费入门,并提供价格合理的wordpress建站套餐。