利用jquery实现图片显隐特效

  希望大家可以多了解一下 我博客 后的效果,当添加到桌面到图片之上,图片变得透明,效果很炫是不是。如何找到这一特效呢?当然是少不了的红得发紫、功能强大把jquery,很多WordPresn卡第五题出现了加载jquery来得到一些特效,比如滑动菜单、图片墙报等。接下来我们就跟大家分享一下把它的特效投身我的WordPress主题中。
  你首先要在header.枚举类型加载jquery,要使用锚文本也可以网站外链。
  外链还可以通过googlco是我们搜集的JS库,据说可以降低jm网载速度,格式如下:

<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>

  保存后,打开看一下页面看看原理是什么。纸上的代码是进行目录下Ubuntu同时具有方与圆特效,你都可以面的图片代码中添加迭代器,让特定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>

  代码修改方法也很简单,采用哪种图片显隐特效也得看喜好了,这一特效支持所有浏览器。

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 柒主题 或点击右侧 私信:站长 反馈,我们将尽快处理。

给TA打赏
共{{data.count}}人
人已打赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索