标签归档：jquery特效

jQuery带缩略图左右滚动效果

发表于 2011/05/10 由 前端开发-武方博  5,029 views

这个效果比较常用,在很多商品展示页面会用到，例如淘宝店铺的图片展示和京东商城的商品展示页，其实这段代码很简单，直接看下效果好了！   演示地址：http://www.wufangbo.com/demo/jquery/12/index.html 下载地址：http://www.wufangbo.com/demo/jquery/12/12.rar HTML代码   <div class="pic_scroll">         <div class="pic_small">          <a href="#0"><img class="current" src="images/01.jpg" /></a>              <a href="#1"><img src="images/02.jpg" /></a>              <a href="#2"><img src="images/03.jpg" /></a>    &n......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , | 留下评论

51个jQuery插件介绍和应用实例

发表于 2011/05/09 由 前端开发-武方博  3,883 views

  jquery是近段时间里比较流行的一个javascript框架，不断有使用者开发出新的 jQuery插件。下面收集了51个开发者最喜欢使用的jQuery插件。 Sliding Panels －滑动门控制 1) Sliding Panels For jQuery -元素可以展开或关闭，创建出手风琴的滑动效果。 (2) jQuery Collapse -这个jQuery插件同样点击后滑动展开或关闭DIV层。 Menu － 菜单 3) LavaLamp (4) A Navigation Menu- 锚链接的无序列表嵌套, 可以添加2级菜单 (5) SuckerFish Style Tabs – 选项卡 6) jQuery UI Tabs / Tabs 3 – 基于 jQuery 的一个Tab选项卡导航 (7) TabContainer Theme – 当用户在选项卡之间进行切换时，产生JQuery风格的淡出动效果。 Accordion－ 手风琴效果 8 ) jQuery Accordion Demo (9) Simple JQuery Accordion menu SlideShows － 幻灯片 10) jQZoom-让你在......查看更多>>

发表在 jquery, 群组收集资源 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 一条评论

jquery图片横向左右滚动效果（带按钮控制）

发表于 2011/05/07 由 前端开发-武方博  6,440 views

这个效果实例是我在去年买的一本书里面读到的，想必大家也知道那本书，就不提名字了，直接上下源代码 代码里面的注释很清楚，方便大家学习。 演示地址：http://www.wufangbo.com/demo/jquery/11/index.html 下载地址：http://www.wufangbo.com/demo/jquery/11/11.rar html代码   <div class="v_show"> <div class="v_caption"> <h2 class="cartoon" title="卡通动漫">卡通动漫</h2> <div class="highlight_tip"> <span class="current">1</span><span>2</span><span>3</span><span>4</span> </div> <div class="change_btn"> <span class="prev" >上一页</span> <span class="next">下一页</span> </div> <em><a href......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 2 条评论

Jquery图片无缝左右滚动插件

