4 个超炫的免费 jQuery 翻页插件

9款风格华丽的jQuery-CSS 插件推荐

9 款风格华丽的jQuery/CSS3 插件推荐今天向大家分享9款效果相当不错的jQuery/CSS3插件，不多说，直接来看看这些插件吧。

1、jQuery动画下拉菜单Smart Menu这是一款基于jQuery的动画下拉菜单，子菜单外观比较时尚，鼠标移到菜单上时即可弹出漂亮的子菜单。

在线演示/ 源码下载2、jQuery滑杆改变页面和文字大小我们可以滑动滑杆来调整页面窗口和文字的大小，滑杆在滑动中十分流畅，窗口大小也随着动态改变。

在线演示/ 源码下载3、NotifIt jQuery动画通知Tip插件NotifIt是一款基于jQuery的Tip通知插件，NotifIt可以自定义通知弹出的位置和停留的时间。

在线演示/ 源码下载4、jQuery图标多功能下拉导航这款jQuery菜单外观华丽，功能也十分强大，不仅支持多级下拉菜单，而且支持表单、搜索、自定义内容等高级功能。

在线演示/ 源码下载5、纯CSS3动画按钮UI设计类似的CSS3按钮素材也有不少，这款CSS3按钮完全是使用CSS3实现的，而且在开关按钮打开或者关闭的过程中，按钮会出现很酷的动画效果。

在线演示/ 源码下载6、jQuery图片展示滑动切换特效这是一款基于jQuery的图片展示焦点图插件，图片播放十分流畅，是一款配置简单实用的jQuery焦点图。

在线演示/ 源码下载7、jQuery响应式弹窗VenoBoxVenoBox是一款基于jQuery的响应式弹出窗口，VenoBox支持弹出图片、文字、youtube 视频、Google地图等任意网页元素，非常实用。

在线演示/ 源码下载8、纯CSS3实现的点击发光按钮特效这款按钮时基于纯CSS3实现的，当用户点击按钮的瞬间，按钮四周会发出淡淡的白光效果，是一款非常有特色的按钮。

在线演示/ 源码下载9、Javascript实现网页元素拖拽排序这款Javascript拖拽排序插件可以让你非常方便地拖动网页上的元素，被拖拽的元素在完成拖拽时可以进行即时排序。

10 个最棒的 JQUERY 和 HTML 所见即所得编辑器插件

10个最棒的jQuery和HTML所见即所得编辑器插件HTML5所见即所得WYSIWYG(What You See Is What You Get)编辑器的需求量是非常大的。

但是现在有太多这样的编辑器了，想要从其中找到一个合适的并不容易。

今天这篇文章为大家分享10个我认为是十分棒的所见即所得插件，应该有适合你的需求并能节省你时间的。

1.FroalaFroala所见即所得HTML编辑器非常易于整合和使用。

它几乎不需要你掌握任何代码知识。

它需要jQuery1.11.0或者更高版本、以及Font Awesome4.4.0字体图标的支持。

除了整合的UX以及UI外，还提供了很好的XSS攻击保护。

特点：∙文件压缩后34K∙行内编辑∙支持键盘快捷键∙要求基本的HTML和JavaScript知识∙深浅两种主题∙对移动端做了优化∙支持Word∙34种语言支持以及RTL(Right to Left)从右向左支持2.ContentToolsContentTools是一个小而美的内容编辑器。

该库不需要任何JavaScript框架或库的支持(包括jQuery)，但是却表现很好。

ContentTools包由5个库组成，每一个都可以单独使用，并且该插件易于扩展。

特点：∙压缩后49KB∙行内编辑∙可以调整图片和视频大小∙支持撤销/重做(undo/redo)3.Raptor EditorRaptor Editor是一个开源的JavaScript所见即所得HTML编辑器，对用户友好，易于集成和定制。

它为行内编辑而设计，是复杂的多块布局的理想选择。

它所用最新的技术如HTML5ContentEditable及jQuery，特性有内置单元测试、模块化、可扩展及插件API。

特点：∙支持行内编辑∙灵活的对接选项∙可定制的主题∙良好的文档4.AlohaAloha是一个多功能的内容编辑库。

它允许在你的WEB应用中无缝的嵌入编辑。

主要缺点是不支持图片插入。

12款很好用的_jQuery_图片滚动插件===

12款很好用的jQuery 图片滚动插件这里收集了12款很好用的jQuery 图片滚动插件分享给大家。

jQuery 作为最流行的JavaScript 框架，使用简单灵活，同时还有许多优秀的插件可供使用。

