JQuery特效
这个jQuery插件能够在图片上显示标题信息,当鼠标放到图片上时滑动出现。
Captify (36)jParallax
这是一个用于生成视差现象的jQuery插件。mParallax能够产生的效果与jParallax一样但采用Mootools框架开发。
丁丁编程技术 Email:greenvc@gmail.com http://www.kmdin.com 第 40 页,共 97 页
JQuery特效
jParallax
(37)jQuery---运用图片预加载技术打造幻灯片
截图:
一些演示:
http://www.cssrain.cn/demo/jQueryImgLoad/Demo1/demo2.html
http://www.cssrain.cn/demo/jQueryImgLoad/Demo2/demo3.html http://www.cssrain.cn/demo/jQueryImgLoad/Demo3/demo4.html
http://www.cssrain.cn/demo/jQueryImgLoad/Demo1/demo1.html (以前做的,非预加载)
下载:
http://www.cssrain.cn/demo/jQueryImgLoad/jQueryImgLoad.rar
丁丁编程技术 Email:greenvc@gmail.com http://www.kmdin.com 第 41 页,共 97 页
JQuery特效
(38)jQuery pageSlide
jQuery pageSlide 是一个jQuery插件,它可以控制一个隐藏页面的显示和关闭。具体来说,就是当前页占一个完整页面,隐藏页是看不到的,你设置一个控制的地方,点击该控制时触发事件,隐藏的页面就弹出来。再次点击隐藏页面以外的空间,它就又关闭。 这适合在有限的空间里,在主页里放重要内容,而隐藏页放一些并不一定要显示,而是有需要的用户才去展开显示的内容。
(39)Creating a Slick Auto-Playing Featured Content Slider
Niall Doherty的 Coda Slider 为许许多多的设计师带来了灵感. Chris Coyier 创建的这个Slick Auto-Playing Featured Content Slider 使用 Coda Slider插件 ,实现我们常说的”图片焦点特效”。多用于门户站。
(40)Portfolio Layout Idea Using jQuery
非常漂亮的一个特效布局。由 Benjamin Sterling 创建的这个 portfolio layout 使用了jQuery的 easing plugin. 适合那些想用来展示
丁丁编程技术 Email:greenvc@gmail.com http://www.kmdin.com 第 42 页,共 97 页
JQuery特效
个人作品集的用户。
它在页面两边显示带缩略的作品列表,当你点击每个条目时,会在中间部分以退场然后进场的特效呈现出该作品的全部内容。
(41)jQuery---图片先模糊后清楚 http://www.hotbook.cn/
很多图片网站用了这种技术,Google图片中心也不例外。 这种技术的图片是先显示模糊的,然后再显示清楚的。
这个模糊的原理就是 一张小图片,然后把尺寸放大,大小等于大图片的宽度和高度。 小图片被拉大了,理所当然就模糊了。
试想:小图片的尺寸是10kb,大图片的大小是500kb,那么加载小图片的速度就是大图片的50倍。 当然你会说,如果直接显示大图片是什么情况呢?答案是:一片空白等着你。 演示:
http://www.cssrain.cn/demo/loadImages/loadimages.html
(42)使用jQuery实现网页报纸
演示:
http://www.cssrain.cn/demo/jquerynewspager/demo.html
原理:使用报纸内容作为 背景图,相对定位。
然后里面的div设置为绝对定位,大小,left和top都要跟背景图匹配。 所以这个有一定的规律。 下载:
http://www.cssrain.cn/demo/jquerynewspager/jquerynewspager.rar
引申:
当后台人员问,每次要传坐标,宽度和高度不麻烦么?用户知道使用么? 教用户使用photoshop?。。。!!! 解决方案:
使用图片截图的插件即可,一般的截图插件都能获取4个坐标,宽度和高度, 当然我们只需要这些,并不需要把图片真正截取下来。
(43)jQuery购物网站产品展示.
作者:cssrain@gmail.com(admin)
丁丁编程技术 Email:greenvc@gmail.com http://www.kmdin.com 第 43 页,共 97 页
JQuery特效
程序介绍:
1,点击大图可以弹出遮罩效果. 2,下方小图可以左右滚动.
3,点击新窗口打开,可以打开当前的大图片. 4,遮罩层中小图也可以左右滚动,也可以打开大图片.
在 IE6,IE7,Firefox3 & google 浏览器下测试通过. 演示:
http://www.cssrain.cn/demo/jqueryProduct/demos.html
下载:
http://www.cssrain.cn/demo/jqueryProduct/jqueryProduct.rar
(44)Gallerific
丁丁编程技术 Email:greenvc@gmail.com http://www.kmdin.com 第 44 页,共 97 页