一、新闻轮播插件
1、引入jquery和gslide插件
1 <script type="text/javascript" src="jquery-1.8.3.js"></script> 2 <script type="text/javascript" src="gslide.js"></script>
以下是gslide插件代码
1 /** 2 * 澶氬浘婊氬姩鎻掍欢 3 * 4 * @module gSlider 5 * @author liuqing 6 */ 7 ;(function($) { 8 /** 9 * gSlider绫�(姝ょ被鏄��鏈夌被锛岃皟鐢ㄩ渶瑕佷娇鐢‥xample涓�殑鏂规硶)111111 10 * 11 * 12 * @class gSlider 13 * @param {Object} element 瀹炰緥鍖栧�璞″湪姝�om瀵硅薄鍐呮墽琛� 14 * @param {Object} options 鍙傛暟 15 * @example 16 $(xx).gSlider({ 17 isAuto: true, // 鏄�惁鑷�姩婊氬姩 18 isImgLoad: false, // 鏄�惁鍥剧墖鍚庡姞杞� 19 dataOriginal: 'data-original', //鍥剧墖瀛樺偍灞炴€у悕 20 speed: 3000, // 闂撮殧鏃堕棿锛堟�绉掞級 21 direction: 'forward', // 鍚戝墠 - forward / 鍚戝悗 - backward 22 duration: 500, // 绉诲姩閫熷害锛堟�绉掞級 23 showNum: 1, // 鏄剧ず涓�暟 24 stepLen: 1, // 姣忔�婊氬姩姝ラ暱 25 type: 'horizontal', // 姘村钩婊氬姩 - horizontal / 鍨傜洿婊氬姩 - vertical 26 btnGo: {left: null, right:null}, 27 beforeCallback: function(){}, 28 afterCallback: function(){} 29 }); 30 * @constructor 31 */ 32 function gSlider(element, options) { 33 this.elements = { 34 wrap: element, 35 ul: element.children('ul'), 36 li: element.children('ul').children('li') 37 }; 38 this.len = this.elements.li.length; 39 this.settings = options; 40 41 42 this.pos = this.index = 0; 43 44 this.timer = null; 45 this.init(); 46 } 47 gSlider.prototype = { 48 /** 49 * @method 鍒濆�鍖� 50 */ 51 init: function() { 52 var self = this; 53 self.elements.ul.append(self.elements.ul.html()); 54 self.settings.beforeCallback.call(self); 55 self.setStyle(); 56 self.move(); 57 self.bind(); 58 self.settings.afterCallback.call(self); 59 self.whenhover(); 60 self.imgLoad(); 61 }, 62 setStyle: function(){ 63 var self = this; 64 switch (self.settings.type) { 65 case 'horizontal': 66 self.leftOrTop = 'left'; 67 self.oneWidth = self.settings.oneWidth ? self.settings.oneWidth : self.elements.li.eq(0).outerWidth(); 68 self.elements.ul.width(self.oneWidth * self.len * 2); 69 break; 70 case 'vertical': 71 self.leftOrTop = 'top'; 72 self.oneWidth = self.settings.oneWidth ? self.settings.oneWidth : self.elements.li.eq(0).outerHeight(); 73 self.elements.li.css({ 74 'float': 'none', 75 'display': 'block' 76 }); 77 self.elements.ul.height(self.oneWidth * self.len * 2); 78 break; 79 }; 80 self.wraperSize = self.oneWidth * self.len; 81 self.stepWidth = self.oneWidth * self.settings.stepLen; 82 self.elements.ul.css({ 83 position: 'relative' 84 }); 85 }, 86 bind: function(){ 87 var self = this; 88 $(self.settings.btnGo.right).bind('click', function (){ 89 clearInterval(self.timer); 90 self.index++; 91 self.moving(self.elements.ul[0], -self.stepWidth*self.index, function(){ 92 self.move(); 93 }); 94 }); 95 $(self.settings.btnGo.left).bind('click', function (){ 96 clearInterval(self.timer); 97 self.index--; 98 if (self.index<0) { 99 if (self.index === -1) { 100 self.pos = -self.stepWidth * self.len; 101 }; 102 self.index = self.len + self.index; 103 }; 104 self.moving(self.elements.ul[0], -self.stepWidth*self.index, function(){ 105 self.move(); 106 }); 107 }); 108 }, 109 move: function(){ 110 var self = this; 111 if (self.settings.isAuto) { 112 self.timer = setInterval(function(){ 113 self.index++; 114 self.moving(self.elements.ul[0], -self.stepWidth*self.index); 115 }, self.settings.speed); 116 } 117 }, 118 moving: function(obj, iTarget, callback){ 119 var self = this; 120 self.imgLoad(); 121 callback = callback || function(){} 122 clearInterval(obj.tLimer); 123 obj.tLimer = setInterval(function (){ 124 var speed = (iTarget-self.pos)/6; 125 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 126 127 if(self.pos == iTarget){ 128 clearInterval(obj.tLimer); 129 callback(); 130 } 131 132 self.pos += speed; 133 134 obj.style[self.leftOrTop] = (self.pos % self.wraperSize)+'px'; 135 136 }, 30); 137 }, 138 whenhover:function(){ 139 var self = this; 140 self.elements.ul.hover(function(){ 141 clearInterval(self.timer); 142 },function(){ 143 self.move(); 144 }); 145 }, 146 /** 147 * @method 鍥剧墖鍔犺浇 148 */ 149 imgLoad: function(){ 150 var self = this; 151 if(!self.settings.isImgLoad){return false} 152 var len = Math.abs(self.index % self.len) * self.settings.showNum; 153 liNode = self.elements.ul.children().slice(len, len + self.settings.showNum); 154 liNode.each(function(){ 155 var imgNode = $(this).find('img'); 156 if(imgNode.attr(self.settings.dataOriginal)){ 157 imgNode.attr('src', imgNode.attr(self.settings.dataOriginal)).removeAttr(self.settings.dataOriginal); 158 } 159 }); 160 161 } 162 }; 163 164 $.fn.gSlider = function(options) { 165 options = $.extend({}, $.fn.gSlider.defaults, options); 166 this.each(function(){ 167 new gSlider($(this), options); 168 }); 169 }; 170 /** 171 * @property 榛樿�閰嶇疆 172 * @type {Object} 173 * 174 */ 175 $.fn.gSlider.defaults = { 176 oneWidth: null, 177 isAuto: true, // 鏄�惁鑷�姩婊氬姩 178 isImgLoad: false, // 鏄�惁鍥剧墖鍚庡姞杞� 179 dataOriginal: 'data-original', //鍥剧墖瀛樺偍灞炴€у悕 180 speed: 3000, // 闂撮殧鏃堕棿锛堟�绉掞級 181 direction: 'forward', // 鍚戝墠 - forward / 鍚戝悗 - backward 182 duration: 500, // 绉诲姩閫熷害锛堟�绉掞級 183 showNum: 1, // 鏄剧ず涓�暟 184 stepLen: 1, // 姣忔�婊氬姩姝ラ暱 185 type: 'horizontal', // 姘村钩婊氬姩 - horizontal / 鍨傜洿婊氬姩 - vertical 186 btnGo: {left: null, right:null}, 187 beforeCallback: function(){}, 188 afterCallback: function(){} 189 }; 190 })(jQuery);
2、编写HTML
注意必须写id
1 <div id="notice-c" class="notice-c"> 2 <ul> 3 <li><a href="#">管理平台运行支撑技术系统示目通过验收</a><time class="time">[2016-02-05]</time></li> 4 <li><a href="#">管理平台运行支撑技术系统示范工程项目通过验收</a><time class="time">[2016-02-05]</time></li> 5 <li><a href="#">考字化管理平台运行支撑技术目通过验收</a><time class="time">[2016-02-05]</time></li> 6 </div>
3、调用js插件
这个插件自带有点击跳转新闻前后的按钮，需要给他class名，向前为bnext,向后为bprve;
调用记住left:'.bprve'，right:'.bnext'
$(function(){ if( $("#notice-b li").length > 1 ){ $("#notice-b").gSlider({ time:5000, btnGo:{left:'.bprve',right:'.bnext'}, type:'vertical'//水平 horizontal }); } });
二、火焰灯效果插件
1、引入jQuery、lavalamp和easing插件
1 <script type="text/javascript" src="js/jquery-1.8.3.js"></script> 2 <script type="text/javascript" src="js/jquery.lavalamp.min.js"></script> 3 <script type="text/javascript" src="js/jquery.easing.min.js"></script>
lavalamp插件、easing代码如下
1 /** 2 * LavaLamp - A menu plugin for jQuery with cool hover effects. 3 * @requires jQuery v1.1.3.1 or above 4 * 5 * http://gmarwaha.com/blog/?p=7 6 * 7 * Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com) 8 * Dual licensed under the MIT and GPL licenses: 9 * http://www.opensource.org/licenses/mit-license.php 10 * http://www.gnu.org/licenses/gpl.html 11 * 12 * Version: 0.2.0 13 * Requires Jquery 1.2.1 from version 0.2.0 onwards. 14 * For jquery 1.1.x, use version 0.1.0 of lavalamp 15 */ 16 (function($){ 17 $.fn.lavaLamp=function(o){ 18 o=$.extend({ 19 fx:"linear", 20 speed:500, 21 click:function(){}},o||{}); 22 return this.each(function(){ 23 var b=$(this),noop=function(){}, 24 $back=$('<li class="back"><div class="left"></div></li>').appendTo(b), 25 $li=$("li",this), 26 curr=$("li.current",this)[0]||$($li[0]).addClass("current")[0]; 27 $li.not(".back").hover(function(){ 28 move(this)},noop); 29 $(this).hover(noop,function(){ 30 move(curr)}); 31 $li.click(function(e){ 32 setCurr(this); 33 return o.click.apply(this,[e,this])}); 34 setCurr(curr); 35 function setCurr(a){ 36 $back.css({ 37 "left":a.offsetLeft+"px", 38 "width":a.offsetWidth+"px"}); 39 curr=a}; 40 function move(a){ 41 $back.each(function(){ 42 $(this).dequeue()}).animate({ 43 a.offsetWidth, 44 left:a.offsetLeft}, 45 o.speed, 46 o.fx)}})}})(jQuery);
1 /* 2 * jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php 3 * 4 * Uses the built in easing capabilities added in jQuery 1.1 5 * to offer multiple easing options 6 * 7 * Copyright (c) 2007 George Smith 8 * Licensed under the MIT License: 9 * http://www.opensource.org/licenses/mit-license.php 10 */ 11 jQuery.easing={easein:function(x,t,b,c,d){return c*(t/=d)*t+b},easeinout:function(x,t,b,c,d){if(t<d/2)return 2*c*t*t/(d*d)+b;var a=t-d/2;return-2*c*a*a/(d*d)+2*c*a/d+c/2+b},easeout:function(x,t,b,c,d){return-c*t*t/(d*d)+2*c*t/d+b},expoin:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}return a*(Math.exp(Math.log(c)/d*t))+b},expoout:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}return a*(-Math.exp(-Math.log(c)/d*(t-d))+c+1)+b},expoinout:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}if(t<d/2)return a*(Math.exp(Math.log(c/2)/(d/2)*t))+b;return a*(-Math.exp(-2*Math.log(c/2)/d*(t-d))+c+1)+b},bouncein:function(x,t,b,c,d){return c-jQuery.easing['bounceout'](x,d-t,0,c,d)+b},bounceout:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b}},bounceinout:function(x,t,b,c,d){if(t<d/2)return jQuery.easing['bouncein'](x,t*2,0,c,d)*.5+b;return jQuery.easing['bounceout'](x,t*2-d,0,c,d)*.5+c*.5+b},elasin:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b},elasout:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b},elasinout:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b},backin:function(x,t,b,c,d){var s=1.70158;return c*(t/=d)*t*((s+1)*t-s)+b},backout:function(x,t,b,c,d){var s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b},backinout:function(x,t,b,c,d){var s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b},linear:function(x,t,b,c,d){return c*t/d+b}};
2、编写HTML代码
1 <div class="header"> 2 <ul class="lava_border"> 3 <li><a href="#">首页</a></li> 4 <li><a href="#">关于我们</a></li> 5 <li><a href="#">新闻中心</a></li> 6 <li><a href="#">主营业务</a></li> 7 <li><a href="#">经典案例</a></li> 8 <li><a href="#">合作与支持</a></li> 9 </ul> 10 </div>
3、编写css样式
需要注意的是：
1、<li>里面的<a>标签需要设置：position:relative;必须有z-index：3；否则a:hover属性显示不了。
2、增加一个li.back{position:absolute;height:**;}li.back中间不能有空格。
3、lavalamp.js文件里动态设置border-bottom的位置："left":a.offsetLeft+"px", "width":a.offsetWidth+"px"，
a.offsetLeft是指相对父元素的左边距。
要使两个li选项间红色线有一定距离，需要给li设置margin-right值。
1 /* CSS Document */ 2 /*全局样式*/ 3 *{margin:0;padding:0;color:#000;} 4 li{list-style:none;} 5 a{text-decoration:none;} 6 body{font-family:"Microsoft Yahei";font-size:17px;} 7 /*头部样式*/ 8 .header{width:100%;height:60px;background:#e6e6e6;} 9 .lava_border{width:1000px;margin:0 auto;height:40px;padding-top:20px;} 10 .lava_border li{float:left;margin-right:20px;} 11 .lava_border li a{padding:0 20px;position:relative;z-index:3;transition:color 0.5s;} 12 .lava_border li a:hover{color:#F00;} 13 .lava_border li.back{position:absolute;border-bottom:3px solid red;height:37px;} 14 .current a{color:red;}
4、调用插件
1 $(function(){ 2 $(".lava_border").lavaLamp({ 3 fx:"backout", 4 speed:500,}); 5 })
经调用发现这个只有底框移动到指定菜单下的效果，调用插件后默认项 li 增添了"class="current",点击其他不变。于是将计就计，使用这个class，用于点击事件增添类名。
$("li").each(function(index){
$(this).click(function(){
$("li").removeClass("current");
$("li").eq(index).addClass("current");});
//或者
//$(this).addClass("current").siblings().removeClass("current");
});