发表于 2011/05/01 由 前端开发-武方博  3,192 views

  zhw.scroll-1.0.js /* 功能：Jquery无缝滚动插件zhw.scroll-1.0.js 作者：leo 注意：暂只支持div下ul li的滚动 交流：xandchd_kane@163.com */ jQuery.extend({     Scroll: function(settings) {         //初始化参数         var config = $.extend({             stepWidth: 100,         // 滚动步长             waitTime: 4000,         // 间歇时间           &......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 留下评论

jQuery图片左右滚动和jquery图片左右连续滚动

发表于 2011/04/27 由 前端开发-武方博  4,089 views

  公司网站要用到jQuery横向滚动图片特效，当时我为了速度，直接找了一段jQuery代码放上去了。缺点有两个：一、主管不满意，他需要的是连续不断的滚动，就是无缝滚动，而不是滚动一张图片，等一下再滚动一张图片；二、代码有个地方浏览器报错，我不知道为什么，但是删了也不行，必须要。 花了好长一段时间，找代码、改代码，终于搞定了上面提到的两个效果：滚动停一下、无缝滚动。感谢群里点拨我的朋友，感谢Google提供信息，感谢网上不知名的朋友提供代码。 jQuery滚动图片（非连续滚动） 演示地址：http://www.wufangbo.com/demo/jquery/06/index.html 下载地址：http://www.wufangbo.com/demo/jquery/06/06.rar 这段代码思路很简单，把ul里的li都浮动左，变成一横排。然后ul往左边animate移动一个图片的宽度，把第一张图片追加到最后。用setInterval实现不断调用这个方法即可。最后加上鼠标移上去停止调用方法，移开继续调用方法就OK了。 代码我就补......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 4 条评论

jQuery向上循环滚动（仿新浪微博未登录首页滚动微博显示）

发表于 2011/04/22 由 前端开发-武方博  6,539 views

新浪微博未登录首页有一个“大家正在说”的模块，动态滚动最新发布的微博。从需求上来说，这个功能需要实时调用最新的微博数据，单就前端开发来说，其需求可以拆分如下： 1 内容持续滚动； 2 新微博将下面的微博先推下去，然后淡入进来； 3 鼠标经过内容暂停滚动； 4 容器底部渐变消失在背景色下。 上述4个需求之中，需求1-3为js技术实现，需求4为css技术实现，下面逐个需求来讲。 需求1和需求2：此功能使用css的position定位来控制整个ul列表的移动动画。结合需求2，我们可以写得更简单一些，让最后的li元素定时插入第一个li元素的上方，然后采用animate方法来改变li的高度和透明效果。而不停顿的滚动依然要用到setTimeout方法。在没有新数据加载的情况下，要实现有限内容循环滚动。 需求3：鼠标经过暂停的需求可以当鼠标hover经过的时候在某元素上加上某属性的值，这里采用name属性——判断此值是否存在，如果存在则不执行代码。 需......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , | 留下评论

Jquery 仿手机左右拖动滑屏效果

发表于 2011/04/21 由 前端开发-武方博  2,363 views

  前不久公司有个项目是在触摸屏上做产品展示，大家都觉得Iphone或者Android上的滑屏效果不错，我今天也顺便做了一个DEMO，滑屏效果的，预览图如下 　　 演示地址：http://www.wufangbo.com/demo/jquery/04/index.html 下载地址：http://www.wufangbo.com/demo/jquery/04/04.rar   查看更多>>

发表在 jquery | 标签为 , , , , , , , , , , , , , , , , , , , , , | 留下评论

Web开发人员必备的20款超赞的jQuery插件

发表于 2011/03/19 由 前端开发-武方博  5,419 views

导语：jQuery的易扩展性吸引了来自全球的开发者来共同编写jQuery插件。jQuery插件不仅能够增强网站的可用性，有效地改善用户体验，还可以大大减少开发时间。现在的jQuery插件很多，可以根据您的项目需要来选择。这里为您介绍20款非常不错的插件。 Creative Radical Web Typography Lettering.js是一个轻量经的、易于使用的jQuery插件，可创造出极具个性的网页排版，是2010年最佳jQuery插件之一。  New FancyMoves Jquery Product Slider Jquery Product Slider是一款效果很不错的产品幻灯片插件。 Jquery Space Gallery Jquery Space Gallery是一款很有空间感的图片库插件。 Fancy Thumbnail Hover Effect 这是一款非常不错的Hover效果插件。 Jquery Inline Form Validation 这是一款表单验证插件。 Site Switcher 这是一款站点切换插件。 AnythingSlider 这是一款效果很棒的幻灯片插件。 Jquery Tooltip Coda Bubble 这是一款简洁的jQuery信息提......查看更多>>

发表在 jquery | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , | 12 条评论

2011年最佳jQuery插件

发表于 2011/03/07 由 前端开发-武方博  1,736 views

  1、3D浮动效果的图片墙 　　               　　这个插件(http://ajoin.it/mipage/3dGalleyView/1.x/1.1/)实际上是利用jQuery做的一个图片墙的效果，如上图所示，用户可以设置要展示的图片，然后可以自由拖动图片选择，在拖动时会发现有很COOL的图片移动的效果，当移动到想看的图片后，可以点查看，即可放大图片。 　　2、jQuery手风琴图片展示控件 　　               　　该控件实现的是一个象手风琴拉箱似的图片展示效果(http://flcomponents.net/Components/Item/JQuery_Accordion_Gallery)，如上图所示，当鼠标点某张图片时，图片将自右向左滑动展示，并显示该图片的说明文字，而当点选已经看过的图片时，就会象手风琴拉箱一样，图片自左向右滑动显示。 　　3、超级简单的幻灯播放器 　　               　　这个幻灯播放器可以说......查看更多>>

发表在 jquery | 标签为 , , , , , , , , , , , , , | 留下评论

50个有用的jQuery技巧

发表于 2010/12/25 由 前端开发-武方博  1,160 views

Moving Boxes Carousel with jQuery Sliding Boxes and Captions with jQuery Accessible Charts & Graphs from Table Elements using HTML 5 Canvas and jQuery Make a Mega Drop-Down Menu with jQuery Creating a Filterable Portfolio with jQuery A fancy Apple.com-style search suggestion Current Field Highlighting Creating a Dynamic Poll with jQuery and PHP jQuery Infinite Carousel De-Constructing Accordion and Hover Effects with jQuery Better form submission feedback with jQuery Create a gallery by using z-index and jQuery Scrollable Timelines Reddit-style Voting With PHP, MySQL And jQuery Making a Content Slider with jQuery UI BBC Radio 1 Zoom Tabs Creating A Slick Ajaxed Add-To-Basket With jQuery And PHP Create a Digg-style post sharing tool with jQuery Easy Retweet Button ......查看更多>>

发表在 群组收集资源 | 标签为 , | 2 条评论

40佳网页设计常用经典jQuery插件代码

发表于 2010/12/09 由 前端开发-武方博  1,352 views

jQuery的强大与适应性，无须多言。本文收集40个精典的常用案例，我们可以一起分析并学习，最后应用到我们自已的作品当中。 1. Custom Animation Banner with jQuery In this tutorial you will learn how to create a custom animation banner with jQuery by using the jQuery Easing Plugin and the jQuery 2D Transform Plugin. The idea is to have different elements in a banner that will animate step-wise in a custom way. View Demo 2. Moving Boxes Carousel with jQuery In this you will learn how to create a slider, that have buttons to change panels and the panels zoom in and out. View Demo 3. Quick Feedback Form – jQuery & PHP A simple solution to this problem. Powered by jQuery, PHP and the PHPMailer class, this form sends the users’ suggestions directly to your mailbox. View Demo 4. Wijmo – jQue......查看更多>>

发表在 群组收集资源 | 标签为 , , , , , , | 留下评论

jquery全屏左右滚动 仿html5幻灯片效果

发表于 2010/12/09 由 前端开发-武方博  1,501 views

*{margin:0;padding:0;} html{/***The background of the HTML element is*visible as the top and bottom dark strips.*/ background-color:#424242;overflow:hidden;} body{font-size:13px;color:#fff;font-family:Arial, Helvetica, sans-serif; /***Using the body element as a*container for the animation*/ left:0;position:fixed;top:5px;bottom:5px;width:300%;} .step{/* Each step takes a third of the width */ float:left;height:100%;width:33.3333%;overflow:hidden;position:relative;} /* Step 1 */ #step1{background:url('img/bg_1.jpg') no-repeat center center #6f7c18;} #step1 textarea{-moz-box-shadow:-7px 7px 0 #637018;-webkit-box-shadow:-7px 7px 0 #637018;box-shadow:-7px 7px 0 #637018;} #step1 a.button{-moz-box-shadow:-4px 4px 0 #637018;-webkit-box-shadow:-4px 4px 0 #637018;box-shadow:-4px 4px 0 #6......查看更多>>

发表在 jquery | 标签为 , , | 留下评论