其中最令人印象深刻的应用之一就是各种很酷的图片效果，它可以让的网站更具吸引力。

SlidesSlides 是一款精巧的jQuery 幻灯片插件，有循环、自动播放功能和淡入淡出过渡效果，并且能够自动生成分页。

3D Image SliderFace Detection是一个非常不错的插件，正如它的名字一样，它用于照片的人脸检测。

Portfolio Image Navigator精致的图片导航效果，通过四个方向的箭头控制，适合作品展示的应用场合。

Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件，有独立的jQuery 插件和WordPress 插件两个版本。

目前下载量已经突破1,800,000 次！Rotating Image Slider非常非常炫的图片旋转滑动特效，相信会给你留下深刻印象。

SlidySlidy是一个可定制自动变换效果的插件。

MobilyNotesMobilyNotes是一个轻量级（只有2KB）的jQuery插件，可以让图像或其它HTML内容以层叠的方式显示。

jQuery Easy Slides这是一个非常易用的幻灯片插件，同样非常轻量，与JavaScript和CSS加起来才2.1KB。

BookletBooklet是一个用于把图片或者更多其他的内容以书本的形式显示的jQuery插件，有翻页效果。

ppGalleryLightbox 弹窗效果效果的图片切换，有缩略图导航和滑动切换功能，支持自动播放。

PikachoosePikachoose也是一个轻量级的jQuery插件，可以让图片以幻灯片的格式显示，可设置导航按钮和自动播放。

AviaSliderAviaSlider是一个具有独特过渡效果的jQuery幻灯片插件。

z-pager用法

Z-Pager是一个用于分页的jQuery插件，它可以帮助您在网页上实现灵活的分页功能。

以下是Z-Pager的基本用法：1. 引入Z-Pager插件的CSS和JS文件：```html<link rel="stylesheet" type="text/css" href="path/to/z-pager.css"><script type="text/javascript" src="path/to/jquery.js"></script><script type="text/javascript" src="path/to/z-pager.js"></script>```2. 在HTML页面上添加分页容器，例如一个ul元素：```html<ul id="examplePager"></ul>```3. 使用JavaScript初始化Z-Pager插件：```javascript$('#examplePager').z_Pager({data: [{id: 1, name: 'Item 1'},{id: 2, name: 'Item 2'},{id: 3, name: 'Item 3'},// ...其他数据项],pageSize: 2, // 每页显示的数据项数量pageNum: 2, // 初始显示的页码数量currentPage: 1, // 当前页码，默认为1totalPage: 5, // 总页数，默认为自动计算// 其他选项...});```在上述示例中，我们通过传递一个包含数据项的数组到`data`选项来初始化Z-Pager。

10个免费的jQuery可视化编辑器插件

10个免费的jQuery可视化编辑器插件⽂本编辑器，也就是所见即所得的HTML编辑器，是⽹站⼀个⾮常重要的组件，特别是对于⼀些内容发布⽹站来说。

本⽂介绍10个基于jQuery的可视化⽂本编辑器。

1.MarkitUpmarkItUp!并不是全功能的编辑器，它是⼀个⾮常轻量级、可定制的灵活引擎，适合CMS、博客、论坛等⽹站。

makrItUp并不是所见即所得的，以后也不会是。

demo / source2.jWYSIWYG这是⼀个内嵌的内容编辑器，可直接编辑HTML内容，并具备所见即所得的效果，该插件体积⾮常⼩，只有不到26K。

demo / source3.RTE jQuery该编辑器同样⾮常⼩⽽且易⽤，并可根据需要进⾏定制，jquery.rte.js⽂件只有7k（未压缩），兼容主流浏览器（IE6，Firefox 2，Opera 9，Safari 3.03）demo / source4.jHtmlAreajHtmlArea是⼀个简单、轻量级、可扩展、基于jQuery开发的WYSIWYG HTML编辑器。

这个组件可以很⽅便将页⾯中的TextArea标签转换成⼀个WYSIWYG HTML Editor。

整个编辑器包括图⽚和CSS⼤⼩只有22k。

demo / source5.WYMEditorWYMeditor是⼀个基于Web浏览器的可视化HTML编辑器，界⾯如下图所⽰demo / source6.uEditoruEditor是⼀个灵活易⽤的编辑器，⽣成的HTML代码很简单整洁，可通过css定制外观demo / source7.jQuery WYSIWYG Rich Text EditorjQuery Wysiwyg是⼀个易于集成和定制的编辑器，⽀持浏览器：IE6，IE7，IE8，FF3，Opera9，Safari4，Google Chrome2,使⽤MIT授权demo / source8.HtmlBoxHtmlBox是⼀个基于jQuery开发的HTML/XHTML编辑器。

