果圖
各位老鐵,大家好!
今天俺給大兄弟、大妹子們帶來的是 jQuery全屏焦點(diǎn)圖滑動(dòng)切換源碼
全屏滑動(dòng),屬于暗黑炫酷系列!(適合高科技產(chǎn)品的展示)
若是想要文件源碼,請(qǐng)看評(píng)論區(qū)!
廢話不多說,上源碼!
@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% "Arial","微軟雅黑";color:#666666;background-color:#ffffff;}
a,a:hover{color:#666666;text-decoration:none;border:0px;}
/* focusBar */
#focusBar{width:100%;height:644px;clear:both;position:relative;background:#242424;overflow:hidden;}
#focusBar li{width:100%;clear:both;height:644px;display:none;position:absolute;/* position:relative;*/}
#focusBar .focusL{height:644px;position:absolute;z-index:9;/*left:-1000px;*/ top:0px;left:-500px;margin-left:50%;}
#focusBar .focusR{height:644px;position:absolute;z-index:19;/* right:1000px;*/top:0px;left:-500px;margin-left:50%;}
a.arrL,a.arrR{display:block;width:52px;height:134px;position:absolute;top:250px;z-index:99;cursor:pointer;background:url(../images/bt_arr.png) no-repeat;}
a.arrL{left:-52px;background-position:0px 0px;}
a.arrR{right:-52px;background-position:-68px 0px;}
a.arrL:hover{background-position:0px -144px;}
a.arrR:hover{background-position:-68px -144px;}
/*HTML5特效庫 jQuery全屏焦點(diǎn)圖滑動(dòng)切換源碼 */
/*
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
*
* Uses the built in easing capabilities added In jQuery 1.1
* to offer multiple easing options
*
* TERMS OF USE - jQuery Easing
*
* Open source under the BSD License.
*
* Copyright ? 2008 George McGinley Smith
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
*
*/
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: 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;
},
easeOutElastic: 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;
},
easeInOutElastic: 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;
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
if (s == undefined) 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;
},
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: 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;
}
},
easeInOutBounce: function (x, t, b, c, d) {
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});
/*
*
* TERMS OF USE - EASING EQUATIONS
*
* Open source under the BSD License.
*
* Copyright ? 2001 Robert Penner
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
*
*/
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery全屏焦點(diǎn)圖滑動(dòng)切換</title>
<meta name="keywords" content="jquery全屏焦點(diǎn)圖滑動(dòng)切換" />
<meta name="description" content="jquery全屏焦點(diǎn)圖滑動(dòng)切換" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
</head>
<body>
<div id="focusBar">
<a href="javascript:void(0)" class="arrL" onclick="prePage()"> </a>
<a href="javascript:void(0)" class="arrR" onclick="nextPage()"> </a>
<ul class="mypng">
<li id="focusIndex1" style="background:url(images/483a26db99919a40eee1f0dd652ad53b.gif) repeat-x;">
<div class="focusL"><a ><img src="images/0240ddc5fa163156719b498c45d4ded2.png" width="1000" height="644" /></a></div>
<div class="focusR"><a ><img src="images/2a18e9128aad06d0b6b8d908ecf7c2a1.png" width="1000" height="644" /></a></div>
</li>
<li id="focusIndex2">
<div class="focusL"><a ><img src="images/2d20716b5ecc36c5c9e35a7dfc1834a4.png" width="1000" height="644" /></a></div>
<div class="focusR"><a ><img src="images/2a18e9128aad06d0b6b8d908ecf7c2a1.png" width="1000" height="644" /></a></div>
</li>
<li id="focusIndex3" style="background:url(images/8bc531a341bac9421a25093ccf376e7d.gif) repeat-x;">
<div class="focusL"><a ><img src="images/b249cfb8cebc4696d7a317181b823eb3.png" width="1000" height="644" /></a></div>
<div class="focusR"><a ><img src="images/dc0e4583d9af6915d306cabb9ac6df64.png" width="1000" height="644" /></a></div>
</li>
<li id="focusIndex4" style="background:url(images/8bc531a341bac9421a25093ccf376e7d.gif) repeat-x;">
<div class="focusL"><a ><img src="images/b249cfb8cebc4696d7a317181b823eb3.png" width="1000" height="644" /></a></div>
<div class="focusR"><a ><img src="images/dc0e4583d9af6915d306cabb9ac6df64.png" width="1000" height="644" /></a></div>
</li>
</ul>
</div>
<div style="width: 100%; height: auto; line-height: 25px; text-align: center;">
jquery全屏焦點(diǎn)圖滑動(dòng)切換
</div>
<div style="width: 300px; height: 250px; position: fixed; right: 0px; top: 0px;">
<script type="text/javascript">
/*300*250 創(chuàng)建于 2016-05-11*/
var cpro_id = "u2636070";
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
近在學(xué)習(xí)jquery,發(fā)現(xiàn)jquery上手比javascript容易許多,因?yàn)橛兄己玫奈臋n和幫助手冊(cè),如果遇到一些問題可以借助文檔來解決。初步接觸學(xué)習(xí)jquery,我發(fā)現(xiàn)學(xué)習(xí)jquery主要是學(xué)會(huì)如何使用內(nèi)置的方法。
今天就跟大家一起分享下,我用jquery寫的一個(gè)banner全屏特效切換的案例,以及制作它運(yùn)用了哪些jquery內(nèi)置方法。
思路:
注:這里說的是JS中的思路,至于布局的話,可以下載源碼自己研究。
第一步、讓切換按鈕動(dòng)起來
上圖中有4個(gè)小切換按鈕,當(dāng)鼠標(biāo)每滑動(dòng)到一個(gè)切換按鈕的位置,則相對(duì)應(yīng)的添加一個(gè)樣式。(一個(gè)橘黃色的小圓點(diǎn))
第二步、讓圖片動(dòng)起來
當(dāng)滑動(dòng)每個(gè)相對(duì)應(yīng)切換按鈕時(shí),我們的背景圖片也需要隨著切換。
第三步、讓它自動(dòng)切換
當(dāng)鼠標(biāo)沒有滑動(dòng)到切換按鈕時(shí),則讓它自動(dòng)切換,這里需定義一個(gè)定時(shí)任務(wù)。(setInterval)
根據(jù)上圖jquery代碼中,下面總結(jié)了此次特效所用到的方法:
eq()方法;尋找當(dāng)前索引
mouseover()方法;當(dāng)鼠標(biāo)滑動(dòng)到元素上方,則發(fā)生該事件
mouseout()方法;當(dāng)鼠標(biāo)離開時(shí),則發(fā)生該事件
index()方法;查找索引值
addClass()方法;添加樣式
sibling()方法;獲取當(dāng)前元素的同輩其他元素
fadeIn()方法;淡入
fadeOut()方法;淡出
以及javascript中的setInterval()方法;定義一個(gè)定時(shí)任務(wù)。和clearInterval()方法;停止定時(shí)任務(wù)
本地下載
寫在最后:覺得不管做什么事情,思路非常重要,如果沒有思路就不知道如何下手。就像開發(fā)一個(gè)網(wǎng)站一樣,如果你不知道它的開發(fā)流程是什么?那么你肯定很迷茫,網(wǎng)站如何去做?第一步該怎么下手。這樣你就會(huì)認(rèn)為做一個(gè)網(wǎng)站很難。同樣的道理:學(xué)習(xí)jquery首先我認(rèn)為得明白每個(gè)方法是什么含義,只有先明白了這些方法的含義,以及怎么去使用。在項(xiàng)目實(shí)戰(zhàn)的時(shí)候你才不會(huì)迷茫。(個(gè)人經(jīng)驗(yàn),不喜勿噴!)
nimatedModal.js 是一個(gè)用來創(chuàng)建一個(gè)全屏模態(tài)窗口的 jQuery 插件,基于 CSS3 過渡實(shí)現(xiàn)。您可以利用 Animate.css 中的轉(zhuǎn)換或自行創(chuàng)建自己的過渡效果。支持 Firefox、Chrome、Safari、Opera 和 IE 10+ 瀏覽器。
演示
http://joaopereirawd.github.io/animatedModal.js/
下載
http://www.qietu.cn/thread-15150-1-1.html
----------
加微信公眾號(hào)qietuwang,獲取最新資訊
ad ~ 自學(xué)3月前端找不到工作? 切圖網(wǎng) 旗下首個(gè)web前端真實(shí)項(xiàng)目實(shí)戰(zhàn)培訓(xùn)品牌 切入口即將開班,讓你的簡(jiǎn)歷豐富不止3倍,詳情請(qǐng)加前端講師qq 6133576 獲取最新開班通知,web前端學(xué)習(xí)千人群:469861419
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。