今天又挖到一个 JQuery 特效,迫不及待用到 WordPress 上了,是一个利用 JQuery 实现图片显隐的特效,效果可以见我的评论头像,把鼠标移动上去试试看~可以看到头像会渐隐吧,在 IE、Firefox、Chrome 等各大浏览器下都是兼容的,这就是 JQuery 的魅力。
方法转自:http://www.skyoy.com/jquery-picture-hidden-effects.html
第一步:在 header.php 中加载 jquery,可以使用外链也可以内链。
外链可利用 google 提供的 JQ 库,调用格式为:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script>
内链空间 jquery,把 jquery.min.js 上传到风格的 js 目录下,调用格式为:
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js" ></script>
第二步:在 header.php 中,添加到 </head> 前,插入代码为:
<script type="text/javascript">
$(function () {
$('img').hover(
function() {$(this).fadeTo("fast", 0.5);},
function() {$(this).fadeTo("fast", 1);
});
});
</script>
$(function () {
$('img').hover(
function() {$(this).fadeTo("fast", 0.5);},
function() {$(this).fadeTo("fast", 1);
});
});
</script>
看到这个效果的时候我第一时间想到了用 CSS 实现,因为通过 hover 伪类也可以实现鼠标移动上图片上显隐的效果,不过唯一区别就是,JQuery 实现的显隐有渐变的过渡效果,虽然区别很微弱,不过细节绝定成败,这个 JQuery 也很小巧,何乐而不为呢?
-
jQuery/JavaScript 实现的异步加载图片2011年04月10日 -
JQuery 鼠标提示特效之 Sweet Titles2010年03月14日 -
JQuery 实现动感导航菜单2010年02月25日 -
JQuery 循环滚动展示 Twitter 公告2010年02月22日
可是你用了评论啦,这个效果就不见了,于是乎,你又把它放在了自己的脑袋上,呵呵。
学习了
Pingback: 装好WP后做的一些事 | LiChao's blog
Pingback: jQuery 控制字体大小切换 | 中文IT博客聚合
?没发现啊~
看起来不错~
Pingback: WordPress 主題製作學習筆記:幫你的主題加上 jQuery 特效「圖片顯隱+平滑滾動」功能
正在找这个,哈哈。网上的JS图片隐现效果都不兼容火狐。
JQ很强大,我也常用呢
恩啊,我还想用更多的JQ,就怕影响速度
这个把所有图片都添加了效果了。
恩啊,看了一下,MS你对JQ很有研究啊
倒是很喜欢评论的图片不是方形显示,这个有教程?
看看这篇吧:http://www.happyet.org/383.html
怎么没有看到效果啊。我都将鼠标静止到头像上了。
看着大家都在折腾...惭愧啊~
快快折腾起来吧,哈哈
通过万戈认证的广告可以放心使用
老万,这楼太高,我有恐高症!!呵呵
这里只是一般般高啦,越高越好
来晚喽
8错8错,周一待试。。。
一不小心来晚了,没见到;已经摸了好几个同学的头了,哈哈。
上戈哥这边观光,顺便学习,啊蛤蛤
那个对于我来说有点浪费了,呵呵
如果像我一样用上了10个jquery特效,就不浪费了,呵呵
很久没折腾wordpress了
不要放弃折腾WP,多好玩呀
当我把小老鼠放你的头像上,发现你已经取消掉了
恩,有好多童鞋说不好看
我怎么没看到效果哦……
反应不好,我已经去掉这个效果了
没隐啊 看来取消了啊~
恩,众访客都说不好,所以去掉了
这边测试好像没有
刷新缓存试试
我在chromeplus 下隐不了,切换到IE模式就能隐了
强制刷新后试试
为啥看不到有隐的???
被浏览器缓存了吧
使用了,不知道会不会减慢加载的速度。本来博客流量就不大,如果还因为速度损失了访客,就杯具了!
基本上不影响速度,因为JS执行代码只需一行
嗯,效果不错,侧边栏广告的JQ效果也不错
哈,谢谢~我还将使用更多的JQ
ff下没隐啊
隐了,隐了!!
我这边咋一点儿效果都看不出来啊
我现在也没有看到了,现在用的是chrome。
我用了这个效果,你可以到我的博客里看看。
我刚传了一些北屯美景,去我博客看
因为我已经把这个效果去掉了
感觉用在评论头像有点浪费
恩,正打算取消掉
现在就看到末有效果了。。
已经被我去掉啦
我觉得吧 还是直接上效果图吧 这样会更具有吸引力!
我用鼠标把参加评论的每个人头都摸了下~
怎么会没用呢,有时候小细节能给用户很专业的感觉,就会信任网站
好眼力,有见解,顶!
貌似没有什么实质性的作用...
jquery特效一般都没有实质性的作用,只为好看
很能折腾啊。呵呵。
折腾WP是我的一大爱好
我也觉得你老兄很爱折腾。不过这这些小东西加起来,也许可以成就大程序呢……效果加多了,会不会产生速度呀,执行效率呀之类的影响?
我用到的都是最简单的JQ特效,而且我都放在了页底,基本不影响速度,你看我的网站速度还行吗?
偶不能不承认,兄弟是个最能折腾的家伙。
鉴定完毕。呵呵~~
我也不得不承认,我确实爱折腾,哈哈
不错,学习了一下
每个人的看法都不一样,有的说不好看呢。。。
给装上去。。 现在jq最新版本是1.4.2
JQ1.4太巨大了,我一般喜欢用1.2
确实很不错啊,影响速度吗?
速度基本不影响,因为只用了一行JS执行代码
我还是觉得滑过的时候颜色加深会好一点
主意不错,回头试试去
这个感觉还不错,可以借鉴
谢谢,大多数人都说不好看,我还准备撤了呢。。。
偶想说学习学习。呵呵
最最简单的JQ应用,很好学哒
Good,这个效果,我喜欢,加上了~很好。
嘿嘿,谢谢啊,要不你也试试?
渐隐的速度再慢点效果更好
我在本地上试试去
这个效果只适合做技术研究用,实际效果并不能让人感觉良好,可能还影响浏览速度,其实hover也不错,就是支持的浏览器少了点,渐变效果也没有。
你是第五个说不好的了,决定撤掉这个效果
做技术研究之用还是不错的啦~
为了看效果我特意把鼠标移到头像上……
你可真喜欢折腾
那是,我是折腾帝,哈哈
这个效果的实际应用意义我觉得不是特别高:)呵呵
嘿嘿,这个蛮有意思的呐,研究一下 ~
不过那个房地产开发排行榜头像的浮动效果不好,显得太挤了
房地产开发排行榜。。。。晚上去掉浮动~
已经去掉啦
渐隐也没了?无所谓啦,反正都已经摸遍了
渐隐普遍反响不好,就去掉了
很妩媚的jquery库感
jquery特效太帅了,我已经用了10+jquery
其实蛮好玩的说……觉得不好的都是赤果果的嫉妒!
感觉我要被骂惨了……
这个效果不错,我也有个蛮好的效果,那天实践一下
你实践,我来转载
唔。。我发现我到盖楼排行里去叻。。。于是。。。继续ctrl+enter 。。。
你已经进第一排了
好吧,我低调点...
就快进前三了
不错,就是觉得有点晃眼咧..
有人强烈不喜欢的说
晃眼啦,可以考虑扯掉~~
好吧,你是第四个。。。
不错的说,呵呵,你可真能折腾啊
玩WP就是为了折腾
好吧好吧,又一个效果
MS有些多余,反响并不好
那..好吧...我作为第三个..这个效果确实不大讨人喜欢...
。。。。。。。还差两个
这个效果不是很喜欢
你已经是第二个说不喜欢的了,超过五个我就去掉它
这个效果我觉得反而不是太好,会让图片故意变得不清晰。。。。
我也觉得像这些加在底部最好。。。。其实我的博客的jQuery全都在页面底部。。
我也是加在底部的,不过是转来的,懒的最改原方了
必须先加载jQuery库再加载jQuery代码,而且推荐加在页面底部
恩,我就是加载在底部哒,哈哈,最最底部
我也去修改下先,也搞到页面底部去。