Jquery左右滑动插件之实现超级炫酷动画效果附源码下载

Jquery左右滑动插件之实现超级炫酷动画效果附源码下载分享⼀款基于jQuery超级酷动画滑动插件。

这是⼀款基于jquery.pogo-slider插件实现的多个滑块切换特效。

效果图如下，如果⼤家觉得还不错，很满意可以下载源码哦。

实现的代码。

html代码：<div class="pogoSlider" id="js-main-slider"><div class="pogoSlider-slide" data-transition="slideOverLeft" data-duration="1000" style="background-image:url(img/slide1.jpg);"></div><div class="pogoSlider-slide " data-transition="fold" data-duration="1000" style="background-image:url(img/slide2.jpg);"></div><div class="pogoSlider-slide " data-transition="shrinkReveal" data-duration="1000" style="background-image:url(img/slide3.jpg);"></div></div>。

无限滚动-jquery

“无限滚动分页”带给我们翻滚的未来几年以前，所有上网的用户都要拿着手中的鼠标不断点击来获取内容，而今天我们要想查看网页下面的内容只需轻轻滚动即可。

Twitter、Pinterest、Facebook、Instagram等主流应用都已经加入到无限滚动的阵营里了。

为什么如此多的消费者互联网公司争相使用这个神奇的设计模式呢？之前用户们都是被迫等待网页的重新加载，从一块内容跳到下一页面需要点击、等待。

而现在手机和平板电脑等移动设备正在四处泛滥，所以一切都变了，今天的设计师们都在点击、弹出和滚动的选项中，果断选择最适合用户的全新体验。

生活中充满了无休止的搜索我们都喜欢无休止地寻找新奇内容，而无限滚动分页则是人机交互设计的最好选项。

当然，滚动分页的日益普及也存在很多技术的原因。

动态内容的兴起就像一股新鲜血液一样注入人们的生活中，相比于分页建立的静态内容而言，它需要一个更好的解决方案。

但要想充分了解滚动分页为什么这么好用，还得进行一次短暂的思想旅行，让时光倒流到很久以前……一些像无限滚动类似的信息显示方法，让用户、读者产生了极大地好奇心，情不自禁地想看看下一个分页的内容是什么。

就像咖啡和巧克力一样，无限滚动吸引了大量关注，越来越多的网站开始使用该设计模式，其中最具代表性的当属瀑布流图片分享巨头—Pinterest。

Co.Design的撰稿人Cliff Kuang表示，Pinterest 风格的内容展示赢得了足够多的回头率，你完全可以通过鼠标在屏幕上的停放位置，来控制该网页无限滚动的下拉速度。

优点1有效的降低了界面复杂度，节省了空间：我们不再需要臃肿复杂的页码导航链接或按钮了。

2对触屏设备来说符合，交互方式更直觉：在移动应用的交互环境当中，通过向上滑动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远远低于点击链接或按钮。

3更高的参与度：以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。

5-6月份的10个最佳jQuery插件

5、6 月份的10 个最佳jQuery 插件1) jQuery PopeyejQuery.popeye 这个插件能够将一组无序的图片列表转换成一个简单的相册。

当点击图片时将以Lightbox风格放大图片。

图片展示框提供向前/向后控制并能够为每一张图片添加备注说明信息。

jQuery.popeye能够根据图片大小自动调整展示框的高度和宽度。

2) jQuery MB Gallery这是一个全功能的相簿应用，带导航条、缩略图和自动大小调整的相框。

3) TopupTopUp是一个跨浏览器支持的JavaScript 库，用于创建弹出式对话框以显示图片和网页，类似ThickBox和LightBox。

TopUp 使用的是jQuery和jQuery UI库来保证兼容各种浏览器。

当然TopUp 还是可以跟Prototype一起工作。

4) Pirobox采用jQuery开发的Lightbox控件。

能够根据浏览器窗体大小自动调整展示图片大小。

提供向前/向后控制链接。

动态加载图片效果。

易于定制。

5) Fancy ZoomFancyZoom采用缩放效果来展示图片或任意HTML页面，不需要另外开启页面来载入图片，其效果在Apple Mac的官方网站中也有。

6) Canvas Slide Show7) SideWays jQuery8) GallerifficGalleriffic是一个用于创建快速展示相册中照片的jQuery插件。

