猫灿先生博客,简约即美
« 上一篇: 下一篇: »

jQuery应用效果总结笔记

猫灿先生  |  2010 年 05 月 23 日  |  位置: »

jQuery标题特效

前一段时间受到一些博主的启发,了解到通过jQuery实现的一些华丽效果,逐渐产生兴趣同时开始在Bamboo Talk!上进行试验。对于jQuery可以理解为JavaScript的进阶,通过引入强大的库从而实现更多效果~jQuery的开发已经经历了很长的时间,技术上很成熟,有专门的官方网站和维护团队。目前主流的浏览器对其效果支持都还不错,尤其是Firefox和Chrome最好,设计巧妙的jQuery站点着实看着舒服。

本文作为Bamboo Talk!应用jQuery的阶段总结,会简单介绍已经测试通过的效果~列出相应的code方便大家进行参考,对待这些code我们的态度是实用至上,不用解释每条语句的含义~~还没用过jQuery又喜欢折腾的博主不妨试试看 /aa/

引入jQuery库文件

jquery

jquery

上文说过了,首先需要加载这个js文件才能实现接下来的效果。目前官方推出的最新版本是1.4.2,不过引入1.3版本就可以胜任常用效果,这样可以节约20k左右,加快加载。

引入方式:

google的服务器存放着jQuery库的正式版本,提供给广大站长进行引用~尽管google搬到香港后主站搜索时而受到影响,但是这个站一直运行很好,一般不必担心加载不到~使用外部引用同时可以分担网站流量,建议采用这个方法。打开主题文件夹里的header.php,在<head>标签内添加以下语句:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js”></script>

注意script应放在<?php wp_head(); ?>之前

当然如果你觉得你的服务器比google还要稳定,那就自行前往官网下载这个库文件放在自己的空间里,将上面的src改成对应的路径即可~~

标题平移特效

当鼠标悬浮在标题上时标题会整体很自然地向右滑动一小段距离,可以打开Bamboo Talk!的首页查看这个效果。$(‘.entryHeader .alignLeft a’)表示你的文章标题的CSS标签,需要查看网页源文件找到你的标题对应标签进行替换,注意引号不能忽略;8px代表右移的距离,也可根据情况调整。

Fancybox

fancybox

fancybox

如果你知道lightbox你就知道这个的作用了,本站的图片浏览都加入这个功能,当点击图片时图片会悬浮突出同时网页背景变暗,非常漂亮(可以点击本文开始图片查看效果)~~fancybox是已经开发好的一套插件,适用多种技术类型网站。由于功能强大使其设置也很复杂,这里给出官方网站地址附有整套下载和详细的教程,如果你对此感兴趣决定使用可以在本文留言我再详细说明。

图像延迟加载特效

当你打开Bamboo Talk!的首页向下拉动时可以看到文章图片是逐渐显示的。这个功能原理在于当图片位于页面下方时图片不会立即载入而是以纯色替代,只有当移动滚轮图片将要进入视野时图片才开始下载,呈现渐显的效果。这个效果一方面实现美观,同时对于图片较多的展示站点起到加速打开的作用,因为并不是所有图片都是在页面打开的那一刻加载的。

这里”#content .content img”同上,只要是这个范围内的img都会表现延迟加载的效果,根据自己的需要进行替换。grey.gif是图片未加载时占位的纯色图片,点击此处下载该图片上传到你的空间再修改一下路径就可以了~”fadeIn”就是淡入效果,不必修改。

P.S. 这是一个叫做lazyload的插件实现的,还要再导入这个js文件,点击查看~~多谢闲云野鹤的提醒^^

返回顶部按钮

如本页左下方”Top”按钮,点击后能够平滑向上移动至顶部~~大部分的主题带有这个效果,有的是只有按钮没有滑动效果。如果需要实现这个功能,首先创建按钮

<div class=”top”><a href=”#”>Top</a></div>

“Top”可用ing标签替换成自己喜欢的图片~

再新建一个js文件内容为

