[JS代码库]

阅读更多

所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合所有的图片下面都可以找到

将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

[javascript]
1、操作：javascript轮播

2、功能：可以讲多张图片按照自己规定的时间循环的播放出来里面有序号当要看第几张图片的时候就可以直接让那张图片播放出来

3、效果：在各大网站的首页上面都有一个轮播的广告的效果在上面一般都是在正中间主要的作用是一些活动和最新的咨询工作最直接的方法展示给用户看

下面是效果图片



下面是实现的代码分三个部分一个是html5 css 和 javascript

    
    


    
    

        

            

                

                    

                        

                            第1张图的描述信息
                        

                            第2张图的描述信息
                        

                            第3张图的描述信息
                        

                            第4张图的描述信息
                        

                            第5张图的描述信息
                        

                            第6张图的描述信息
                        

                            第7张图的描述信息
                        

                            第8张图的描述信息
                        

                            第9张图的描述信息
                        

                            第10张图的描述信息
                    
                
                

                    

                        
1
                        
2
                        
3
                        
4
                        
5
                        
6
                        
7
                        
8
                        
9
                        
10
                    
                
            
        
    
    

* { word-wrap: break-word; }
body { font: 12px/1.5 Tahoma,'Microsoft Yahei','Simsun'; color: #444; }
body, ul, li { margin: 0; padding: 0; }
    ul li { list-style: none; }
a { color: #000; text-decoration: none; }
    a:hover { text-decoration: underline; }
    a img { border: none; }
.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.cl { zoom: 1; }

.frame { margin-bottom: 10px; border: 1px solid #e1e1e1; background: #FFF; }
.title { padding: 0 10px; height: 32px; font-size: 14px; font-weight: 700; line-height: 32px; overflow: hidden; }

.block { margin: 10px 10px 0; }

.temp { margin: 1px; }

.slideshow { clear: both; }
    .slideshow li { position: relative; overflow: hidden; }
    .slideshow span.title { position: absolute; bottom: 0; left: 0; margin-bottom: 0; width: 100%; height: 32px; line-height: 32px; font-size: 14px; text-indent: 10px; }
    .slideshow span.title, .slidebar li { background: rgba(0,0,0,0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #30000000,endColorstr = #30000000); color: #FFF; overflow: hidden; }
.slidebar li { float: left; margin-right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 10px; cursor: pointer; }
    .slidebar li.on { background: rgba(255,255,255,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #50FFFFFF,endColorstr = #50FFFFFF); color: #000; font-weight: 700; }


ul, li { list-style: none; }
a:hover { text-decoration: underline; color: #a50001; }

.frame { background: none; border: 0px solid #fff; margin-bottom: 0px; }
.temp { margin: 0; }
.slidebar { position: absolute; top: 5px; left: 4px; }
    .slideshow span.title, .slidebar li { background: rgba(0,0,0,0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #90000000,endColorstr = #90000000); color: #FFF; overflow: hidden; }
        .slidebar li.on { background: rgba(255,255,255,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #90000000,endColorstr = #90000000); color: #ff0; font-weight: 700; }

.slideshow SPAN.title { text-indent: 0px; }
.block { margin: 0;position: relative; }
#frameHlicAe { margin: 0px !important; border: 0px !important; }
.comiis_wrap960, .comiis_wrapad { margin: 0 auto; width: 960px; }
.comiis_wrapad { margin-top: 10px; }
.comiis_wrapad { overflow: hidden; }
    .comiis_wrapad img { float: left; margin-top: 0px; }

#slidesImgs li { width: 960px; height: 230px; display: none; }

function SlideShow(c) {
    var a = document.getElementById("slideContainer"), 
    	f = document.getElementById("slidesImgs").getElementsByTagName("li"), 
    	h = document.getElementById("slideBar"), 
    	n = h.getElementsByTagName("li"), 
    	d = f.length, 
    	e = lastI = 0, 
    	j, 
    	m;
    function b() {
        m = setInterval(function () {
            e = e + 1 >= d ? e + 1 - d : e + 1;
            g(1)
        }, c)
    }
    function k() {
        clearInterval(m)
    }
    function g() {
        f[lastI].style.display = "none";
        n[lastI].className = "";
        f[e].style.display = "block";
        n[e].className = "on";
        lastI = e
    }
    f[e].style.display = "block";
    a.onmouseover = k;
    a.onmouseout = b;
    h.onmouseover = function (i) {
        j = i ? i.target : window.event.srcElement;
        if (j.nodeName === "LI") {
            e = parseInt(j.innerHTML,10) - 1;
            g()
        }
    };
    b()
}
;

[jQuery]

1、操作:jQuery hide() 方法

2、功能:隐藏显示的元素  这个就是 'hide()' 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。

3、效果:hide() 方法在默认的情况下是瞬间就会完成隐藏的这个视觉效果但是要是在hide(5000)方法里面添加数字的话就可以减缓效果的过程数字越大减缓的效果就越大隐藏是把整个元素隐藏起来那么其他元素就会占据隐藏掉的元素的位置个跟定位没有关系要是不定位的会一样会占据



这个是点击前的效果



点击完成后的效果点击了第一行

如果您点击我，我会消失。
点击我，我会消失。
也要点击我哦。

2、操作：jQuery图片鼠标悬停效果

1、效果及功能说明
鼠标悬停图片放大滑动显示标题

2、实现原理
首先是鼠标触及图片后对图片的进行放大多少的设置 在将要花多少时间来方法设定好 后定义图片不会因为放大而改变位置始终保持居中状态的放大和div不会因为图片的放大和标题的出现而变形 后是标题的设置一个显示的动画结合上图片放大的时间还有就是在鼠标移开后设置图片回复原状的时间和标题消失的动画时间的吻合

3、效果图



4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	

		

			

				
				

					
CofeeNerd
				
			
			

				
				

					
musiKings
				
			
			

				
				

					
The Caribbean Energy Conference 2010
				
			
			

				
				

					
Coffee
				
			
			

				
				

					
Quantum
				
			
			

				
				

					
Infinite Love
				
			
			

				
				

					
Fathom
				
			
			

				
				

					
Mixed Pome
				
			
			

				
				

					
Golf Lessons Online
				
			
		
		
		

		
	

3、操作：jquery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动

（1、效果及功能说明
仿新浪微博图片文字列表上下淡进淡出间歇上下滚动

2、实现原理
首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行

3、效果图



4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	
jquery仿新浪微博图片文字列表间隙滚动淡进淡出滚动

	

		

			

				
				
round
				
Nov 29th 2008 by neue
			
			

				
				
reflet
				
Nov 29th 2008 by neue
			
			

				
				
Kate Moross Little Big Planet
				
Nov 29th 2008 by neue
			
			

				
				
Untitled
				
Nov 29th 2008 by mike1052
			
			

				
				
My Tutorial's Library
				
Nov 29th 2008 by FrancescoOnAir
			
			

				
				
Sandy — your free
				
Nov 29th 2008 by John Doe
			
			

				
				
Sandy — your free
				
Nov 29th 2008 by John Doe
			
			

				
				
Sandy — your free
				
Nov 29th 2008 by John Doe
			
			

				
				
Values of n Blog
				
Nov 29th 2008 by John Doe
			
		
	
	  

4、操作：jquery图片冒泡插件鼠标悬停图片冒泡动画展示

1、效果及功能说明
图片冒泡插件鼠标悬停图片冒泡动画展示

2、实现原理
首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

代码

(function($){
	$.fn.bubbleup = function(options) {
		var opt = $.extend({}, $.fn.bubbleup.defaults, options),tip = null;
		
		return this.each(function() {
			var w=$(this).width();
			$(this).mouseover(function(){
				if(opt.tooltip) {
					tip = $('
' + $(this).attr('alt') + '
').css({
						fontFamily: opt.fontFamily,
						color: opt.color, 
						fontSize: opt.fontSize, 
						fontWeight: opt.fontWeight, 
						position: 'absolute', 
						zIndex: 100000
					}).remove().css({top:0,left: 0,visibility:'hidden',display:'block'}).appendTo(document.body);
					var position = $.extend({},$(this).offset(),{width:this.offsetWidth,height:this.offsetHeight}),tipWidth = tip[0].offsetWidth, tipHeight = tip[0].offsetHeight;
					tip.stop().css({
						top: position.top - tipHeight, 
						left: position.left + position.width / 2 - tipWidth / 2,
						visibility: 'visible'
					}).animate({top:'-='+(opt.scale/2-w/2)},opt.inSpeed); 
				}
				
				$(this).closest('li').css({'z-index':100000});
				
				$(this).stop().css({'z-index':100000,'top':0,'left':0,'width':w}).animate({
					left:-opt.scale/2+w/2,
					top:-opt.scale/2+w/2,
					width:opt.scale
				},opt.inSpeed);
			}).mouseout(function(){
				
				$(this).closest('li').css({'z-index':100});
				$(this).closest('li').next().css({'z-index':0});
				$(this).closest('li').next().css({'z-index':0});
				$(this).closest('li').next().children('img').css({'z-index':0});
				
				if(opt.tooltip){tip.remove()}
				$(this).stop().animate({left:0,top:0,width:w},opt.outSpeed,function(){
					$(this).css({'z-index':0});
					
				});
			})
		})
	}
	$.fn.bubbleup.defaults = {
		tooltip: false,
		scale:96,
		fontFamily:'Helvetica, Arial, sans-serif',
		color:'#333333',
		fontSize:12,
		fontWeight:'bold',
		inSpeed:'fast',
		outSpeed:'fast'
	}
})(jQuery);

5、操作：jquery图片九宫格样式布局图片切换

1、效果及功能说明
图片九宫格样式布局通过鼠标滑过缩略图进行大小图片切换展示

2、实现原理
通过伪类方法来触发鼠标触及效果触及效果包括，当鼠标移动到小图片上会让背景颜色变亮来告诉用户当前的触及的图片是那张后，当鼠标触及到小图片后触发将触及到的小图片移动到大的div里面并且获得本张图片的路径，做一个放大的效果让图片适应新div的大小的事件后显示出来

3、效果图



4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

  
  
  
  
  
  
  
  
  
  
  
  
  
    
  
          
        
  
        
量变到质变：寻找你的健康Style
  
    
  
  
    
  
        
  
            
  
                  
                
  
            
  
            
  
                  
                
  
            
  
            
  
                  
                
  
            
  
        
  
          
        
  
            
  
                
  
                      
                    
  
                
  
                
  
                      
                    
  
                
  
            
  
              
            
  
              
            
  
                
  
                      
                    
  
                
  
                
  
                      
                    
  
                
  
                
  
                      
                    
  
                
  
            
  
        
  
  
    
  
      
    
  
      
  
  
  
  

6、操作：jquery 图片切换显示图片并且有左右按钮

1、效果及功能说明
图片切换显示隐藏show/hide带左右按钮与分页索引按钮控制图片显示隐藏

2、实现原理
首先是让图片在一个带有实现事件的div内显示出来，让其他图片进行隐藏，定义一个轮播的滚动效果结合时间上的控制，让图片在规定的时间里进行轮换，轮换掉的图片进行隐藏，定义按钮的点击事件让按钮点击后改变背景颜色或者是轮播完的按钮消除背景颜色，让按钮编号分别对应三张图片让点击几号按钮是显示哪张图片，在设定当鼠标没有点击和触碰图片或者按钮下多少秒后回复正常播放，在显示的div两侧的左右按钮上在定义一个点击事件，让这个事件带有可以马上轮播掉当前的图片，替换的图片是按照当前图片的左右来计算，在点击任何按钮后轮播停止，在过去3秒后从新开始轮播效果

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	
	
	

		
		
		
	
	
		123
	
	

		jquery colorpicker 插件颜色选择器 点击颜色选择颜色值与颜色相应变化
		jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3
		用div+css制作一个CSS3的泡泡动画按钮非常漂亮
	

7、操作：jquery 图像幻灯片上下滑动图片切换

1、效果及功能说明
图像幻灯片制作鼠标滑过缩略图显示相应的大图，让大图上下滑动切换，默认下图像幻灯片自动轮播

2、实现原理
自动切换小图片让大div获得切换小图片的路径让切换到的小图片能在大div里显示出来让图片定义一个2秒的动画效果让小图片通过动画的效果切换切换的小图片会有一个边框的样式改变来让用户知道现在是哪一张然后通过伪类来定义个鼠标触及的效果让鼠标触及到小图片动画停止大div里显示鼠标触及的小图片的放大版在鼠标离开小图片和大图片以后的2秒动画效果自动进行按照鼠标触及的小图片的位置继续往后切换图片

3、效果图 




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

8、操作：jquery 高仿2012淘宝商城多格子焦点图滚动切换

1、效果及功能说明
图片滚动切换特效，高仿2012淘宝商城首页多格子焦点图切换，鼠标滑过焦点图片各个格子区域聚光灯效果展示

2、实现原理
在显示div的下面有一个按钮条在鼠标触及到按钮的时候会改变那妞的背景颜色作为辨识，后给按钮定义一个点击事件，让点击按钮后显示出相对应的图片，在没有点击的图片的情况下自动运行滚动的动画效果，每张图片的切换时间是3秒在点击按钮或者鼠标触及到图片上动画停止当鼠标移开后3秒后启动动画每个图片有可以链接到不同的地址在其中还给包含多个图片在一个div里显示出来他们不是一体的只是在一个块级容器里，最后给图片定义个伪类当鼠标触及到图片后会改变图片的背景颜色来让用户更好的辨认

3、效果图



4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	
jquery高仿2012淘宝商城多格焦点图滚动切换
	

		

			

				

				
			
			

				

				

				

				

			
			

				

				

				

				

			
			

				

				

				

				

			
			

				

			
		
	

	

9、操作：jquery scroll图片滚动菜单鼠标移动图片滚动

1、效果及功能说明
scroll图片滚动菜单通过鼠标移动在图片上左右移动来控制左右图片滚动或左后图片滚动

2、实现原理
定义好显示div的高度和宽度将全部图片放进div里计算整体图片的宽度定义mousemove方法获得鼠标指针在页面中的位置，通过计算鼠标移动的位置和方法来让图片进行左右的移动当图片移动时多出div的图片将会被隐藏

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	

		

			
Menu
			
Navigation
			
jQuery
			
Scroll
			
Horizontal
			
jQuery
			
Menu
			
Navigation
			
Graceful
			
Degradation
			
Progressive
			
Enhancement
	
		
	
	

10、操作：jquery hover图片列表上下滚动显示图片详细内容

1、效果及功能说明

hover鼠标滑过案例或产品图片列表，图片向上滚动显示图片详细内容，鼠标离开图片内容向下滚动显示案例或产品图片

2、实现原理

设定原图的消失时间和后来图片的出现时间在定义一个伪类来触发这两个切换的效果在定义装有图片的div在div里的图片才能显示切换掉的图片会隐藏起来当鼠标移动开后原图回来原图移动时间是0.226秒切换图的显示时间是0.2秒

3、效果图



4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	

		
		

			
			
全聚德
			
类型：标准网站
			
全聚德通过网站很好的宣传了企业品牌。利用图片展示菜系，通过照片和描述介绍了用餐环境，留下完整的地点电话等,方便客户提前了解菜谱和用餐环境。
			
查看该产品查看案例
		
	
	

		
		

			
			
佳思特
			
类型：标准网站
			
佳思特很好的利用自己的官网，将公司业务领域和特色等清晰明确的写明。同时在公司介绍里展示自己的资质和实力，通过列举客户案例的方式也会提升企业竞争力。
			
查看该产品查看案例
		
	
	

		
		

			
			
佳思特
			
类型：标准网站
			
佳思特很好的利用自己的官网，将公司业务领域和特色等清晰明确的写明。同时在公司介绍里展示自己的资质和实力，通过列举客户案例的方式也会提升企业竞争力。
			
查看该产品查看案例
		
	
	

		
		

			
			
全聚德
			
类型：标准网站
			
全聚德通过网站很好的宣传了企业品牌。利用图片展示菜系，通过照片和描述介绍了用餐环境，留下完整的地点电话等,方便客户提前了解菜谱和用餐环境。
			
查看该产品查看案例
		
	

11、操作：jquery 仿麦包包商城图片滑动伸缩图片广告代码

1、效果及功能说明
仿麦包包商城网站首页全屏图片上下滑动伸缩图片广告代码，设置固定时间图片滑动伸缩的图片广告代码

2、实现原理

先获得显示div的宽度高度自由在将两个图片放到div里显示每次只显示一张图片隐藏时间为1秒下一张显示时间为1秒全部显示和隐藏的动画用时2.5秒内完成显示的div会跟着图片的大小来调节div的高度，所以高度是自由的没有显示出来的图片是处于隐藏的一个状态

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

12、操作：jquery 广告图片各大商城首页流行通栏广告图片

1、效果及功能说明
广告图片制作各大商城首页顶部通栏广告图片，默认下滑动展开广告图片大图，之后滑动收起展开广告小图

2、实现原理

定义图片隐藏图片和显示图片的时间1.5秒，在图片右上角的按钮上定义一定点击效果让点击了按钮后实现隐藏效果并在完全隐藏后显示原来图片的缩小版 缩小版全部显示出来后显示出另外一个按钮就是重播 在重播按钮上在定义一个点击效果这个效果是显示图片的效果当点击后原来的小图片会隐藏大图片会显示然后重播按钮隐藏，关闭按钮重新显示出来

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

13、操作：jquery 广告制作jQuery侧面浮动图片广告或滚屏图片广告

1、效果及功能说明
图片广告制作一个侧面浮动图片广告特效，类似滚屏效果的图片广告

2、实现原理

是先后获得页面的高度然后在获得装有图片的块级元素的高度计算页面的高度除于2在块级元素高度除于2把最后获得高度值赋值给块级容器让块级容器始终保持页面高度居中的效果在滚动页面时候通过定义一个动画的效果让广告在0.4秒内移动到当前页面高度的中间

3、效果图



4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	
	关闭广告



	
	关闭广告

14、操作：jquery 右侧边固定层导航菜单依次动画滑动显示菜单展开

1、效果及功能说明
右侧边固定层导航菜单，鼠标滑过浮动层导航菜单依次动画滑动显示菜单内容展开，鼠标离开后菜单收缩

2、实现原理

展开是通过计算鼠标触及装有a标签的div开始从0号a标签开始展开每个展开是0.2秒每一个之间的 这个效果不轮用户是从上面触及还是从下面触及都是从上面的0号开始展开到最后的
间隔是50*200 每个全部展开的时间是0.3秒

回收也是鼠标只要移动开会从最上面的a标签开始回收到最后

3、效果图



4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	0站长素材
	1书签切换
	2幻灯片
	3图片滚动-左
	4图片滚动-上
	5图片无缝滚动-左
	6图片无缝滚动-上
	7文字滚动-左
	8文字滚动-上
	9文字无缝滚动-左
	10文字无缝滚动-上
	11其它基础效果

15、操作：jquery 左侧列表导航条鼠标滑过flash动画导航条

1、效果及功能说明
导航菜单制作一个二级菜单导航条，鼠标滑过导航条二级菜单slide滑动展示且带有渐隐效果展示比较柔和的二级菜单目录

2、实现原理

先通过遍历匹配到每一个元素，这个是为了让所有的导航栏都可以获得显出相对因下拉框的效果，定义一个伪类事件让鼠标触及到导航栏后触发相对因的下拉框在给下拉框一个类这个类定义好了下拉框的样式，下拉框的出现是同意一个动画的效果来实现，时间为0.4秒内完成然后在定义一个方法在鼠标移开导航栏后下拉框在就直接清楚jquery给的类让下拉框消失这个也是一个动画效果来完成时间为0.3秒

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	
	
jquery导航条悬停效果
	

		
jquery flash动画导航条
		
网站首页
		
jquery 特效
		
javascript特效
		
flash特效
		
div+css教程
		
html5教程
	

	

16、操作：jquery 导航菜单二级菜单slide滑动渐隐显示

1、效果及功能说明
导航菜单制作一个二级菜单导航条，鼠标滑过导航条二级菜单slide滑动展示且带有渐隐效果展示比较柔和的二级菜单目录

2、实现原理

先通过遍历匹配到每一个元素，这个是为了让所有的导航栏都可以获得显出相对因下拉框的效果，定义一个伪类事件让鼠标触及到导航栏后触发相对因的下拉框在给下拉框一个类这个类定义好了下拉框的样式，下拉框的出现是同意一个动画的效果来实现，时间为0.4秒内完成然后在定义一个方法在鼠标移开导航栏后下拉框在就直接清楚jquery给的类让下拉框消失这个也是一个动画效果来完成时间为0.3秒

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

 



	

		

			
网站首页
			

				jquery代码
				

					
jquery图片特效
					
jquery导航菜单
					
jquery选项卡特效
					
jquery文字特效
				
			
			

				jquery图片特效	
				

					
jquery图片切换
					
jquery幻灯片
					
jquery图片滚动
					
jquery图片放大镜
					
jquery广告
					
jquery更多特效
				
			
			

				jquery导航菜单	
				

					
jquery动画菜单
					
jquery树形菜单
					
jquery下拉菜单
					
jquery右键菜单
					
jquery更多特效
				
			
			

				jquery选项卡特效
				

					
jquery选项卡切换
					
jquery滑动选项卡
					
jquery更多特效
				
			
			

				jquery文字特效	
				

					
jquery文字滚动
					
jquery文字闪烁
					
jquery文字切换
					
jquery文字数量
					
jquery文字改变
					
jquery更多特效
				
			
		
	

17、操作：jquery 左侧列表导航条鼠标滑过flash动画导航条

1、效果及功能说明

导航菜单插件制作当鼠标滑过显示二级下拉菜单目录子内容，这是一款轻量级的jquery菜单插件非常实用

2、实现原理

首先这个是一个个体的下拉框的效果实现，首先要定义出两个伪类来第一个是在鼠标触及到外面的a标签以后触发一个伪类这个伪类的方法里面包含有显示出下拉框的方法然后当鼠标移开外面的a标签时将会触发第二个伪类方法里面的删除类的方法，这样就实现了一个下拉框的展现和隐藏。

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	jquery特效
	

		
jquery图片特效
		
jquery导航菜单
		
jquery选项卡特效
		
jquery文字特效
		
jquery表单特效
		
jquery表格特效
	

18、操作：jquery 无缝滚动插件支持图片无缝滚动或文字无缝滚动

1、效果及功能说明

上下无缝滚动插件，可以任意配置图片上下无缝滚动和文字上下无缝滚动，当容器里面的高度未满时，图片或文字不进行无缝滚动

2、实现原理

首先是设定文字滚动的速度，然后设定每一行文字的高度，接下来来定义文字的自动滚动和当滚动完成一轮后新的文字从最下方出来最上的文字消失每次从下方出现设定为一条文字并且控制文字是从想下往上的滚动方式，最后在定义一个伪类当鼠标触及到文字时所有滚动效果停止，当鼠标离开文字后重新计算新的滚动时间并开始重新滚动的效果


3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	




	
jquery上下无缝滚动插件 列表溢出高度时 自动上下无缝滚动
	

		

			

				01
js图片左右无缝滚动用鼠标控制图片滚动
32万下载
			
			

				02
js无缝滚动制作js文字无缝滚动和js图片无缝滚动
32万下载
			
			

				03
jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作
32万下载
			
			

				04
javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动
32万下载
			
			

				05
 javascript滚动图片带按钮控制上下左右自动无缝滚动
32万下载
			
			

				06
jquery hover图片插件制作鼠标滑过标题单个展开图片效果
32万下载
			
			

				07
flash图片特效3D立体动画焦点图片切换带左右按钮控制滚动
32万下载
			
			

				08
js lazyload实现网页图片延迟加载特效
32万下载
			
			

				09
FlippingBook电子杂志书去版权,翻页图片全部外调 站长珍藏版
32万下载
			
			

				10
门户网站jquery广告控制flash或图片顶部广告显示隐藏
32万下载
			
		
	

19、操作：jquery 3D动画文字滚动标签云,鼠标光标定位上下文字滚动

1、效果及功能说明

3D动画文字滚动特效带标签云上下文字滚动，鼠标光标定位时上下文字滚动感应

2、实现原理

首先将在div定义一个可以辨识鼠标位置的方法比且获得鼠标的位置然后定义方法通过辨别鼠标的位置让里面的文字或向上滚动或向下滚动，定义滚动的速度和滚动的平率速度慢滚动就慢平率慢画面就会给用户一种很卡的感觉，在控制文字的层级关系让显示在最前面的文字保持最高层级和文字在滚动中的尺寸大小最前面的最大最后面的最小，还可以通过移动鼠标让滚动效果停止


3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	

		

			
PhP
			
jQuery
			
Magento
			
MySql
			
Js
			
HTML
			
CSS
			
Ajax
			
ThinkPHP
			
Apache
			
Linux
			
Python
			
web
			
xhtml
		
	

20、操作：jquery 霓虹灯文字效果

1、效果及功能说明

使用jQuery和CSS | jsfoot脚本特效 演示

2、实现原理

首先定义个计算毫秒的周期方法这个方法可以自行就行循环然后就开始判断因为在div里面有两个span标签图片有是同时放进两个里面在设完他们的层级关系以后，将第二个先进行隐藏，通过判断让第二个和第一个不断的进行互相的切换，第二张图也一直保持的距左以后其实我们看见的都是第二张图片不停的变化位置而带来的颜色的变化我们看到的外形都是第一张看见的颜色变换都是第二张图片的在相同的位置不断变化着自己的位置来带第一张图片字体颜色的变化


3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	Neon Text Effect With jQuery & CSS.
	
    

6、[css]

*{
	margin:0;
	padding:0;
}

body{
	font-size:14px;
	color:#ccc;
	background-color:#141414;
	font-family:Arial, Helvetica, sans-serif;
}

#neonText span{
	width:700px;
	height:150px;
	position:absolute;
	left:0;
	top:0;
	
	background:url('img/text.jpg') no-repeat left top;
}

span#version1{
	z-index:100;
}

span#version2{
	background-position:left bottom;
	z-index:99;
}


#neonText{
	height:150px;
	margin:180px auto 0;
	position:relative;
	width:650px;
	text-indent:-9999px;
}

7、[jquery]

$(document).ready(function(){
//定义个在页面加载完成后可激活所有函数的方法
	setInterval(function(){
	//定义以毫秒为计算单位的周期方法
		var versions = $('.textVersion:visible');
		//定义参数将textVersion选定中每个可见的元素
		if(versions.length<2){
		//判断versions的长度大于2
			$('.textVersion').fadeIn(800);
			//那么textVersion的淡入效果为800
		}
		else{
		//否则
			versions.eq(0).fadeOut(800);
			//就调用遍历设定淡出效果为800
		}
	},1000);
	//整体的一轮的效果变化时间为1000毫秒就是1秒钟
});

21、操作：jquery 文字特效制作文字鼠标滑过多彩色变色显示

1、效果及功能说明

文字特效制作文字鼠标滑过变色多彩色效果显示，颜色随机匹配变色显示，酷炫效果 

先设定好需要变化的几种颜色然后通过改变背景颜色的方法将不同的颜色匹配到不同的文字上去在创建一个伪类让得触发这个变化字体颜色的方法和取消

主要的方法

.bind("mouseleave", function()  
就是修改背景颜色告诉要修改是什么  
  
$(".colorize2").hover(function()  
这段就是如何触发修改通过一个伪类来触发  
  
var colors = ["#ff2e99", "#ff8a2d", "#ffe12a", "#caff2a", "#1fb5ff", "#5931ff", "#b848ff"]  
这就是告诉用户触发什么样的效果，7种颜色都用数组装好了  
  
var index = Math.floor(Math.random()*7)  
让文字可以随机获得里面的颜色每一个文字获得一种会出现重复  
  
color = (bracket_color.length && (text[i] == "(" || text[i] == ")")) ? bracket_color : colors[index]  
        colorized = colorized + '' + text.charAt(i) + ''  
当鼠标来回以后在两组字之间是，每个字都会发生变化  

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

(无图片)

5、代码[html5]

  
  
  
  
  
  
  
  
  
  
  
  
    
jQuery链接变色演示
  
      
      
    前端观察  
      
    
鼠标放上去会变色，嘿嘿！
  
  
  
  
  
  

22、操作：jquery 段落文字内容高亮显示提示

1、效果及功能说明

段落文字内容高亮显示一段主要文字内容提示。通过设置鼠标滑过段落标签，高亮显示此标签的内容含义信息


主要的方法

先定义三个伪类事件的触发，然后定义触发伪类的后需要的效果，在把这些效果分别设定当相印的触发条件里面去，效果是让不是主体的文字透明多少，在给主体的文字加上背景颜色和字体颜色的加深让用户更好知道字段文章的主要要说的是什么

主要的方法

maskSource.animate({opacity:0.7},1).fadeIn('750');   
var sample1 = $('span.d1');  
var sample2 = $('span.d2');  
var sample3 = $('span.d3');  
在定义出三个需要这样效果类  
  
$('a.d1').hover(function(){  
sample1.addClass('show');  
},function(){  
sample1.removeClass('show');  
    });  
这个方法就是说当鼠标触及后触发效果，鼠标移开后回复原状 

3、效果图





4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	

	
		

			
总结
			
阿凡达
			
格式
		
		
		

			
“阿凡达”Avatar（2009年电影）
			

				
				
“阿凡达”詹姆斯·卡梅隆的阿凡达，也被称为是美国的3-D科幻史诗电影编剧和导演詹姆斯·卡梅隆（James Cameron）由20世纪福克斯公司，并于2009年12月16日发布。这部电影是联合制作的Lightstorm娱乐, 和 集中在一个史诗般的潘多拉星球上的冲突,有人居住的地球大小的月亮的波吕斐摩斯，三个虚构的气态巨行星轨道的半人马座阿尔法星A的潘多拉，人类殖民者和众生的人形原居民，纳美人（潘多拉）之一，从事的战争在地球上的资源，而后者则继续存在。 这部电影的标题指的是 阿凡达, 表示在虚拟世界中的一个真正的人.
	
				
在2D和3D格式的影片上映, 随着IMAX 3D版本在选定的剧院。这部影片被吹捧为电影制作技术方面取得突破性进展，其开发的三维可视摄像头，专为电影的制作和立体电影制作。
				

			
		
		
	

23、操作：jquery checkbox 选中 取消

1、效果及功能说明

checkbox多选框点击事件控制显示隐藏 


主要的方法

点击打勾点击填写内容信息，会触发添加一个类，这个类能让下面的用户名和密码的输入框填写当没有打勾的时候就会把这个类给删除掉让用户名和密码没办法填写


主要的方法

$("#findform li .inputext").removeClass("grayinput");
删除类，不能填写
$("#findform li .inputext").addClass("grayinput");
点击以后添加这个类，变得可以填写

3、效果图





4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	
 点击填写内容信息
	

		
姓名：

		
身份证号：

		
手机（选填）：

	

24、操作：jquery 鼠标悬停到图片时浮动高亮透明层滑动到当前图片高亮

1、效果及功能说明

鼠标悬停到图片时，浮动高亮透明层随着鼠标悬停的图片相应滑动到当前图片高亮显示


主要的方法

先定义好给图片加透明层的效果但后先去掉，当鼠标移动到图片的上面立即触动一个方法让给透明层的通过一个动画进入到用户的视野里，从高度和宽度都是设定的图片的两倍后在开始缩小直接到和原图片一样大小位置，随着鼠标移动到那张图片而移动



主要的方法

$('.box').bind('mouseover',function()
//隐藏掉鼠标的上的改变背景颜色的效果

$(".boxBor").css({
				width:'100%',
				height:$(window).height(),
				left:'0px',
				top:'0px',
				opacity:0,
				display:'block'
			})
当鼠标触及到图片后开始显示这个效果

3、效果图





4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

25、操作：jquery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

1、效果及功能说明

hover事件制作产品图片鼠标滑过图片半透明，标题文字从左到右滑动动画移动显示隐藏

主要的方法

首先把效果都隐藏，然后定义一个伪类来触发所有的效果，接下来当触发伪类后会有一个遍历停止所有的效果，从新触发效果就是标题的从左边淡出和背景颜色的变化，当鼠标离开图片后触发一个遍历，停止所有动画标题回到原处不见，背景颜色变回原样

主要的方法

$(".section	 ul li").hover(function()
//伪类的触发

$(this).find(".rsp").stop().fadeTo(500,0.5)
$(this).find(".text").stop().animate({left:'0'}, {duration: 500})
//这两段就是标题的淡出和背景颜色的改变

$(this).find(".rsp").stop().fadeTo(500,0)
$(this).find(".text").stop().animate({left:'318'}, {duration: "fast"})
$(this).find(".text").animate({left:'-318'}, {duration: 0})
//这三段就让标题回放到原来的位置上去，让背景颜色回到原样

3、效果图





4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	

		

			

			

			
布品展示
		
		

			

			

			
新品纵览
		
		

			

			

			
灵感街拍
		
		

			

			

			
公司故事
		
		

			

			

			
留言 
		
		

			

			

			
联系我们
		
	
	

26、操作：jquery hover鼠标悬停品牌图片旋转动画展示

1、效果及功能说明

hover鼠标悬停图片特效，品牌图片列表通过鼠标滑过品牌图片旋转动画展示，鼠标离开品牌图片旋转回来

主要的方法

利用图片上下开始减少px知道变成一条直线后，让黑色背景的第二章图片通过动画效果从最下面出现后来把原本第一条直线替代成第二章图片的黑线在增加黑线的上下px，和现在白色的字体给用户带来旋转的效果

主要的方法

$(this).find('img').stop().animate({'height':0,'top':'35px'},d,function()
//就是让原本图变成一条居中的直线
$(this).find('b').animate({'height':0,'top':'35px'},d,function()
//就是让第二章背景黑色图片变成一条直线

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

27、操作：jquery 鼠标滑过产品图片背景高亮闪烁显示

1、效果及功能说明

鼠标滑过悬停特效，div css制作产品列表图片布局通过鼠标滑过产品图片背景高亮闪烁显示，产品标题滑动显示或隐藏 

主要的方法

首先定义好一个重复实现效果的方法，然后定义光带出现速度和从什么位置出现，在定义当鼠标触及到图片后标题出什么位置出现到什么为位置停止，中间要花多少时间，最后在定义当鼠标离开图片后标题缩回去到那里和用的时间

主要的方法

$(this).find(".shine").css("background-position","-160px 0");
//定义重复的动画效果

$(this).find(".shine").animate({backgroundPosition: '160px 0'},500);
//定义光带的动画效果和用时

$(this).find(".title").stop().animate({left:'0px'},{queue:false,duration:450});
//鼠标触及后的标图出现的到那里停止和用时

$(this).find(".title").stop().animate({left:'-160px'},{queue:false,duration:200})
//鼠标离开后标题的回缩到哪里和用时

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	

		
Prada 
		
Dolce&Gabbana 
		
Etro 
		
Fendi 
		
Michael Kors 
		
Neil Barrett 
		
Moncler 
		
Parosh 
		
Fendi 
	

28、操作：jquery animate或css3制作查看原图按钮收缩隐藏

1、效果及功能说明

制作两种查看原图按钮收缩展开，隐藏关闭

主要的方法

定义好伪类让后让伪类来控制显示原图片的标志出现和隐藏，通过css来定义图标出现的位置和多少时间内完成动画的效果，在分别定义鼠标在图片的左右变成左右箭头的鼠标告诉用户往那边滚动

主要的方法

$("#pin-jsbox").mouseenter(function(){
//控制容器里面的按钮收缩隐藏
$(this).find("#zoomr_show").animate({width:"32",height:"32"},100);	
//控制查看原图的标志出现的地方		   
}).mouseleave(function(){
$(this).find("#zoomr_show").animate({width:"0",height:"0"},100);
//当鼠标离开图片后显示原图的标志消失

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	
	

		
css3 控制查看原图按钮动画收缩隐藏
		
jQuery animate控制查看原图按钮动画收缩隐藏
	
	
	

		
		
		
		
	
	
	
	

		
		
		
		
	
	

28、操作：jquery 图片聚光灯特效制作社交图标聚光灯特效

1、效果及功能说明

打造一种图片聚光灯特效，当鼠标滑过单组中的单个社交图标时，当前高亮，其它图标变暗的这种类似图片聚光灯特效

主要的方法

首先先让鼠标触及到当前图片后，让其他图片全部透明化，然后显示出当前的提示语，当鼠标移开以后隐藏当前的提示语，让所有的背景颜色的透明度变回正常。


主要的方法

$(this).stop().fadeTo(500,1).siblings().stop().fadeTo(500,0.2);
//定义鼠标触及图片背景颜色其他图片透明度的修改

$("a strong", this).stop().animate({opacity:1,top:"-10px"},300);
//让当前的提示语出现和定义出现的地方

$(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500,1);
//当鼠标移开之后，背景颜色的透明度回复正常	

$("a strong", this).stop().animate({opacity:0,top:"-1px"},300);
//让后鼠标离开图片后提示语恢复到原始的地方消失不见

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	

		
社交图标显示
		
jQuery
		

			

				Delicious
			
			

				Digg
			
			

				Facebook
			
			

				Flickr
			
			

				LinkedIn
			
			

				Reddit
			
			

				RSS
			
			

				Twitter
			
		

	
	

29、操作：jquery 表单提交衣服尺寸选择勾选获取value值

1、效果及功能说明

表单提交制作各大商城衣服尺寸选择勾选效果，点击购物车提交勾选尺寸value值。一款简单实用的衣服尺寸选择勾选效果

主要的方法

通过查询当前的图片的id然后通过对应id找到在通过遍历后面说有尺码，找到相对应的尺码通过点击时间来触发，和当点击了以后添加一个类让点击以后出现在尺码的图标和其他的图标有明显的不一样让用户更好的知道自己选择了什么，在点击购物车的时候将有添加类的图片信息放进购物车内

主要的方法

var thisToggle = $(this).is('.size_radioToggle') ? $(this) : $(this).prev();
//通过点击事件获得尺码的信息

thisToggle.addClass('current');
//添加这个类让图片不一样

return false;
在所有图片添加类里只能一次执行一次

$(".choosetext span").html(text)
//对比收索以后的所有元素获得尺码
$("#" + id).find(".choosetext span.value").html()
//放入购物车

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	

		
尺寸：未选择
		

			

				

					
					S
				
				

					
					M
				
				

					
					L
				
				

					
					XL
				
				

					
					XXL
				
			
		
		
放入购物车
	
	




	

30、操作：jquery 表格可编辑修改表格里面的数值

1、效果及功能说明

表格特效制作jquery表格可编辑任意修改里面的数值，是一种比较人性化的用户设计体验方式


主要的方法

通过点击事件来触发跳出一个输入框可以在里面输入当这个输入框失去焦点后就把，所有值放到当前的input里面。

主要的方法

if(!$(this).is('.input'))
//当点击了input后

$(this).addClass('input').html('').find('input').focus().blur(function()
//点击以后跳出一个input类，在里面输入值，当失去焦点后把值都发给原先的那个input里面

$(this).parent().removeClass('input').html($(this).val() || 0
//当失去焦点后把input类给删除掉让跳出来的input消失

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	

		
2009年员工产品销售走势图
		

			

				

				
food
				
auto
				
household
				
furniture
				
kitchen
				
bath
			
		
		

			

				
Mary
				
190
				
160
				
40
				
120
				
30
				
70
			
			

				
Tom
				
3
				
40
				
30
				
45
				
35
				
49
			
			

				
Brad
				
10
				
180
				
10
				
85
				
25
				
79
			
			

				
Kate
				
40
				
80
				
90
				
25
				
15
				
119
			
		
		
	
	

31、操作：jquery text文本框限制字数或文本框提示字数

1、效果及功能说明

text文本框限制文本框字数，当text文本框内文字字数超出限制字数时，自动提示文字，已超出限制文字字数

主要的方法

先定义好限制字数，然后获得在input里面输入的字数，在将限制的字数减去当前的数字就剩下还可以输入多少字数，在字数满了后在下面会显示出不能输入，要是还没满的话在下方就会显示还剩下多少字可以输入


主要的方法

var limitNum = 118;
//定义参数，可输入的字数

var pattern = '还可以输入' + limitNum + '字';
//定义参数还剩多少数字可以输入

$('#wordage').html(pattern);
//wordageID还剩余多少字的ID

if(remain > 118)
//当大于限制字数时

pattern = "字数超过118个限制，短信将以多条发送！";
//显示不能输入

var result = limitNum - remain;
//否则就是显示还可以输入多少字数

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	
	

	注册登录


	

32、操作：jquery 分类搜索框带过滤器的搜索框

1、效果及功能说明


搜索框特效，制作一个jQuery分类搜索框，当鼠标点击搜索框时，会滑动展示分类菜单，点击选择/过滤分类菜单进行分类搜索

主要的方法

先是在输入框内当点击到input后在添加一个点击事件，展开选择框里面的多少可以打勾的buttom都定义一个事件，当打过勾就可以会的当前的值，在进行筛选，当鼠标离开展开框后，展开框的展开类被删除，展开框消失，和在input里面的箭头回复原状，当展开框出现的时候箭头是向上的，展开框出现后箭头是向下的

主要的方法

$ui.find('.searchtext').bind('focus click',function(){
		
			  $ui.find('.arrowDown').addClass('arrowUp').removeClass('arrowDown').andSelf().find('.dropdown').slideDown(500);
		});
// 对焦点上单击显示下拉列表中, 和更改的箭头图像	

$ui.bind('mouseleave',function(){
			$ui.find('.arrowUp').addClass('arrowDown').removeClass('arrowUp').andSelf().find('.dropdown').slideUp(500);
		});

//鼠标离开隐藏下拉，和更改的箭头图像

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	

		
搜索框过滤器演示
		

			

				

					
					
				
				

			
			

				
过滤搜索
				
所有分类
				
汽车
				
婴儿
				
美女
				
书籍
				
手机
				
服装
				
电子产品
				
美食
				
保健
				
家居与园艺
				
产业
				
首饰
				
杂志
			
		
	
	
	
		

33、操作：jquery  倒计时 设置几天、小时、分钟、秒等属性只需修改到期时间

1、效果及功能说明

通过对时间的控制来告诉用户一个活动还剩多少时间，精确到秒

主要的方法

首先定义活动的截至的时间，要重年份精确到毫秒，在获得当前的年份到秒钟，在用截至时间，减去现在的时间，剩下的还有多少的时间就把还剩下的时间给显示出来就得出了离截止日期还有多久。

主要的方法

var startTime = new Date();
//获得当前的时间

startTime.setFullYear(2016, 5, 27);
//调用设置年份
startTime.setHours(23);
//调用设置指定的时间的小时字段
startTime.setMinutes(59);
//调用设置指定时间的分钟字段
startTime.setSeconds(59);
//调用设置指定时间的秒钟字段
startTime.setMilliseconds(999);
//调用置指定时间的毫秒字段
var EndTime=startTime.getTime();
//获得截至的时间

var nMS = EndTime - NowTime.getTime();
//截至时间减去当前时间获得剩余时间


var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));
//定义参数 获得天数
var nH = Math.floor(nMS/(1000*60*60)) % 24;
//定义参数 获得小时
var nM = Math.floor(nMS/(1000*60)) % 60;
//定义参数 获得分钟
var nS = Math.floor(nMS/1000) % 60;
//定义参数 获得秒钟 这些就是当前时间

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	

		
本次活动已结束。
		
天时分秒
	
	
	
	

34、操作：jquery  竖直手风琴菜单收缩展示下拉菜单

1、效果及功能说明

框架制作两种非常简单的jquery手风琴菜单特效，鼠标滑过手风琴与鼠标点击触发手风琴

主要的方法

手风琴的效果一个是点击事件的效果一个触碰效果，都是当点击获得触碰触发添加一个让得显示的类后获得一个滑动效果让子类出现，当再次点击获得点击其他，和触及消失获得触及其他后当前的就会自动滑动消失，在删除掉展示的类

主要的方法

$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
//添加类，后查询每一个元素的下一个元素div.menu_body开展然后定义一个滑动效果里面包含显示和隐藏，在查询当前里面包裹的其他元素，让他们全部通过滑动效果隐藏起来

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	

	
		
点击触发事件
		

			
jquery图片特效
			

				jquery图片切换
				jquery幻灯片
				jquery图片放大镜
			
			
			
jquery导航菜单
			

				jquery动画菜单
				jquery树形菜单
				jquery下拉菜单
			
			
			
jquery选项卡特效
			

				jquery选项卡切换
				jquery滑动选项卡
				jquery更多特效		
			
		

		
		
		
滑过触发事件
		

			
js图片特效
			

				js图片切换
				js幻灯片
				js图片放大镜
			
			
			
js导航菜单
			

				js动画菜单
				js树形菜单
				js下拉菜单
			
			
			
js选项卡特效
			

				js选项卡切换
				js滑动选项卡
				js更多特效		
			
		

	
	

35、操作：jquery  侧栏与工具提示

1、效果及功能说明

当鼠标触及到标题就会触发一个侧显示框来告诉基础信息

主要的方法

主要是靠伪类来触发效果，当提示框从左边出来，让后显示出上面的信息，获得一个定义好的类来修改上面的字体等信息，当鼠标离开后自动回去，并且删除类，当鼠标触及到时多有动画停止，确保了不会有重复的出现


主要的方法

$(this).find("div").stop().animate({left: "210", opacity:1}, "fast").css("display","block");

$(this).find(">a").addClass("current");
//当提示框从左边出来，和添加类来修改提示框内部的信息样式

$(this).find("div").stop().animate({left: "0", opacity: 0}, "fast");

$(this).find(">a").removeClass("current");
//当鼠标离开后回收提示框，并且消除掉类较少页面的负担

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	

	
		

			

				首页
				
Go home!
			
			

				关于我们
				
知道我们的团队！
			
			

				投资组合
				
要看到我们在实验室工作吗？快来看看我们的特色工作！
			
			

				博客
				
每周更新，教程和资源。
			
			

				见证
				
看看其他客户对我们说。
			
			

				联系
				
打我们电话吧！
			
		
		
	

36、操作：jquery  animate分页标签按钮鼠标悬停滑动展开分页按钮

1、效果及功能说明

animate动画分页按钮制作鼠标悬停分页按钮上滑动展开分页按钮，鼠标离开后分页按钮收缩

主要的方法

主要是靠动画方法，来让原本的箭头图像的长度发生变长，正好可以融入下标题的文字大小，当鼠标离开以后就会让箭头图像触发另一个动画效果让让标题消失和长度变回原来的大小。


主要的方法

$(this).animate({width:90},400,function(){
//定义当前动画让长度通过动画变成90长度在0.4秒完成
$(this).children(".title").css("display","block");
//让标题文字显示出来

$(this).children(".title").css("display","none");
//定义标题文字消失
$(this).animate({width:20},400);
//定义箭头图像回到原来的长度

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

	
上一页
	
下一页



	
上一页
	
下一页



	
上一页
	
下一页

• 
• 大小: 8.5 KB

• 
• 大小: 5.3 KB

• 
• 大小: 47.3 KB

• 
• 大小: 52.4 KB

• 
• 大小: 24 KB

• 
• 大小: 10.6 KB

• 
• 大小: 94 KB

• 
• 大小: 44.4 KB

• 
• 大小: 107 KB

• 
• 大小: 80.1 KB

• 
• 大小: 23.4 KB

• 
• 大小: 73.5 KB

• 
• 大小: 51.1 KB

• 
• 大小: 204.7 KB

• 
• 大小: 29.2 KB

• 
• 大小: 33.4 KB

• 
• 大小: 18 KB

• 
• 大小: 34.8 KB

• hover图片列表上下滚动显示图片详细内容images.rar (52.5 KB)
• 下载次数: 7

• jQuery侧面浮动图片广告或滚屏图片广告images.rar (19.3 KB)
• 下载次数: 4

• js图片冒泡插件鼠标悬停图片冒泡动画展示.rar (26.9 KB)
• 下载次数: 3

• scroll图片滚动菜单鼠标移动图片滚动images.rar (74.6 KB)
• 下载次数: 4

• 仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动images.rar (44.5 KB)
• 下载次数: 2

• 高仿2012淘宝商城多格子焦点图滚动切换images.rar (648.8 KB)
• 下载次数: 2

• 广告图片各大商城首页流行通栏广告图片images.rar (224.8 KB)
• 下载次数: 2

• 图片九宫格样式布局图片切换images.rar (408.3 KB)
• 下载次数: 3

• 图片冒泡插件鼠标悬停图片冒泡动画展示images.rar (51.1 KB)
• 下载次数: 3

• 图片切换显示隐藏showhide带左右按钮与分页索引按钮控制图片显示隐藏images.rar (144.3 KB)
• 下载次数: 3

• 图片鼠标悬停效果images.rar (287.8 KB)
• 下载次数: 2

• 图像幻灯片上下滑动图片切换images.rar (412.4 KB)
• 下载次数: 3

• 右侧边固定层导航菜单依次动画滑动显示菜单展开images.rar (892 Bytes)
• 下载次数: 3

• 左导航菜单二级菜单slide滑动渐隐显示images.rar (769 Bytes)
• 下载次数: 2

• 
• 大小: 9.3 KB

• 导航菜单插件制作常用的jquery_二级下拉菜单子内容images_.rar (195 Bytes)
• 下载次数: 2

• 
• 大小: 46.4 KB

• 无缝滚动插件支持图片无缝滚动或文字无缝滚动images.rar (406 Bytes)
• 下载次数: 2

• 
• 大小: 30.5 KB

• 
• 大小: 119.6 KB

• 
• 大小: 30.5 KB

• 
• 大小: 21.1 KB

• 霓虹灯文字效果使用jQuery和CSS__jsfoot脚本特效_演示img.rar (43.9 KB)
• 下载次数: 2

• 
• 大小: 21.5 KB

• 
• 大小: 12.4 KB

• 
• 大小: 58.4 KB

• 鼠标悬停到图片时浮动高亮透明层滑动到当前图片高亮images_.rar (20.6 KB)
• 下载次数: 2

• 
• 大小: 69.8 KB

• 
• 大小: 43.1 KB

• hover鼠标悬停品牌图片旋转动画展示images.rar (34.1 KB)
• 下载次数: 2

• 
• 大小: 46.9 KB

• 鼠标滑过产品图片背景高亮闪烁显示images_.rar (40.3 KB)
• 下载次数: 2

• 
• 大小: 50.3 KB

• animate或css3制作查看原图按钮收缩隐藏images.rar (203 KB)
• 下载次数: 4

• animate或css3制作查看原图按钮收缩隐藏这张图片是和html放在同一个级的文件里zoomr_in.rar (1.6 KB)
• 下载次数: 3

• 图片聚光灯特效制作社交图标聚光灯特效images.rar (26.2 KB)
• 下载次数: 2

• 
• 大小: 46.3 KB

• 
• 大小: 14.3 KB

• 
• 大小: 25 KB

• 倒计时_设置几天、小时、分钟、秒等属性只需修改到期时间images.rar (7.1 KB)
• 下载次数: 2

• 
• 大小: 28.4 KB

• 竖直手风琴菜单收缩展示下拉菜单images.rar (852 Bytes)
• 下载次数: 3

• 
• 大小: 14.9 KB

• 侧栏与工具提示images.rar (1.2 KB)
• 下载次数: 2

• 
• 大小: 7.2 KB

• 查看图片附件