图片既可以以幻灯片的方式查看，也可以手动点击缩略图查看。

Galleriffic还支持分页，从而使得它能够展示更多的图片。

9) ColorBoxColorBox是一个基于jQuery 1.3 的轻量级，自定义灯箱插件，功能非常强大，支持图片，图片组，ajax，inline和iframed内容，灯箱样式完全由用户控制，可自定义CSS样式，不需要改写ColorBox库文件就能重写展示效果设置，支持加载预处理提示等等，效果图如下：在线演示：/detail/hjor2zox10) YUI来源：清源教育。

30 个 jQuery 导航菜单插件和教程

导航菜单是一个网站最为重要的元素之一，一个设计良好的导航菜单可让网站的结构清晰、一目了然。

本文向你推荐 30 个 jQuery 的导航菜单插件和教程，以供参考。

1. jQuery MagicLine Navigation具备滑动效果的导航菜单2. Create a Cool Animated Navigation with CSS and jQuery3. How to implement a perfect multi-level navigation bar4. Beautiful Slide Out Navigation: A CSS and jQuery Tutorial5. A Different Top Navigation6. Puffer Fish Navigation7. jQuery ListNav Plugin8. Animated Navigation with CSS & jQuery9. Tab Navigation with Smooth Horizontal Sliding Using jQuery10. “Outside the Box” Navigation with jQuery11. Inspired Navigation Effect Using jQuery12. Slide and hide section with jquery13. Horizontal Subnav with CSS14. Creating a navigation menu with CSS & jQuery15. LavaLamp for jQuery lovers!16. Kwicks for jQuery17. Create Vimeo-like top navigation18. How to Make a Smooth Animated Menu with jQuery19. Create an apple style menu and improve it via jQuery20. How To Create A Keypress Navigation Using jQuery21. Image Menu with Jquery22. jqDock – jQuery Fish Eye Menu23. A Stylish Navigation Menu With jQuery24. Fixed Fade Out Menu: A CSS and jQuery Tutorial25. Dropdown Navigation in CSS3 jQuery26. jQuery One Page Navigation Plugin27. CSS3 and jQuery menu28. Image Hover Move- simple and practical navigation or featured image jQuery plugin29. jMenu, horizontal navigations with unlimited sub-menus in jQuery !30. jQuery Awesome modal Navigation Menu。

帮助你生成翻页效果的jQuery插件 - bookblock

帮助你生成翻页效果的jQuery插件 -bookblock今天我们介绍一个漂亮的jQuery翻页效果插件 - bookblock，使用它可以创建动态的类似书本翻页效果的幻灯。

希望大家喜欢!这个插件依赖于jQuery++，这个类库是一个jQuery的扩展类库，这里使用了它的swipe事件。