jQuery(document).ready(function($)

{

jQuery(‘#top’).click(function(){$(‘html,body’).animate({scrollTop: ‘0px’}, 1000);return false;});

});

这里’#top’和上面class=”top”对应,”1000”表示返回顶部用时1000ms,可根据页面长度调整~~

嗯,大致就是这样了~~最后说明对于应用以上每一个特效,都需要新建一个js文件,同时在header.php引入这个文件,语句位置在引入库文件语句和<?php wp_head(); ?>语句之间~~这是作为测试,一旦确定需要哪些效果的时候就可以将这些多个js合并到一个文件内,这样就不用反复修改header.php,也方便管理~~在探索这些效果的过程中广泛参考了MG12木木同学的博客,学习了不少东西,再次表示感谢^^接下来还准备重建Bamboo Talk!的留言模块~哎,怎么说来着,适当的折腾也是娱乐精神的体现,哈哈 /l/ ~~

日志信息 »

® 文章信息:本篇日志于 2010年05月23日 16:14 发表在分类 "探索 Exploration"
™ 本文标签:,
© 声明信息:本作品采用 license 协议进行许可,转载请注明来自"Bamboo Talk!"
喜欢本文,那就收藏到 :

“jQuery应用效果总结笔记” 当前有25条评论 »

  1. jq效果太炫了。我要好好学习,先学好基础,今年打算完成 html+css+php+js+jq+ps的学习。哈哈哈哈 /l/ /l/ /l/

    • 哈哈,任重而道远啊,向着能够制作自己的主题前进~~^^

  2. JC应用了大量的实际案例..使技术白痴的藕..好像也有点点看懂了…不过藕..还是暂时不尝试了..嘿嘿..等新博开出来,试试..藕要加班去茑..加班前过来晃荡一下滴~ /ax/

    • 哎呀~~咋就这么巧呢,刚看完海角七号准备睡前看看博客就见着您了,嘿嘿~~
      现在还要加班啊?辛苦辛苦 /ae/

  3. 博客主题真好看。JQ效果也好漂亮。先收藏有时间摸索下。

    • 谢谢啦,你的也是很赞啊,而且内容很丰富~~还请多指教^^

    • 朵朵、我也是从这里学习的、呵呵~~

  4. jq我好想学的~太赞了,但是我太小白了,什么都不懂……问一下哦,留言框下面的表情怎么添加more?

    • 是这样的~~直接用的插件Custom Smilies,可以进行设置~~你是用这个么?

  5. 你的站真漂亮~~~ /aa/

    • 嘿嘿,O(∩_∩)O谢谢,你的也很赞的说~~

  6. /al/ 郁闷、我很久之前就想加这些效果了、可惜不会JQUERY、我也来学习一下、

    • 哈哈,其实也不复杂的,试试看啦~~

  7. 延迟加载图片没有试用成功,不知道是哪里的原因,先暂时收下代码啦! /i/

    • Oops~~你提醒了我~~还有一个js文件要加载的,这就加上链接~~

    • ok~~已经搞定咯,希望能成功^^

      • 哈哈,我把你这篇文章发我博客里啦,分享下! /aaf/

  8. Fancybox这个效果不错,可惜我没办法用了,用了wp的相册插件了,本来想抛弃那个插件用这个,但是相册又没了,呵呵.你在专门写一个教程呗,我还有一个站,准备用这个效果

    • 嗯,其实插件太大,用fancybox十几k文件就能实现效果~可以先看看上面链接的官网教程啦,其实也蛮详细的~~写好通知你咯

      • fancybox我按照官方的教程,没法实现那个Iframe的效果,真郁闷!

      • 已经好了,呵呵! /j/

  9. 很好,就是有点不懂

    • 这算是当时jquery入门的一些技巧,试试看

发表您的评论




    添加表情    发布自定义图片
a b c d e f g h i j k l m n o p q r s t u v w x y z
(Ctrl+Enter快速提交) 如何设置头像?
0

Bamboo Talk! is Mr. Maocan's private blog. Hope you enjoy your every visit here!