jQuery文档、视频、电子书、源码

本文实例讲述了jQuery图片前后对比插件beforeAfter用法。分享给大家供大家参考，具体如下： 今天分享一款 jquery 插件——图片前后对比（beforeAfter），效果如下： 使用方法： !DOCTYPE HTMLhtml lang="en"head meta charset="utf-8"/ title图片前后对比/title/headbody div class="beforeafter" img src="images/before.jpg" alt="before" height="420" width="748"/ img src="images/after.jpg" alt="after" height="420" width="748"/ /div/body/htmlscript type="text/javascript" src="js/jquery.min.js"/scriptscript type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"/scriptscript type="text/javascript" src="js/jquery.beforeafter-1.4.js"/scriptscript type="text/javascript"$(function(){ $('.beforeafter').beforeAfter({ imagePath: 'images/' });});/script 参数说明（部分）： showFullLinks：是否显示下面的链接，点击链接，将自动显示完整的前或后的图片，默认值：true imagePath：导航图片的路径（绝对路……

图片延迟加载也称懒加载，通常应用于图片比较多的网页，如果一个页面图片比较多，且页面高度或宽度有好几屏，页面初次加载时，只显示可视区域的图片，当页面滚动的时候，图片进入了可视区域再进行加载，这样可以显著的提高页面的加载速度，更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留，还可以节省流量。如果TAB中的图片较多，也同样可以应用于TAB中，当触发TAB时再进行图片的加载。 图片延迟加载的原理比较简单，先将图片的真实地址缓存在一个自定义的属性(lazy-src)中，而src地址使用一个1×1的全透明的占位图片来代替，当然占位图片也可以是其他的图片。 img src="images/placeholder.png" lazy-src="images/realimg.jpg" / 因为是使用javascript来加载图片，如果用户禁用了javascript，可以设置一个替代的方案。 img src="images/placeh……

本文实例讲述了jquery实现的蓝色二级导航条效果代码。分享给大家供大家参考。具体如下： 这是一款网站导航条效果代码，菜单最多可支持两级，适合较多类型的网站使用，不喜欢蓝色的可自己修改成其它颜色，整体效果不错，挺简单的网站导航。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/jquery-blue-2level-nav-style-codes/ 具体代码如下： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=gb2312"titlecss+jquery打造二级横向菜单/titlestyle type="text/css" /#droplinebar {overflow: hidden;}.droplinebar ul{margin: 0;padding: 0;float: left;width: 100%;font: bold 14px Arial, Helvetica, sans-serif,微软雅黑;text-align:center;background: #006b96 url(images/blueactive.gif) center center r……

相信这个功能大家平时上网经常能碰到，以前也没怎么留意怎么实现的，直到项目中需要。 最终效果： 网上一搜一大堆，单纯使用js方法也不是没有，但是由于各浏览器的安全机制不同，不是跨浏览器的。去看了几个常用的网站，都是用的透明flash遮挡“复制到剪贴板”按钮，所以当你点击“复制到剪贴板”的时候，点击的其实是flash，然后把你需要复制的内容传入到了flash，然后在通过flash的复制功能把传入的内容复制到了剪贴板。 加载 JQuery库和zclip插件 script type="text/javascript" src="js/jquery-1.8.1.min.js"/script script src="js/jquery.zclip.min.js"/script 下面是一个小demo，主要是复制文本框中的链接到剪贴板。 HTML input type="text" value="www.jb51.net" id="link" span id="copyBtn"复制链接/span 然后加入 脚本 script $('#copyBtn').zclip({ path: "ZeroClipboard.swf", copy: function(){ return $('#link').val()……

本文实例讲述了jQuery简单入门示例之用户校验。分享给大家供大家参考，具体如下： jQuery在小编的世界中，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库，百度百科对JQuery的介绍比较详细，小伙伴可以东东自己可耐的小爪子，上网进行搜索，说不定，有意外惊喜哦，今天这篇文章，小编简单的介绍一下JQuery的一些基本知识，然后小编在集合实例，讲解一下在具体的应用过程中，我们的JQuery又是如何在她的舞台熠熠生辉...... 通过JQuery的学习，我们可以学到哪些知识nie，比如我们会学会JQuery的API函数的使用，以及简单的实例的实现方法还有一些html、css、js的小知识，作为明星级的框架JQuery，都有谁在使用nie，比如我们熟悉的Goole、IBM、ORACLE、DELL、土豆等等，都在使用JQuery做前端的开发，我们的JQuery是不是很火爆。 介绍完了JQuery的一些基本知……

效果呈现 整个列表间隔设定的时间向上移动一个item的高度 html结构： div class="slide-title" spantitle1/span spantitle2/span spantitle3/span /div div class="slide-container"!--css设置时，注意高度是显示多少个item,如：item的高度是30px，显示3个，高度则是 3*30 = 90px -- ul class="slide-list js-slide-list" li class="odd"spanitem1/spanspanitem1/spanspanitem1/span/li li class="even"spanitem2/spanspanitem2/spanspanitem2/span/li li class="even"spanitem2/spanspanitem2/spanspanitem2/span/li /ul /div 实现思路： 获得js-slide-list下第一个li元素的高度，对它的height或marginTop进行一个从有到无的动画变化，代码如下： var doscroll = function(){ var $parent = $('.js-slide-list'); var $first = $parent.find('li:first'); var height = $first.height(); $first.animate({ height: 0 //或者改成： marginTop: -height + 'px' }, 500, function() {// 动画结束后，把它插到最后，形成无缝 $first.css('height', heig……