• 本站已部分支持 HTTPS,欢迎尝试。
    • 作者:SuperPaxxs扶摇直上九万里,绝云气,负青天,不知图哪了,正在努力搜索中...
    • 请使用 Chrome、Firefox 等现代浏览器浏览本站。有事 点击这里 联系博主
    • 想在魔帆博客投稿? 点击这里 联系博主
    • [ 既然来了就多看两篇文章嘛,你好意思走么? ]
    • 如果您觉得本站非常有看点,那么赶紧使用 Ctrl + D 收藏魔帆博客吧

利用Jquery实现图片显隐特效-wordpress教程

技术教程 Super Paxxs 7455次浏览 已收录 0个评论
目录
[隐藏]

Jquery的强大相信使用wordpress主题的各位都非常清楚,很多WordPress主题中都有加载jquery来实现一些特效,比如滑动菜单、图片幻灯等,只有你想不到,没有J做不到的。。

图片特效

header.php文件修改:

加载jquery,可以使用外链也可以内链。
外链可以利用google为我们提供的JS库,据说可以提高js加载速度。

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

内链方式:[上传jquery.min.js至 你主题目录/js]

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

另一种是鼠标悬停到图片上时,图片变得清晰~:

<script type="text/javascript">
$(function() {
$('img').animate({"opacity": .5 });
$('img').hover(function() {
$(this).stop().animate({ "opacity": 1 });
}, function() {
$(this).stop().animate({ "opacity": .5 });
});
});
</script>

魔帆博客 , 版权所有丨如未注明 , 均为原创丨本网站均采用BY-NC-SA协议进行授权 , 转载请注明利用Jquery实现图片显隐特效-wordpress教程
喜欢 (9)
[]
分享 (0)
Super Paxxs
关于作者:
一只初中狗,对网站建设和编程非常感兴趣。
发表我的评论
取消评论

表情 加粗 删除线 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址