当前访客身份：游客 [
：引用来自“i_cuit”的评论mark mark too...
：百度网盘失效了 楼主补发下吧？
：百度网盘下载不了源码了
：可拜师否？，
：引用来自“蟋蟀哥哥”的评论不错，thx。你也遇到...
：不错，thx。
今日访问：62
昨日访问：71
本周访问：62
本月访问：255
所有访问：60963
DOM中的元素位置和大小的计算方法，含jquery和dojo方法
发表于1年前( 23:51)&&
阅读（451）&|&评论（）
0人收藏此文章,
写在这里为了增强记忆，方便以后的查询。
原生维度属性
DOM中设计到位置和大小的几个作用在Element上的属性有下面一个列表。按照DOM标准，它们应该如下。但不同的浏览器会存在差异。
元素上外边框距离包含它的定位元素(offsetParent)或根节点的上内边框距离。
offsetLeft
元素左外边框距离包含它的定位元素(offsetParent)或根节点的左内边框距离。
offsetWidth
元素的左右边框宽度+左右内边距+内容区width
offsetHeight
元素的上下边框宽度+上下内边距+内容区height
offsetParent
包含元素的最近的已经定位元素，如果没有则为null.
元素上边框宽度
clientLeft
元素左边框宽度
clientWidth
左右内边距+内容区width
clientHeight
上下内边距+内容区height
内容区隐藏在可见区域以外，距离最高内边框的长度。可通过写来改变滚动条位置。(body例外）
scrollLeft
内容区隐藏在可见区域以外，距离最左边内边框的距离。（body例外）
scrollWidth
滚动区域的内容的宽度，可能会超过clientWidth
scrollHeight
滚动区域的内容的高度，可能会超过clientHeight
innerWidth
浏览器视窗的宽度
innerHeight
浏览器视窗的高度
根据上面的表格，如果想计算一个element上外边框距离document最顶端的距离，应该用下面的计算方法：
var distance=e.offsetT //元素外边框距离父元素内边框距离
var parent=e.offsetP
while(parent){
distance += parent.clientT //加上父元素边框宽度
distance += parent.offsetT //加上父元素外边框到下个包含元素内边框距离
parent = parent.offsetP
上面没有考虑一种非常稀有的案例，就是在body上设置了margin和border。这种情况非常少见，但如果真出现了，则必须注意。上面的code无法在所有的浏览器中工作。例如，chrome的body子元素的offsetTop是子元素到document最外边界的距离，body的margin，border都已经被算在其中，然而firefox则相反。
获取一个元素的内容区高度，应该使用：
var height = element.clientHeight&element.scrollHeight ? element.clientHeight : element.scrollH
因为任何元素均可通过设置overflow来设置滚动条，所以任何元素均可设置scrollTop来使其滚动条滚动。 但最常见的还是根节点的scrollTop。因为大部分网页都只在最外层存在着一个滚动条。
最外层的滚动条位置的获取与设置在不同的浏览器不同：
FF+IE: document.documentElement.scrollTop
Chrome: document.body.scrollTop
元素坐标存在两种：
以document最左上顶点为原点。获取元素在整个document中的位置。
以浏览器视窗（viewport)最左上顶点为原点。获取元素在视窗中的位置。
第一种坐标用于设置滚动条，例如，将滚动条滚动到element正好出现的位置。获取坐标的函数如下：
function getPositionInDoc(element) {
var position = {};
position.offsetY = (function(e){
var distance=e.offsetT
var parent=e.offsetP
while(parent){
distance += parent.clientT
distance += parent.offsetT
parent = parent.offsetP
})(element);
position.offsetX = (function(e){
var distance=e.offsetL
var parent=e.offsetP
while(parent){
distance += parent.clientL
distance += parent.offsetL
parent = parent.offsetP
})(element);
将滚动条滚动到某个元素位置：
// chrome:
document.body.scrollTop = getPositionInDoc(element).offsetY;
// FF and IE:
document.documentElement.scrollTop = getPositionInDoc(element).offsetY;
第二种坐标是在浏览器视窗(viewport)的位置，这类坐标用于实现popup. 浏览器提供了一个方法getBoundingClientRect()。通过此方法可以获得元素坐标：
// rect = {
top: 元素上外边框距离视窗顶部的距离, 负值表示上外边框超出了视窗上边界。
bottom：元素下外边框距离视窗顶部的距离, 可以为负值。
right: 元素右外边框距离视窗左边的距离, 可以为负值。
left: 元素左外边框距离视窗左边的距离, 可以为负值。
var rect = element.getBoundingClientRect();
可以通过第二种坐标，推导第一种坐标，而不需要再用循环的方式计算：
offsetY = rect.top + document.documentElement.scrollT
offsetX = rect.left + document.documentElement.scrollL
反之也可。
$.fn.width(/*optional*/ value)
获取或设置width
$.fn.innerWidth()
获取width+padding
$.fn.outerWidth(/*boolean*/includeMargin)
获取width+padding+border (+margin)
$.fn.height(/*optional*/ value)
获取或设置height
$.fn.innerHeight()
获取height+padding
$.fn.outerHeight(/*boolean*/includeMargin)
获取height+padding+border (+margin)
$.fn.offset(/*optional*/ coordination)
获取元素相对于document的位置或移动元素到相应位置
$.fn.scrollLeft(/*optional*/ value)
获取或设置scrollLeft
$.fn.scrollTop(/*optional*/ value)
获取或设置scrollTop
使用jQuery获取元素的高和宽非常简单，下图是从w3上获取的，此图解释了$.fn下的6个方法的含义
此外，如果想获取document的高度和宽度，则可以使用$(document).width() 和 $(document).height().
如果想获取视窗的大小，则可以使用$(window).width() 和 $(window).height().
获取元素在document中的坐标非常简单，只需要调用$(element).offset(). 此方法将返回{top, left}. 还可以使用offset({top, left})的方式，设置element的位置。element将会被设置position:relative.
获取元素在视窗(viewport)中的坐标, 则可以直接使用原生的getBoundingClientRect()。
获取scrollTop, scrollLeft和设置scrollTop，scrollLeft的方法
var scrollTop = $(document).scrollTop();
$(document).scrollTop(200); // scroll to 200px.
var scrollLeft = $(document).scrollLeft();
$(document).scrollLeft(100); // scroll to 100px.
dojo/dom-geometry
在dojo下，获取元素的位置和大小是由模块dojo/dom-geometry完成的，其几个常用方法：
position(node, includeScroll)
当includeScroll为true时，返回相对于document的坐标， false则返回相对于视窗viewport的坐标。
返回值：{ w: 300: h: 150, x: 700, y: 900, }
w：width+padding+border
h: height+padding+border
x,y为左上角外边框交点的坐标。
docScroll()
返回值 {x: 10, y:10}
获取document滚动值。
其它更详细方法
可以参见dojo api
dojo/window
而在模块dojo/window下，存在着关于viewport的方法：
获取视窗viewport的大小。宽度和高度。
返回值 {w: 100px, h:200px}
scrollIntoView(node)
将滚动条滚动到node能显示出来的位置。
使用方法如下：
require(['dojo/window', 'dojo/dom-geometry'], function(win, geom) {
var box = win.getBox();
var position = geom.position(element,false);
1)">1)">1" ng-class="{current:{{currentPage==page}}}" ng-repeat="page in pages"><li class='page' ng-if="(endIndex<li class='page next' ng-if="(currentPage
相关文章阅读GreenSock | jquery.gsap.js
Version: 1.16.0 updated
Download zip
Copy/paste this code into your HTML:
&script src="/ajax/libs/gsap/1.16.1/TweenMax.min.js"&&/script&
Lightweight
By using GreenSock code, you agree to the .
HTML5 / JSFlash
jquery.gsap.jsGood news for anyone using
- the new jquery.gsap.js plugin allows you to have
take control under the hood so that your anima no need to change any of your code. Plus GSAP adds numerous capabilities, allowing you to tween colors, 2D transforms (rotation, scaleX, scaleY, skewX, skewY, x, y), 3D transforms (rotationX, rotationY, z, perspective), backgroundPosition, boxShadow, and lots more. You can even animate to a different className!
This plugin makes it very easy to audition GSAP in your project without needing to learn a new API. We still highly recommend learning the regular GSAP API because it's much more flexible, robust, and object-oriented than jQuery.animate(), but for practical purposes this plugin delivers a bunch of power with almost zero effort.
Up to 20x faster than jQuery's native animate() method. See the interactive
for yourself.
Works exactly the same as the regular
method. Same syntax. No need to change your code. Just load the plugin (and TweenMax or TweenLite & CSSPlugin) and you're done.
Adds the ability to animate additional properties (without vendor prefixes):
colors (backgroundColor, borderColor, color, etc.)
2D transforms like rotation, scaleX, scaleY, x, y, skewX, and skewY, including 2D transformOrigin functionality
like rotationY rotationX, z, and perspective, including 3D transformOrigin functionality
(without the need to define each corner and use browser prefixes)
className which allows you to define a className (or use “+=” or “-=” to add/remove a class) and have the engine figure out which properties are different and animate the differences using whatever ease and duration you want.
backgroundPosition
Animate along Bezier curves, even rotating along with the path or plotting a smoothly curved Bezier through a set of points you provide (including 3D!). GSAP’s
system is super flexible in that it’s not just for x/y/z coordinates – it can handle ANY set of properties. Plus it will automatically adjust the movement so that it’s correctly proportioned the entire way, avoiding a common problem that plagues Bezier animation systems. You can define Bezier data as Cubic or Quadratic or raw anchor points.
Add tons of easing options including proprietary SlowMo and SteppedEase along with all the industry standards
When animating the rotation of an object, automatically go in the shortest direction (clockwise or counter-clockwise) using shortRotation, shortRotationX, or shortRotationY
For a detailed comparison between jQuery and GSAP, check out the .
the files (requires version 1.8.0 (or later) of TweenMax or TweenLite!) and then add the appropriate script tags to your page. The plugin file (jquery.gsap.min.js) itself does NOT include GSAP because you get to choose which files you want to load depending on the features you want. The simplest way to get all the goodies is by loading TweenMax (which includes TweenLite, CSSPlugin, TimelineLite, TimelineMax, EasePack, BezierPlugin, and RoundPropsPlugin too). For example, assuming you put the TweenMax.min.js file into a folder named "js" which is in the same directory as your HTML file, you'd simply place the following code into your HTML file:
All the goodies:
&script src=&js/TweenMax.min.js&&&/script&
&script src=&js/jquery.gsap.min.js&&&/script&
If, however, you're more concerned about file size and only want to use TweenLite, CSSPlugin (for animating DOM elements), and some extra eases, here is a common set of script tags:
Lightweight:
&script src=&js/plugins/CSSPlugin.min.js&&&/script&
&script src=&js/easing/EasePack.min.js&&&/script&
&script src=&js/TweenLite.min.js&&&/script&
&script src=&js/jquery.gsap.min.js&&&/script&
Then, to animate things, you can use the regular
method like this:
//tween all elements with class &myClass& to top:100px and left:200px over the course of 3 seconds
$(&.myClass&).animate({top:100, left:200}, 3000);
//do the same thing, but with a Strong.easeOut ease
$(&.myClass&).animate({top:100, left:200}, {duration:3000, easing:&easeOutStrong&});
//tween width to 50% and then height to 200px (sequenced) and then call myFunction
$(&.myClass&).animate({width:&50%&}, 2000).animate({height:&200px&}, {duration:3000, complete:myFunction});
for details about the syntax and options available with the animate() method. And yes, the
method works too.
If you define any of the following in the animate() call, it will revert to the native
method in order to maximize compatibility (meaning no GSAP speed boost and no GSAP-specific special properties will work in that particular call):
function - providing the parameters to the callback that jQuery normally does would be too costly performance-wise. One of the biggest goals of GSAP is o We'd strongly recommend NOT using a "step" function for that reason. Instead, you can use an onUpdate if you want a function to be called each time the values are updated.
Anything with a value of "show", "hide", "toggle", "scrollTop" or "scrollLeft". jQuery handles these in a unique way and we don't want to add the code into CSSPlugin that would be required to support them natively in GSAP.
If skipGSAP:true is found in the "properties" parameter, it will force things to fall back to the native jQuery.animate() method. So if a particular animation is acting different than what you're used to with the native jQuery.animate() method, you can just force the fallback using this special property. Like $(".myClass").animate({scrollTop:200, skipGSAP:true});
This is our first crack at a jQuery plugin, so please let us know if anything breaks or if you have ideas for improvement.
| You can read docs and search tutorials all day, but nothing is going to beat 2 days of access to the GreenSock employee who literally wrote the book on how to use GSAP.
“ Go and browse through FWA or Awwwards, then view source of anything you see that has cool animation and you will be surprised how widely GSAP is used. ” John Polacek“ I think I love GreenSock as much as bacon. ” Nick Zwinggi“ It's shocking the @w3c didn't use @greensock as a model of how to do animation via code. Did they even ask animators what they use? ” Elliot Geno, @ElliotGeno“ Honestly think without TweenMax, I'd of ch it's that good. ” James Stone, @mimeartist“ GSAP makes my job fun, because it allows me to focus on creating rich, engaging web experiences, while GSAP handles much of the implementation details behind the scenes. ” Tim Jaramillo“ If every library were as robust and reliable as GreenSock’s, the world would be a much better place for software engineers and their clients.
I can't think of a better designed or better performing tool, and as a bonus, it's fun as heck to play with. ” Thomas Summerall “ GSAP was a revelation for me to be compared with the introduction of jQuery ” Jan Paepke, @janpaepke“ Really quite impressed with @GreenSock JS - even the small things. ” Joseph Labrecque, ?@JosephLabrecque
Get an all-access pass to premium plugins, offers, and more!
sign upYour information will always be kept confidential.
Help support GreenSock by becoming a member$(".update_1").poshytip('destroy');
$('.update_1').poshytip({
content: updatecountdiv,
className: 'tip-yellowsimple-update',
showOn: 'none',
alignTo: 'target',
alignX: 'right',
alignY: 'right',
offsetY: -25,
offsetX: -13,
liveEvents: true
$('.update_1').poshytip('show');
增强用户粘性，jquery制作拉出内容的面板
时间就是金钱 ，当前时间：
日期： 14:08:29 来源：
& & & & 当用户进入你的网站的时候，作为站长肯定想方设法想让用户停留多回网站，多看点文章，希望更多的用户来感受到自己网站的魅力，努力让新来的用户成为常客，这个时候，你不得不去找些来吸引用户的注意力。& & & &借此契机，我特意去找了相关的回来，最终找到了一个挺实用的回来分享给大家，希望大家能够喜欢。& & & &让我来简单介绍这个jquery文章推荐插件吧，当用户差不多把文章拉到最底下的时候，文章从右往左弹出一个层，用于显示推荐文章或者相关文章，这里用户可以自定义了。另外还有一点要提的是，在这个层的右上角有展开和关闭两个按钮，其中展开的按钮能够全屏的显示文章，让用户看到更多的推荐文章，关闭则是顾名思义的把这个推荐层给关闭咯。&&&$(function()&{
//当前窗口的宽度和高度
var&window_w&
=&$(window).width();
var&window_h&
=&$(window).height();
//主层的div
var&$pc_panel&=&$('#pc_panel');
//封装层和内容的层
var&$pc_wrapper
=&$('#pc_wrapper');
var&$pc_content
=&$('#pc_content');
var&$pc_slider
=&$('#pc_slider');
//引用层-当滚动到此元素的时候，则触发滑动层出来
var&$pc_reference&
=&$('#pc_reference');
var&maxWidth,maxHeight,marginL;
buildPanel();
function&buildPanel(){
$pc_panel.css({'height':&window_h&+&
'px'});
hidePanel();
&//此处我怕翻译得不好，所以不删除英文了
//we&want&to&display&the&items&in&a&
//we&need&to&calculate&how&much&width&
and&height
//the&wrapper&should&have.
//we&also&want&to&display&it¢ered,&
so&we&need&to&calculate
//the&margin&left&of&the&wrapper
//First,&lets&see&how&much&of&height:
//maxHeight&=&Math.floor((window_h-
20)/135)*135;
//20&=&&pc_titles&height
//135&=&&125&of&each&items&height&plus&
its&margin&(10)
&&&&&&&&&&&&&&&&&&&&
//我们期望在表格里显示推荐文章项。
//我们需要计算出封装层需要多大的宽度和
//我们想让它居中显示，因此我们需要计算
出封装层的margin-left&的数值
//首先，让我们来看下需要多少高度：
//maxHeight&=&Math.floor((window_h-
20)/135)*135;
//20是指&pc_titles&的高度
//135是指每篇推荐文章的高度（120）加上&
margin&（10）
&&&&&&&&&&&&&&&&&&&
maxHeight&=&Math.floor
((window_h-20)/135)*135;
//maxWidth&=&Math.floor((window_w-
35)/220)*220;
//220&=&item&width&+&margins&(left&and&
//220&等于每项的宽度加上边缘宽度&（左边
maxWidth&=&Math.floor
((window_w-35)/220)*220;
marginL&&=&(window_w&-&
maxWidth)/2;
$pc_wrapper.css({
'width'&:&
maxWidth&+&20&+&'px',
'height':&
maxHeight&+'px',
'margin-left'&:&marginL&+&
'px'
//初始化滑动层
$pc_slider.slider('destroy');
}catch(e){}
//total_scroll&就是我们所能够滚动的数目
var&total_scroll&=&$pc_content.height
//添加滑块到内容的div里
//在推荐层展开之前先隐藏它
if(total_scroll&&&0){
$pc_slider.slider({
orientation:&
'vertical',
:&total_scroll,
total_scroll,
function(event,&ui)&{
$pc_wrapper.scrollTop(Math.abs(ui.value-total_scroll));
'height':&
maxHeight&-40&+&'px',//40&extra
'left':&
maxWidth&+&20&+&marginL&+&'px',
'top':&30&+&
20&+&'px',
//30&=&20&of&title&+&10&
margin,&20&extra
'display':&
'none'
//the&panel&gets&positioned&out&of&the&
//and&ready&to&be&slided&out!
//这个推荐层的定位和是否被滑动要看窗口的情况，
function&hidePanel(){
//165&=&&20&pc_title&+&120&item&+&
$pc_panel.css({
'right':&-window_w&+&'px',
'top':&window_h&-&165&+&'px'
}).show();
//在开始的时候定位滑块的位置
slideTop();
}catch(e){}
$pc_slider.hide();
$pc_panel.find('.collapse')
.addClass('expand')
.removeClass('collapse');
//重置滑块到顶部
function&slideTop(){
var&total_scroll&=&
$pc_content.height()-maxH
$pc_wrapper.scrollTop(0);
$pc_slider.slider('option',&'value',&
total_scroll&);
$(window).bind('scroll',function(){
When&we&reach&the&element&pc_reference,&
we&want&to&show&the&panel.
Let's&get&the&distance&from&the&top&to&
the&element
/当我们到达pc_reference的这个元素的时候
，我们讲显示这个推荐层。
&让我们获取这个元素的距离吧。
var&distanceTop&=&$pc_reference.offset
().top&-&window_h;
if($(window).scrollTop()&&&
distanceTop){
if(parseInt($pc_panel.css
('right'),10)&==&-window_w)
$pc_panel.stop
().animate({'right':'0px'},300);
if(parseInt($pc_panel.css
('right'),10)&==&0)
$pc_panel.stop
().animate({'right':&-window_w&+&'px'},300,function(){
hidePanel();
}).bind('resize',function(){
//on&resize&calculate&the&windows&
dimentions&again,
//and&build&the&panel&accordingly
//重新调整并计算出当前窗口的尺寸
//并由此建立出推荐层出来
window_w&=&
$(window).width();
window_h&=&
$(window).height();
buildPanel();
//when&clicking&on&the&expand&button,
//we&animate&the&panel&to&the&size&of&the&
//reset&the&slider&and&show&it
//当我们点击展开的按钮的时候，我们将看到推荐层
动态的占满整个窗口，
//同事要重置滑块并且显示它
$pc_panel.find('.expand').bind
('click',function(){
var&$this&=&$(this);
$pc_wrapper.hide();
$pc_panel.stop().animate
({'top':'0px'},500,function(){
$pc_wrapper.show();
slideTop();
$pc_slider.show();
$this.addClass
('collapse').removeClass('expand');
//clicking&collapse&will&hide&the&slider,
//and&minimize&the&panel
//点击折叠的时候我们将隐藏滑块和缩小推荐层
$pc_panel.find('.collapse').live
('click',function(){
var&$this&=&$(this);
$pc_wrapper.hide();
$pc_slider.hide();
$pc_panel.stop().animate
({'top':window_h&-&165&+&'px'},500,function(){
$pc_wrapper.show();
$this.addClass
('expand').removeClass('collapse');
//点击关闭我们将隐藏推荐层
$pc_panel.find('.close').bind('click',function
$pc_panel.remove();
$(window).unbind('scroll').unbind
('resize');
//mouse&over&the&items&add&class&&selected&
//鼠标经过文章的时候将添加类“selected”
&&&&&&&&&&&&&&&&$pc_wrapper.find('.pc_item').hover(
function(){
$(this).addClass('selected');
function(){
$(this).removeClass('selected');
).bind('click',function(){
window.open($(this).find
('.pc_more').html());
注册仅几秒，作品伴一生。本站注册只为大家能把喜欢的作品进行收藏以供后用
相关文章推荐
绚丽的文字特效-lettering个性化文字排版
本次介绍的插件叫Lettering.js，是一个十分轻量的，
/news/9/jquery-lettering-plugin
图片走廊，展现图片之美-fancybox图片查看器
fancyBox是一个能够给图片，html内容和多媒体内容提
/news/10/jquery-fancybox-plugin
JQuery-fullscreen图片全屏并保持宽高比例的背景图
您可否曾经想过在您的网站上有一副时常 能填满屏幕而又能保持宽
/news/11/jquery-fullscreen-plugin
展示各类文件用这个，lightbox又一新作
今天为大家介绍的是又一个效果炫目的LightBox插件。 此
/news/12/jquery-lightbox-eachfiletype
Easy Image Zoom_一款轻量的图像缩放插件
功能简介：
1.鼠标放到略缩图上，图片放大。
/news/51/jquery-plugin-easy-image-zoom
代替传统的checkbox样式的jquery插件
本次介绍的jquery插件是将完全代替默认浏览器的表单che
/news/53/check-box-jquery-plugin
diagonalFade-轻松定制淡入淡出效果的JQuery插件
今天为大家介绍的是一款名为diagonalFade的jque
/news/55/diagonal-fade-jquery-plugin
jrumble-让元素动起来的插件
本次给大家介绍的是一款能让HTML震动，旋转，闪烁等效果的J
/news/56/jrumble-jquery-plugin
imageLens-为图片添加镜头放大效果
今天为大家介绍的是一款能为图片添加镜头放大效果的JQuery
/news/57/image-lens-jquery-plugin
一款效果很棒的JQuery标签输入插件
您可曾在您的网站上使用标签来组织内容？本次介绍的jquery
/news/58/jquery-tags-input-plugin
easyslider-jquery滑动插件，轻松实现幻灯片效果
今天为大家分享的是一款用于图片轮播的jquery插件，它配置
/news/59/easy-slider-jquery-plugin
JQuery-Countdown-倒计时插件
您在一些网站上可能会遇到这种情景，当想下载某个文件的之前，会
/news/60/jquery-count-down-plugin
jquery基础教程-如何用jquery创建一个确认对话框
我们继续来做出我们自定义的浏览器插件。今天我们将要制作一个跨
/news/61/jquery-create-confirm-dialog
jquery基础教程-如何创建一个自动播放的幻灯片
在一个网站上，其中一个迫切要改进的技能，当涉及到幻灯片的时候
/news/64/jquery-make-auto-advancing-slideshow
如何使用jquery+css制作谷歌圣诞涂鸦
还有大半个月就到圣诞节了，在如此盛大的节日里，我想谷歌不会错
/news/67/google-christmas-doodle
使用jquery制作缩略图预览滑块
本次教程我们将为大家展现如何用JQuery插件来创建和使用缩
/news/68/jquery-thumbnails-preview
jquery图片处理实例-轻松实现图片情景的切换
jquery图片特效?的效果在之前的jquery插件?
/news/74/jquery-create-before-and-after-photo
非凡的效果，jquery菜单也能这么做
今天给大家介绍的jquery插件是在网站上必不 可少的jqu
/news/78/create-a-cool-animated-menu
别以为人人都会用你的网站，jquery网站引导插件
全球每分每秒都有成千上万个新站公众于世，然而能够站得住脚的却
/news/80/jquery-intro-guide
jquery插件-论js遮罩效果的巧妙应用
传统的js遮罩层原理是在页面的最顶端上防止一个div，然而，
/news/81/jquery-overlay-like-effect
JQuery幻灯片之旋转的幻灯片
jquery幻灯片系列我在之前已经介绍了很多了，效果各有特色
/news/94/jquery-css3-slideshow-rotating
jquery悬停切换幻灯片（鼠标移动或点击）
今天我们要介绍的jquery插件是一款十分适合用于图片画廊，
/news/96/jquery-hover-slide-effect
酷站必备，一款十分赞的下拉框效果
一个网站如果一直使用html原生的控件样式，我想在这个Web
/news/97/jquery-custom-dropdown
酷站必备，一款十分赞的下拉框效果（续作）
昨天我发了一款juqery下拉框下拉框 的插件《酷站必备，一
/news/98/jquery-dropdown-width-font-and-pic
jquery插件之迷你舒适的幻灯片画廊
今天我为大家介绍如何创建一个简易而又不失华丽的jquery幻
/news/101/jquery-minimalistic-slideshow-gallary
jQuery制作控制图像展开重叠的滑块
今天为大家介绍的jquery插件的功能是如何使用jquery
/news/102/jquery-expand-stacked-images
jquery图片相册 适用于图片网站 提升用户交互
在本实例当中我们将创建一个能够跟用户互动的交互式
/news/103/jquery-photo-desk
jquery导航菜单之垂直风格导航菜单
jquery导航菜单是我们在建设网站的时候必须用到的模块，因
/news/106/jquery-vertical-menu
结合jQuery和VisualLightBox制作图片查看器
今天我要介绍的jquery插件当中是我们的网
站上常用的图
/news/108/jquery-with-visual-lightbox
jquery实现多功能组合框，小插件，多功能
下拉框的功能常见是用于选择项而已，然而在一些强调功能多样性的
/news/114/jquery-eComboBox-select-box-width-editing
jquery插件之实现苹果风格的CoverScroll的效果
本次介绍的是一款能够实现 Apple CoverFlow 风
/news/116/jquery-apple-style-converscroll
继续苹果风，仿mac os 中的导航菜单
之前介绍了不少有关苹果风格的jquery插件，今天我继续为大
/news/117/css-apple-mac-style-menu
jquery制作精美的评分插件
本实例给大家展示一个简易却又不失气派的jquery评分插件。
/news/118/jquery-rating-system
jquery制作精美的图片画廊，支持拖动图片
得益于CSS3变形的特性，我们可以在网页上使元素做出各种变化
/news/119/jquery-css3-rotatable-images
jquery插件之制作热点选项卡(热点和点击事件示例)
今天给大家介绍的jquery插件是如何使用jquery实现一
/news/120/jquery-hover-click-tab-control
ajax实现无刷新购物车功能
现今电子商务网站盛行，有独立资源的公司都恨不得自己另起炉灶建
/news/121/ajax-shoping-cart
js特效之响应式图片画廊
今天我想为大家介绍一个通过使用 Elastislide 来创
/news/122/js-responsive-image-gallery
jquery幻灯片--轻量级内容滚动插件
今天为大家介绍的js特效是一款明教FlexSlider的轻量
/news/128/jquery-flex-slider
jquery插件之实现传送带拖动效果插件
本jquery插件除了鼠标点击切换图片外，还能通过鼠标进行左
/news/129/jquery-slick-plugin
jquery插件之精美的倒计时特效jQuery Countdown
倒计时功能在很多抢拍网站或网购网站里是十分常用的js特效，为
/news/130/jquery-count-down
jquery相册插件，附带精美的过渡效果和缩略图导航
jquery幻灯片插件在本站中应该也有不少存货了了，然而，人
/news/132/jquery-smart-gallery
jquery插件之精美的自动新闻滚动列表
在很多新闻的网站里，总会有个自动滚动新闻的模块，首先是节省空
/news/133/jquery-vscroller
可拖动的高大上jquery幻灯片
今天我将要创建一个全屏展示图片和内容的表格的jquery插件
/news/135/jquery-draggable-images
jquery常用插件之下拉式登录插件
随着单页网站的流行，网页设计者们不得不将本来设计成几个页面的
/news/136/jquery-login-plugin
jquery插件之炫目易用的幻灯片
jquery幻灯片插件在网站上有很多种，今天我继续为大家介绍
/news/137/jquery-simple-slider
回归平凡，简易平实的jquery幻灯片插件
炫目多彩的jquery幻灯片我相信在我的网站上能找到不少，然
/news/138/jquery-crafty-slide
jquery气泡提示插件grumble.js
jquery提示插件在本网站上也有不少存货了，今天我再为大家
/news/139/jquery-grumble-js
使用jquery制作精美的下拉菜单
在本次教程中我们讲创造一款独一无二的下拉菜单。此jquery
/news/141/jquery-slide-down-box-menu
jquery特效之制作专业的下拉菜单
有一个富有吸引力的导航影响着浏览的用户是否停留长久，接下来的
/news/142/jquery-professional-menu
jquery制作小型婚礼祝福墙，so sweet
本次的作品是从博客园上看到的，博主的作品做的相当有特色，这是
/news/145/jquery-blessing-wall
jquery插件之精美的文字滑动效果
如今想吸引用户长期驻足你的网站的方法不多，要么内容新鲜及时，
/news/146/jquery-sliding-letters
jquery插件之鼠标悬停图片切换效果
今天为大家分享一款图片切换的过渡的效果，当我们使用鼠标在焦点
/news/147/jquery-item-blur
jquery插件分享之旋转的文字特效
今天为大家介绍的是一款能让咱们平时看上去十分普通的文本文字摇
/news/148/jquery-rotate-font
jquery插件之自定义提示插件noty
如今很多形形色色的SNS类的网站，会员的黏性很高，网站会员们
/news/152/jquery-noty-plugins
jquery实用插件之ajax分页插件
网站内容千变万化，种类繁多，但一个屏幕能够显示的内容却是有限
/news/153/jquery-ajax-jpages
JSShare致力于成为前端爱好者分享javascript,jquery,HTML5等前端知识的平台，提供优质的代码，让各位感受到代码之美，分享代码的乐趣。
copyright (C) 2013 powered
联系邮箱：
沪ICP备号-1