HTML代码主要html代码如下，生成需要展示的图片内容：<div id="bb-bookblock" class="bb-bookblock"> <div class="bb-item"> <a href=""><img src="images/animals/a.jpg" alt="image01"/></a> </div> <div class="bb-item"> <a href=""><img src="images/animals/b.jpg"alt="image02"/></a> </div> <div class="bb-item"> <a href=""><imgsrc="images/animals/c.jpg" alt="image03"/></a> </div> <div class="bb-item"> <a href=""><img src="images/animals/d.jpg" alt="image04"/></a> </div> <divclass="bb-item"> <a href=""><img src="images/animals/e.jpg"alt="image05"/></a> </div> <div class="bb-item"> <a href=""><img src="images/animals/f.jpg" alt="image05"/></a> </div> </div>Javacript代码$(function() { var Page = (function() { var config = { $bookBlock: $( '#bb-bookblock' ), $navNext : $( '#bb-nav-next' ), $navPrev : $( '#bb-nav-prev' ), $navJump : $( '#bb-nav-jump' ), bb : $( '#bb-bookblock' ).bookblock( { speed : 800, shadowSides : 0.8, shadowFlip :0.7 } ) }, init = function() { initEvents(); }, initEvents = function() { var $slides = config.$bookBlock.children(), totalSlides = $slides.length; // add navigation events config.$navNext.on( 'click', function(){ config.bb.next(); return false; } ); config.$navPrev.on( 'click',function() { config.bb.prev(); return false; } );config.$navJump.on( 'click', function() { config.bb.jump( totalSlides ); return false; } ); // add swipe events $slides.on( { 'swipeleft' :function( event ) { config.bb.next(); return false; }, 'swiperight' : function( event ) { config.bb.prev(); return false; } } ); }; return{ init : init }; })(); Page.init(); });主要参数主要参数如下：// speed for the flip transition in ms.speed : 1000,// easing for the flip transition.easing : 'ease-in-out',// if set to true, both the flipping page and the sides will have an overlay to simulate shadowsshadows : true,// opacity value for the "shadow" on both sides (when the flipping page is over it).// value : 0.1 - 1shadowSides : 0.2,// opacity value for the "shadow" on the flipping page (while it is flipping).// value : 0.1 - 1shadowFlip : 0.1,// perspective valueperspective : 1300,// if we should show the first item after reaching the end.circular : false,// if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'.nextEl : '',// if we want to specify a selector that triggers the prev() function.prevEl : '',// callback after the flip transition.// page is the current item's index.// isLimit is true if the current page is the last one (or the first one).onEndFlip : function( page, isLimit ) { return false; },// callback before the flip transition.// page is the current item's index.onBeforeFlip: function( page ) { return false; }希望大家喜欢这个插件，如果你有任何问题，请给我们留言，谢谢!来源：帮助你生成翻页效果的jQuery插件 - bookblock文章来源于：/article-26692-1.html。

10款无限滚动自动翻页jquery插件老K博客

10款无限滚动自动翻页jquery插件老K博客10款无限滚动自动翻页jquery插件2012年3月29日无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术，它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果，改变了一直以来只能通过点击下一页来翻页这种常规做法。

无限滚动自动翻页技术的鼻祖是微博的先驱：推特(twitter)，后来必应图片搜索、谷歌图片搜索、google reader等纷纷抄袭了这一项技术，于是靠滚动浏览器滚动条来翻页的技术慢慢在互联网上遍站开花。

要在自家的网站上实现自动翻页的功能并不复杂，twitter面向开发者提供了相关的api，而且已经有人开发了相关的jquery插件，让我们可以事半功倍，下面老k为你列举一下这些无限滚动jquery插件。

1、jquery ScrollPagination这是一款由国外jquery爱好者出于学习目的开发的自动分页插件，你可以把它应用在任何地方。

2、Screw可以实现当用户滚动网页时加载html，避免一次性加载一个大页面，这样可以减轻宽带的负担，加快访问速度。

当然它也可以实现当用户滚动滚动条到网页底部的时候自动翻页。

3、Autobrowse通过ajax实现当用户滚动时自动加载页面内容，同时可以把内容写入到到浏览器缓存。

使用很简单，只需要在html容器(例如：div)中使用autobrowse属性就可以实现了。

4、Scroll Extend Plugin设计用来自动加载页面底部以下的内容，是通过将内容appendT o来某个dom来实现的，当滚动超出这个dom后自动加载页面内容。

作者的初衷是用来集成到wordpress的。

5、Infinite Scroll Plugin也是一款不错的无限滚动jquery插件。

效果和dzone的一样。

6、Endless Scroll jQuery Plugin比较轻巧，完成任务10次的自动加载后自动停止滚动加载。

JQuerySwitchable图片切换播放插件

JQuerySwitchable图片切换播放插件JQuery Switchable 图片切换播放插件IntroductionjQuery.Switchable是一款整合了Tabs、Slide、Scrollable等常见UI组件的jQuery插件。

它有简单易用的API、可灵活配置的Configuration，支持自定义Effect，支持自主开发Plugin。

下面是jQuery.Switchable的几个亮点：1.在当前 trigger 中 mouseenter/mouseleave, click 不触发2.鼠标快速滑过非当前 trigger, 不触发3.mouseenter 到非当前 trigger, 停留时间到达延迟时，触发4.click trigger/panel, 立即触发5.beforeSwitch/onSwitch 事件的触发6.panel 内的锚链触发7.无法获取 trigger 时，自动创建 triggerConfiguration下面是构建jQuery.Switchable的基本格式：1$("trigger-container-selector").switchable("panel-selector", {2triggerType: "mouse", // or click3effect: "default",4circular: false5});trigger-container-selector是trigger的容器，使用jQuery Selector 获取。

trigger默认是<a>标签，如果没有获取到，将自动创建。

1st argument: panel-selector是具体的panel元素，使用jQuery Selector 获取，比如：#panel > img。

2st argument: configuration可以是一个function，或者是一个object，甚至可以省略。

互联网小工具推荐智能网页阅读模式切换插件

互联网小工具推荐智能网页阅读模式切换插件互联网小工具推荐：智能网页阅读模式切换插件在如今信息爆炸的时代，互联网已成为人们获取各类信息的主要途径之一。

然而，不可否认的是，在海量信息中找到自己所需的内容并非易事，而且长时间的阅读网页也会对视力产生一定的压力。

为了解决这些问题，智能网页阅读模式切换插件成为了一种有效的解决方案。

本文将介绍一些值得推荐的插件，它们能够帮助用户在浏览网页时更加便捷、舒适。

一、xxx插件xxx插件是一款功能强大的智能网页阅读模式切换插件。

通过该插件，用户可以一键切换网页的阅读模式，将繁杂的页面转换为清晰简洁的文章排版。

无需任何操作，xxx插件能够自动识别网页内容，并优化显示效果，使用户能够专注于文章的阅读，提高阅读效率。

二、xxx插件与xxx插件相比，xxx插件具有更多的个性化设置。

用户可以根据自己的需求，自定义网页的字体大小、字体样式、背景颜色等，以获得更好的阅读体验。

该插件还支持夜间模式切换，能够有效减轻夜间阅读对眼睛的伤害。

三、xxx插件xxx插件是一款跨平台的网页阅读模式切换插件，支持多种浏览器。

该插件集成了众多实用功能，比如图片屏蔽、广告拦截、阅读进度提示等，帮助用户过滤掉冗余信息，提供更为纯净的阅读环境。

同时，该插件还可以将网页内容导出为PDF或者纯文本格式，方便用户离线阅读或保存。

四、xxx插件xxx插件则是一款追求极简风格的网页阅读模式切换插件。

该插件去除了冗余的边栏、广告等干扰元素，并专注于提供最纯粹的文字阅读界面。

不仅如此，它还支持将网页保存为电子书的功能，用户可以随时随地阅读自己喜欢的内容。

综上所述，智能网页阅读模式切换插件为用户提供了更加便捷、舒适的阅读体验。

无论是提高阅读效率，还是保护视力健康，这些插件都能够起到积极的作用。

相信随着科技的不断进步，未来还会有更多的优秀插件问世，为我们的网页阅读带来更多便利。

让我们一起享受智能网页阅读模式切换插件带来的便捷与舒适吧！。

【推荐下载】10个Jquery幻灯片插件教程

10 个Jquery 幻灯片插件教程2010/12/14 12当有大量的内容或者图片需要在你的网站或者BLOG 上展示的时候，以幻灯片滑动的方式是一个不错的选择，这种效果常用于公司网站或者个人BLOG。

常听有人说jquery 比较难学，只要你感兴趣，实现幻灯片效果还是蛮有乐趣的，下面的Jquery 幻灯片教程将引领你进入Jquery 插件开发的喜悦中，希望对大家有帮助。

1、jQuery Easy Slides v1.1650) this.width=650;”height=“473”alt=““width=“705”border=“0”src=“itdaan/imgs/6/1/7/8/88/6db26f850bf1f039132f110dbdb758b1.jpe”/>在所有的Jquery 幻灯片插件中，Jquery easy sildes 算是最容易使用的一个。

2、The Piecemaker XML Gallery650) this.width=650;”height=“350”alt=““width=“570”border=“0”src=“itdaan/imgs/9/3/7/5/48/3dcfc966e223316e5ae5aeeb77ee2536.jpe”/>非常酷的具有3D 效果的jquery 插件，有详细的制作方法，有兴趣的朋友可以研究一下它的源代码。

不用Flash 也可以实现那么炫耀的效果，没有想到吧。

3、Create Beautiful jQuery Slider Tutorial650) this.width=650;”height=“350”alt=““width=“570”border=“0”src=“itdaan/imgs/1/2/3/1/89/b0b4fb0ad79a7f7ed416e901e50a0e34.jpe”/>这篇教程详细地介绍了如何开发一个漂亮的jquery 图片幻灯片效果，包括图片名称和简短描述4、Create a Simple Slideshow Using MooTools Thumbnails and Captions650) this.width=650;”height=“482”alt=““width=“530”border=“0”src=“itdaan/imgs/0/8/6/3/42/000a471cb84eff89cb6807c3dc2a0d10.jpe”/>使用Mootools 创建幻灯片效果已经非常常见和效果也非常棒，主要分为四步：第一步，布置幻灯片放映的布局；第二步，给幻灯片添加事件控制；第三步，给幻灯片一个统一的样式类；第四步，添加图片缩略图和标题。

6个超炫酷的HTML5电子书翻页动画

6个超炫酷的HTML5电⼦书翻页动画相信⼤家⼀定遇到过⼀些电⼦书⽹站，我们可以通过像看书⼀样翻页来浏览电⼦书的内容。

今天我们要分享的HTML5应⽤跟电⼦书翻页有关，我们精选出来的6个电⼦书翻页动画都⾮常炫酷，⽽且都提供源码下载，有需要的朋友可以下载使⽤。

1、jQuery书本翻页3D动画特效今天要分享的这款jQuery书本翻页3D动画功能更加强⼤，可以⽀持任意数量页的翻阅，并且也有⾮常美观的视觉效果。

书本的内容⽀持任意HTML元素，相当灵活。

2、CSS3书本翻页动画书本翻页效果逼真今天我们要分享⼀款炫酷⽽且实⽤的CSS3动画效果，它是模拟书本翻页的动画特效。

当⿏标滑过书本右上⾓时，书本即可向前翻⼀页，⽽且翻页动画⾮常逼真。

由于CSS3的运⽤，我们并不需要使⽤复杂的图⽚来制造逼真的书本效果，书本翻页可以很简单地完成。

3、HTML5电⼦书翻页动画特效今天我们要来分享⼀款很酷的HTML5电⼦书翻页动画特效，这款HTML5翻页动画可以⽤⿏标拖动页⾯来模拟⼿动翻页的效果，也可以点击书页的边框来快速翻页。

4、HTML5 3D书本翻页特效 3D效果⽐较漂亮利⽤HTML5和CSS3实现3D效果真的⾮常⽅便，下⾯这款书本翻页特效就很好地利⽤了HTML5的3D特性。

⿏标拖拽书本页⾯即可翻动页⾯，在翻页的过程中整本书还呈现出3D⽴体的效果，包括书本中的图⽚也⼗分⽴体。

5、HTML5/CSS3书本翻页3D动画前段时间我们分享过很多⽜叉的HTML5动画，如果你对HTML5感兴趣，可以移步⾄HTML5动画欣赏学习。

今天我们要分享⼀款基于HTML5和CSS3的书本翻页3D动画，当我们将⿏标滑过书本时，书本就会⾃动⼀页页翻过去，书本的3D效果⾮常不错。

6、jQuery/CSS3书本翻页动画特效这是⼀款基于jQuery和CSS3的书本翻页动画特效，该书本翻页插件的外观⾮常华丽喜庆，⾮常适合产品活动或者育⼉⽹站使⽤。

我们可以点击左右翻页按钮进⾏翻页，也可以使⽤⿏标拖拽页脚来实现翻页动画。

7款最佳jQuery和JavaScript的PDF查看器插件

7款最佳jQuery和JavaScript的PDF查看器插件在这篇文章中，我们将提供最好的PDF浏览器插件。

1. JavaScript的PDF阅读器（JavaScript PDF Reader : pdf.js）pdf.js 基于HTML5实现在线演示2. jQuery的媒体插件（jQuery Media Plugin）jQuery的媒体插件支持丰富的媒体内容不显眼的转换标准标记。

它支持virtually any media type, including Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF 等等在线演示3. 嵌入PDF文件转换成HTML文件（PDFObject : Embeds PDF files into HTML documents）一个JavaScript库将嵌入PDF文件转换成HTML文件.在线演示4.Google文档查看器jQuery插件（Google Docs Viewer plugin for jQuery）谷歌文档查看器是一个可嵌入的基于浏览器的浏览器，只需要一个URL的文件可在网上。

这巧妙地绕过了需要为用户在他们的机器上有兼容的软件对这些文件类型的文件，并显示在浏览器中。

在线演示5. ZOHO Viewer plugin for jQuery该的ZOHO浏览器是一个可嵌入的基于浏览器的浏览器，只需要一个URL的文件可在网上。

这一点，就像谷歌文档查看器，绕过需要，为用户在他们的机器上有兼容的软件对这些文件类型的文件，并显示在浏览器中。

自动嵌入的的ZOHO观众观看的DOC，DOCX，XLS，XLSX，PPT，PPTX，PPS，ODT，ODS，ODP，SXW，SXC，SXI，WPD，PDF，RTF，TXT，HTML，CSV，TSV文件，它支持所链接的锚标签。

在线演示6.生成PDF文件使用纯客户端的JavaScript（ jsPDF : Generate PDF files using pure client-side JavaScript）用纯客户端的JavaScript生成PDF文件使7. jQuery的文档查看器(jQuery Document Viewer)jQuery的文档查看器可以让你在网页中直接查看多种文件格式。

9月份最受欢迎的12个jQuery插件

9月份最受欢迎的12个jQuery插件
1. tiltShift.js
一个插件来复制使用CSS3图像过滤器的移轴效果。

这是一个概念验证，目前只适用于Chrome浏览器和Safari浏览器6。

2. Responsive Measures
Responsive Measure 可帮你给文字设置最佳的字体大小。

3. BookBlock
BookBlock 是个用来创建类似图书翻页效果的插件
4. Fresco
Fresco 是一个漂亮的响应式的 lightbox，可用于创建令人惊叹的、支持各种屏幕尺寸的弹出层。

5. FoldScroll
一个体验版的 CSS 3D 的滚动效果插件
6. jQuery Stick'em
让元素始终固定在某个点位置
7. Socialist
jquery-socialist 是jQuery 社交网络插件，用于从多个社交网络获取数据并创建一个单一的社交媒体流。

8. Foggy
Foggy 是一个用来模糊糊网页元素的 jQuery 插件
9. equalize.js
用来均衡元素高度和宽度的插件
10. Responsive IFrames
将你复杂的 iframes 转成响应式的风格。

11. MagicNav.js
为页面上所有<h1> 元素生成链接，并将这些链接放在页面上的导航元素。

12. Dopeless Rotate
实现了产品照片三百六十度旋转的视觉效果，支持触摸屏设备
via moretechtips。

jquery实现页面百叶窗走马灯式翻滚显示效果的有效方法

jquery实现页面百叶窗走马灯式翻滚显示效果的有效方法1. 这里的代码需要jquery1.3以上的.支持，如下所示：复制代码代码如下:jQuery.fn.extend((function($){var l = 4,//卷动行数t=5000,//卷动完一次后，隔多长时间下次开始卷动rt=500,//每个n卷动过去的耗时n="li",//默认的卷动对象内包含的要卷动的HTML标记o="ul",//如果卷动时，启用的包裹卷动元素的HTML标记e,//调用对象en,//调用对象内所有的要卷动的对象集合h;//卷动行高度var vLimit=80;//比视觉极限0.1s还小点var maxRnum=Math.ceil(rt/vLimit);//最大卷动次数var maxRh=0;//每次卷动高度var fnRollFirst=function(arg){//将arg向上卷1个n，完成之后将第1个n移动到最后一个位置var rCount=0;//卷动次数纪录var rVal=setInterval(function(){//每隔vLimit循环一次，共循环maxRnum-1次rCount++;arg.scrollTop(arg.scrollTop()+maxRh);if(rCount>=(maxRnum-1)){//少卷1次clearInterval(rVal);arg.scrollTop(arg.scrollTop()+h-maxRh*(maxRnum-1));//最后1次修正卷动值//移动第一个元素到最后var nowN=arg.children(n);nowN.eq(nowN.length-1).after(nowN.eq(0));//第一个位置空出后需要通过倒卷修正回来arg.scrollTop(-h);};},vLimit);};var fnRollArr=function(arg){//对数组中的对象逐一启动卷动var out=setInterval(function(){fnRollFirst(arg.shift());if(!arg.length){clearInterval(out);};},rt);};var fnRoll=function(){//获得需要逐个卷动的对象集合var arr=new Array();e.children(o).each(function(){var rn=$(this).children(n);if(rn.length>1){arr.push($(this));};});setInterval(function(){fnRollArr(arr.slice(0));},t);};var fnLay=function(){//布局页面h=en.height();var nu=Math.ceil(en.length/l);var u=$("<"+o+">");u.css({"overflow":"hidden","height":h+"px","margin-bottom":"15px"});for(var i=0;i<l;i++){en.slice(nu*i,nu*(i+1)).wrapAll(u);};};var fnMain=function(){//卷动主方法if(maxRnum>1){fnLay();maxRh=Math.ceil(h/maxRnum);fnRoll();};var fnStart= function(arg){//初始化显示方式e=arg;en = e.children(n);en.show();if(en.length>l){fnMain();}else{return false;};};return {setLine : function(num){//设置要分成多少行来卷动(!isNaN(num) && num>0)";return this;},setTime : function(num){//卷动间隔时间:毫秒(!isNaN(num) && num>0)";return this;},startRoll : function(){//启动卷动fnStart(this);}})(jQuery));2. 页面可以是这样子复制代码代码如下://$("#re").setLine(5).setTime(3000).startRoll(); //简单的调用$("#re").startRoll();。