使用jQuery制作基礎(chǔ)的Web圖片輪播效果
更新時(shí)間：2016年04月22日 15:15:20 作者：RiccioZhang
這篇文章主要介紹了使用jQuery制作基礎(chǔ)的Web圖片輪播效果的實(shí)例,鼠標(biāo)懸停時(shí)可停止而離開(kāi)時(shí)可自動(dòng)輪播,文中還介紹了一種使用zslider插件來(lái)實(shí)現(xiàn)的方法,比較犀利,需要的朋友可以參考下
首先看一下效果：
就這么個(gè)意思，沒(méi)截動(dòng)圖哈~
輪播效果分析：
輪播效果大致可以分為3個(gè)部分：輪播圖片（圖片或者是包含容器），控制輪播圖顯示的按鈕（向左、向右按鈕，索引按鈕(例如上面效果圖的頂部的數(shù)字按鈕)），每隔一段時(shí)間輪流顯示輪播圖片。
輪播圖的顯示：要顯示的輪播圖顯示，不需要顯示的輪播圖隱藏；通常將這些輪播圖片以定位的方式重疊在一起，每次顯示一張輪播圖片。
控制按鈕：鼠標(biāo)點(diǎn)擊或者移到索引按鈕上面時(shí)，顯示對(duì)應(yīng)索引位置的輪播圖；向上、向下按鈕負(fù)責(zé)控制顯示上一張、下一張輪播圖片。
其它：一般索引按鈕有激活狀態(tài)和未激活狀態(tài)共2種狀態(tài)；鼠標(biāo)移到輪播圖片上面時(shí)應(yīng)該停止自動(dòng)輪播，鼠標(biāo)離開(kāi)時(shí)開(kāi)始自動(dòng)輪播。
輪播效果實(shí)現(xiàn)筆記：
jquery提供了豐富的選擇器以及用來(lái)挑選元素的方法，這極大的簡(jiǎn)化了我們的開(kāi)發(fā)，例如$(".slider-item").filter(".slider-item-selected")選擇了當(dāng)前處于激活狀態(tài)的索引按鈕。
兩張輪播圖的切換顯示效果是通過(guò)jquery的fadeOut()和fadeIn()方法來(lái)實(shí)現(xiàn)的，具體的使用參照jquery的api；
CSS透明背景的實(shí)現(xiàn)： background: rgba(0, 0, 0, 0.2);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); （可以參看下面的參看資料），兼容大部分主流瀏覽器包括IE；為什么不使用opacity呢？因?yàn)閛pacity會(huì)使文字也透明（子元素也會(huì)透明）。
HTML骨架很重要，你寫(xiě)的html的結(jié)果應(yīng)該是良好的。
代碼部分：
HTML:
<pre name="code" class="html"><div class="slider"> <div class="slider-extra"> <ul class="slider-nav"> <li class="slider-item">1</li> <li class="slider-item">2</li> <li class="slider-item">3</li> <li class="slider-item">4</li> </ul> <div class="slider-page"> <a class="slider-pre" href="javascript:;;"><</a> <a class="slider-next" href="javascript:;;">></a> </div> </div> </div>
CSS:
* {
padding: 0px;
margin: 0px;
}
a {
text-decoration: none;
}
ul {
list-style: outside none none;
}
.slider, .slider-panel img, .slider-extra {
width: 650px;
height: 413px;
}
.slider {
text-align: center;
margin: 30px auto;
position: relative;
}
.slider-panel, .slider-nav, .slider-pre, .slider-next {
position: absolute;
z-index: 8;
}
.slider-panel {
position: absolute;
}
.slider-panel img {
border: none;
}
.slider-extra {
position: relative;
}
.slider-nav {
margin-left: -51px;
position: absolute;
left: 50%;
bottom: 4px;
}
.slider-nav li {
background: #3e3e3e;
border-radius: 50%;
color: #fff;
cursor: pointer;
margin: 0 2px;
overflow: hidden;
text-align: center;
display: inline-block;
height: 18px;
line-height: 18px;
width: 18px;
}
.slider-nav .slider-item-selected {
background: blue;
}
.slider-page a{
background: rgba(0, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
color: #fff;
text-align: center;
display: block;
font-family: "simsun";
font-size: 22px;
width: 28px;
height: 62px;
line-height: 62px;
margin-top: -31px;
position: absolute;
top: 50%;
}
.slider-page a:HOVER {
background: rgba(0, 0, 0, 0.4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next {
left: 100%;
margin-left: -28px;
}
JavaScript：
$(document).ready(function() {
var length,
currentIndex = 0,
interval,
hasStarted = false, //是否已經(jīng)開(kāi)始輪播
t = 3000; //輪播時(shí)間間隔
length = $('.slider-panel').length;
//將除了第一張圖片隱藏
$('.slider-panel:not(:first)').hide();
//將第一個(gè)slider-item設(shè)為激活狀態(tài)
$('.slider-item:first').addClass('slider-item-selected');
//隱藏向前、向后翻按鈕
$('.slider-page').hide();
//鼠標(biāo)上懸時(shí)顯示向前、向后翻按鈕,停止滑動(dòng)，鼠標(biāo)離開(kāi)時(shí)隱藏向前、向后翻按鈕，開(kāi)始滑動(dòng)
$('.slider-panel, .slider-pre, .slider-next').hover(function() {
stop();
$('.slider-page').show();
}, function() {
$('.slider-page').hide();
start();
});
$('.slider-item').hover(function(e) {
stop();
var preIndex = $(".slider-item").filter(".slider-item-selected").index();
currentIndex = $(this).index();
play(preIndex, currentIndex);
}, function() {
start();
});
$('.slider-pre').unbind('click');
$('.slider-pre').bind('click', function() {
pre();
});
$('.slider-next').unbind('click');
$('.slider-next').bind('click', function() {
next();
});
/**
* 向前翻頁(yè)
*/
function pre() {
var preIndex = currentIndex;
currentIndex = (--currentIndex + length) % length;
play(preIndex, currentIndex);
}
/**
* 向后翻頁(yè)
*/
function next() {
var preIndex = currentIndex;
currentIndex = ++currentIndex % length;
play(preIndex, currentIndex);
}
/**
* 從preIndex頁(yè)翻到currentIndex頁(yè)
* preIndex 整數(shù)，翻頁(yè)的起始頁(yè)
* currentIndex 整數(shù)，翻到的那頁(yè)
*/
function play(preIndex, currentIndex) {
$('.slider-panel').eq(preIndex).fadeOut(500)
.parent().children().eq(currentIndex).fadeIn(1000);
$('.slider-item').removeClass('slider-item-selected');
$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
}
/**
* 開(kāi)始輪播
*/
function start() {
if(!hasStarted) {
hasStarted = true;
interval = setInterval(next, t);
}
}
/**
* 停止輪播
*/
function stop() {
clearInterval(interval);
hasStarted = false;
}
//開(kāi)始輪播
start();
});
首先是初始化部分：將除了第一張輪播圖片意外的圖片都隱藏，并且隱藏向前、向后按鈕，使第一個(gè)索引按鈕處于激活狀態(tài)。
事件部分：通過(guò)jquery的hover()綁定鼠標(biāo)上懸以及離開(kāi)時(shí)的事件處理， jquery的bind()方法綁定鼠標(biāo)點(diǎn)擊事件處理向前、向后翻動(dòng)、
輪播控制：pre(), next(), play(), start()開(kāi)始自動(dòng)輪播，stop()停止自動(dòng)輪播。
上面的js寫(xiě)的比較散，結(jié)構(gòu)也不太好，讀起來(lái)也比較費(fèi)力，也不易使用，耦合度較高。下篇將給出一個(gè)純粹的jquery輪播插件， 該插件可以定制各種效果，方便的配置以及可擴(kuò)展。
下面是整體的代碼：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery輪播效果圖 - by RiccioZhang</title>
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
a {
text-decoration: none;
}
ul {
list-style: outside none none;
}
.slider, .slider-panel img, .slider-extra {
width: 650px;
height: 413px;
}
.slider {
text-align: center;
margin: 30px auto;
position: relative;
}
.slider-panel, .slider-nav, .slider-pre, .slider-next {
position: absolute;
z-index: 8;
}
.slider-panel {
position: absolute;
}
.slider-panel img {
border: none;
}
.slider-extra {
position: relative;
}
.slider-nav {
margin-left: -51px;
position: absolute;
left: 50%;
bottom: 4px;
}
.slider-nav li {
background: #3e3e3e;
border-radius: 50%;
color: #fff;
cursor: pointer;
margin: 0 2px;
overflow: hidden;
text-align: center;
display: inline-block;
height: 18px;
line-height: 18px;
width: 18px;
}
.slider-nav .slider-item-selected {
background: blue;
}
.slider-page a{
background: rgba(0, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
color: #fff;
text-align: center;
display: block;
font-family: "simsun";
font-size: 22px;
width: 28px;
height: 62px;
line-height: 62px;
margin-top: -31px;
position: absolute;
top: 50%;
}
.slider-page a:HOVER {
background: rgba(0, 0, 0, 0.4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next {
left: 100%;
margin-left: -28px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var length,
currentIndex = 0,
interval,
hasStarted = false, //是否已經(jīng)開(kāi)始輪播
t = 3000; //輪播時(shí)間間隔
length = $('.slider-panel').length;
//將除了第一張圖片隱藏
$('.slider-panel:not(:first)').hide();
//將第一個(gè)slider-item設(shè)為激活狀態(tài)
$('.slider-item:first').addClass('slider-item-selected');
//隱藏向前、向后翻按鈕
$('.slider-page').hide();
//鼠標(biāo)上懸時(shí)顯示向前、向后翻按鈕,停止滑動(dòng)，鼠標(biāo)離開(kāi)時(shí)隱藏向前、向后翻按鈕，開(kāi)始滑動(dòng)
$('.slider-panel, .slider-pre, .slider-next').hover(function() {
stop();
$('.slider-page').show();
}, function() {
$('.slider-page').hide();
start();
});
$('.slider-item').hover(function(e) {
stop();
var preIndex = $(".slider-item").filter(".slider-item-selected").index();
currentIndex = $(this).index();
play(preIndex, currentIndex);
}, function() {
start();
});
$('.slider-pre').unbind('click');
$('.slider-pre').bind('click', function() {
pre();
});
$('.slider-next').unbind('click');
$('.slider-next').bind('click', function() {
next();
});
/**
* 向前翻頁(yè)
*/
function pre() {
var preIndex = currentIndex;
currentIndex = (--currentIndex + length) % length;
play(preIndex, currentIndex);
}
/**
* 向后翻頁(yè)
*/
function next() {
var preIndex = currentIndex;
currentIndex = ++currentIndex % length;
play(preIndex, currentIndex);
}
/**
* 從preIndex頁(yè)翻到currentIndex頁(yè)
* preIndex 整數(shù)，翻頁(yè)的起始頁(yè)
* currentIndex 整數(shù)，翻到的那頁(yè)
*/
function play(preIndex, currentIndex) {
$('.slider-panel').eq(preIndex).fadeOut(500)
.parent().children().eq(currentIndex).fadeIn(1000);
$('.slider-item').removeClass('slider-item-selected');
$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
}
/**
* 開(kāi)始輪播
*/
function start() {
if(!hasStarted) {
hasStarted = true;
interval = setInterval(next, t);
}
}
/**
* 停止輪播
*/
function stop() {
clearInterval(interval);
hasStarted = false;
}
//開(kāi)始輪播
start();
});
</script>
</head>
<body>
<div class="slider">
<div class="slider-extra">
<ul class="slider-nav">
<li class="slider-item">1</li>
<li class="slider-item">2</li>
<li class="slider-item">3</li>
<li class="slider-item">4</li>
</ul>
<div class="slider-page">
<a class="slider-pre" href="javascript:;;"><</a>
<a class="slider-next" href="javascript:;;">></a>
</div>
</div>
</div>
</body>
</html>
至此一個(gè)簡(jiǎn)單的jquery輪播效果就完成了，當(dāng)然還有很多需要改進(jìn)的地方。
使用插件實(shí)現(xiàn)
上面的效果看起來(lái)還令人滿(mǎn)意，唯一不足的就是：每次需要輪播效果時(shí)，要將代碼復(fù)制粘貼過(guò)去，如果有些部分需要修改（例如：輪播時(shí)的動(dòng)畫(huà)效果，前一篇使用的是jquery的淡入淡出效果，如果改成滑動(dòng)效果，不可避免的要修改js代碼），那么就需要對(duì)js代碼進(jìn)行修改，對(duì)我所寫(xiě)的jquery輪播效果的js代碼不熟悉的程序員來(lái)說(shuō)，修改這些js確實(shí)很困難。輪播插件所要實(shí)現(xiàn)的目標(biāo)之一就是插件可以靈活配置（不光只是本篇文章的插件），程序員只需要寫(xiě)少量的代碼就可以實(shí)現(xiàn)豐富的功能，這當(dāng)然是一件很好的事情。本篇文章的輪播插件的html和css部分需要程序員自己編寫(xiě)，而實(shí)現(xiàn)效果的js只需要少量的編寫(xiě)。
這里我們使用到的zslider插件在GitHub上開(kāi)源：
github:https://github.com/ricciozhang/zslider_v1
嗯，我們來(lái)看代碼：
(function($, window, document) {
//---- Statics
var DEFAULT_ANIMATE_TYPE = 'fade',
ARRAY_SLICE = [].slice,
ARRAY_CONCAT = [].concat
;
//---- Methods
function concatArray() {
var deep = false,
result = [];
if(arguments.length > 0 &&
arguments[arguments.length - 1] === true) {
deep = true;
}
for(var i = 0; i < arguments.length; i++) {
if(!!arguments[i].length) {
if(deep) {
for(var j = 0; j < arguments[i].length; j++) {
//recursive call
result = ARRAY_CONCAT.call(result,
concatArray(arguments[i][j], true));
}
} else {
result = ARRAY_CONCAT.call(result, arguments[i]);
}
} else if(i != arguments.length - 1 ||
(arguments[arguments.length - 1] !== true &&
arguments[arguments.length - 1] !== false)) {
result.push(arguments[i]);
}
}
return result;
}
//----- Core
$.fn.extend({
zslider: function(zsliderSetting, autoStart) {
var itemLenght = 0,
currItemIndex = 0,
started = false,
oInterval = {},
setting = {
intervalTime: 3000,
step: 1,
imagePanels: $(),
animateConfig: {
atype: 'fade',
fadeInSpeed: 500,
fadeOutSpeed: 1000
},
panelHoverStop: true,
ctrlItems: $(),
ctrlItemActivateType: 'hover' || 'click',
ctrlItemHoverCls: '',
flipBtn: {},
panelHoverShowFlipBtn: true,
callbacks: {
animate: null
}
},
that = this
;
//core methods
var slider = {
pre: function() {
var toIndex = itemLenght +
(currItemIndex - setting.step) % itemLenght;
slider.to(toIndex);
},
next: function() {
var toIndex = (currItemIndex + setting.step) % itemLenght;
slider.to(toIndex);
},
to: function(toIndex) {
//handle the index value
if(typeof toIndex === 'function') {
toIndex = toIndex.call(that, concatArray(setting.imagePanels, true),
concatArray(setting.ctrlItems, true),
currItemIndex, step);
}
if(window.isNaN(toIndex)) {
toIndex = 0;
}
toIndex = Math.round(+toIndex) % itemLenght;
if(toIndex < 0) {
toIndex = itemLenght + toIndex;
}
var currentPanel = setting.imagePanels.eq(currItemIndex),
toPanel = setting.imagePanels.eq(toIndex),
currrntCtrlItem = setting.ctrlItems.eq(currItemIndex)
toCtrlItem = setting.ctrlItems.eq(toIndex)
;
if(!setting.callbacks.animate ||
setting.callbacks.animate.call(that,
concatArray(setting.imagePanels, true),
concatArray(setting.ctrlItems, true),
currItemIndex, toIndex) === true) {
currrntCtrlItem.removeClass(setting.ctrlItemHoverCls);
toCtrlItem.addClass(setting.ctrlItemHoverCls);
toPanel.fadeIn(setting.animateConfig.fadeInSpeed);
currentPanel.fadeOut(setting.animateConfig.fadeOutSpeed);
}
//set the current item index
currItemIndex = toIndex;
},
start: function() {
if(!started) {
started = true;
oInterval =
window.setInterval(slider.next, setting.intervalTime);
}
},
stop: function() {
if(started) {
started = false;
window.clearInterval(oInterval);
}
},
isStarted: function() {
return started;
}
};
function initData() {
if(zsliderSetting) {
var temp_callbacks = zsliderSetting.callbacks;
$.extend(setting, zsliderSetting);
$.extend(setting.callbacks, temp_callbacks);
itemLenght = setting.imagePanels.length;
}
//convert to the jquery object
setting.imagePanels = $(setting.imagePanels);
setting.ctrlItems = $(setting.ctrlItems);
setting.flipBtn.container = $(setting.flipBtn.container);
setting.flipBtn.preBtn = $(setting.flipBtn.preBtn);
setting.flipBtn.nextBtn = $(setting.flipBtn.nextBtn);
}
function initLook() {
//show the first image panel and hide other
setting.imagePanels.hide();
setting.imagePanels.filter(':first').show();
//activate the first control item and deactivate other
setting.ctrlItems.removeClass(setting.ctrlItemHoverCls);
setting.ctrlItems.filter(':first').addClass(setting.ctrlItemHoverCls);
$(that).css('overflow', 'hidden');
if(setting.panelHoverShowFlipBtn) {
showFlipBtn(false);
}
}
function initEvent() {
$(concatArray(setting.imagePanels,
setting.flipBtn.preBtn, setting.flipBtn.nextBtn, true)).hover(function() {
if(setting.panelHoverStop) {
slider.stop();
}
if(setting.panelHoverShowFlipBtn) {
showFlipBtn(true);
}
}, function() {
slider.start();
if(setting.panelHoverShowFlipBtn) {
showFlipBtn(false);
}
});
if(setting.ctrlItemActivateType === 'click') {
setting.ctrlItems.unbind('click');
setting.ctrlItems.bind('click', function() {
slider.to($(this).index());
});
} else {
setting.ctrlItems.hover(function() {
slider.stop();
slider.to($(this).index());
}, function() {
slider.start();
});
}
setting.flipBtn.preBtn.unbind('click');
setting.flipBtn.preBtn.bind('click', function() {
slider.pre();
});
setting.flipBtn.nextBtn.unbind('click');
setting.flipBtn.nextBtn.bind('click', function() {
slider.next();
});
}
function init() {
initData();
initLook();
initEvent();
}
function showFlipBtn(show) {
var hasContainer = setting.flipBtn.container.length > 0,
eles;
eles = hasContainer ? setting.flipBtn.container :
//to the dom array:
/*ARRAY_CONCAT.call(ARRAY_SLICE.apply(setting.flipBtn.preBtn),
ARRAY_SLICE.apply(setting.flipBtn.nextBtn));*/
concatArray(setting.flipBtn.preBtn,
setting.flipBtn.nextBtn, true);
if(show) {
$(eles).show();
} else {
$(eles).hide();
}
}
init();
if(arguments.length < 2 || !!autoStart){
slider.start();
}
return slider;
}
});
})(jQuery, window, document);
您可能感興趣的文章:
- jQuery圖片輪播實(shí)現(xiàn)并封裝(一)
- jQuery實(shí)現(xiàn)的圖片輪播效果完整示例
- jQuery的圖片輪播插件PgwSlideshow使用詳解
- jQuery插件實(shí)現(xiàn)圖片輪播特效
- jQuery圖片輪播插件——前端開(kāi)發(fā)必看
- 非常棒的jQuery圖片輪播效果
- 簡(jiǎn)單的jQuery banner圖片輪播實(shí)例代碼
- 基于JQuery實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
- jQuery插件實(shí)現(xiàn)帶圓點(diǎn)的焦點(diǎn)圖片輪播切換
- jQuery動(dòng)畫(huà)效果圖片輪播特效
- 基于jQuery實(shí)現(xiàn)左右圖片輪播（原理通用）
- jQuery手動(dòng)點(diǎn)擊實(shí)現(xiàn)圖片輪播特效
- jQuery圖片輪播（二）利用構(gòu)造函數(shù)和原型創(chuàng)建對(duì)象以實(shí)現(xiàn)繼承
相關(guān)文章
現(xiàn)在jquery應(yīng)用的越來(lái)越多, 有些同學(xué)在享受爽快淋漓coding時(shí)就將性能問(wèn)題忽略了, 比如我. jquery雖在諸多的js類(lèi)庫(kù)中性能表現(xiàn)還算優(yōu)秀, 但畢竟不是在用原生的javascript開(kāi)發(fā), 性能問(wèn)題還是需要引起重視的.2010-02-02
jQuery動(dòng)態(tài)顯示和隱藏datagrid中的某一列的方法
動(dòng)態(tài)顯示和隱藏datagrid中的某一列的方法有很多，在接下來(lái)的文章中為大家介紹下jQuery是如何實(shí)現(xiàn)的2013-12-12
基于jQuery的淡入淡出可自動(dòng)切換的幻燈插件打包下載
基于jQuery淡入淡出可自動(dòng)切換的幻燈插件,原型是前幾天寫(xiě)的一個(gè)幻燈效果,因?yàn)橐粋€(gè)小bug卡了兩天,然后清空之前寫(xiě)的代碼,重新整理思路寫(xiě)出來(lái)的.2010-09-09
jQuery實(shí)現(xiàn)固定在網(wǎng)頁(yè)頂部的菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)固定在網(wǎng)頁(yè)頂部的菜單效果,通過(guò)jquery頁(yè)面scroll事件及邊距計(jì)算實(shí)現(xiàn)網(wǎng)頁(yè)的菜單固定效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
讓人印象深刻的10個(gè)jQuery手風(fēng)琴效果應(yīng)用
jQuery 是最流行的 JavaScript 開(kāi)發(fā)框架，它簡(jiǎn)化了 HTML 文檔遍歷，事件處理，動(dòng)畫(huà)以及 Ajax 交互，幫助 Web 開(kāi)發(fā)人員更快速的實(shí)現(xiàn)各種精美的界面效果2012-05-05
JQuery 設(shè)置checkbox值二次無(wú)效的解決方法
下面小編就為大家?guī)?lái)一篇JQuery 設(shè)置checkbox值二次無(wú)效的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
之前，我們減少字節(jié)數(shù)和請(qǐng)求次數(shù)以及加載順序以使頁(yè)面加載的更快。如今，我們?cè)絹?lái)越多的注意到另一個(gè)影響網(wǎng)站性能的部分--CPU利用率。使用 jQuery和其他JavaScript框架，使節(jié)點(diǎn)選擇和DOM操作變得越來(lái)越容易，如果使用不當(dāng)，有可能影響整個(gè)網(wǎng)頁(yè)的響應(yīng)速度。2016-06-06
本文為大家詳細(xì)介紹喜愛(ài)頁(yè)面載入完畢響應(yīng)事件、綁定與反綁定事件監(jiān)聽(tīng)器、事件觸發(fā)器、事件的交互處理等等，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-06-06
jQuery基于隨機(jī)數(shù)解決中午吃什么去哪吃問(wèn)題示例
這篇文章主要介紹了jQuery基于隨機(jī)數(shù)解決中午吃什么去哪吃問(wèn)題,涉及jQuery基于事件響應(yīng)及隨機(jī)數(shù)動(dòng)態(tài)操作頁(yè)面元素相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12
jquery事件與函數(shù)在使用中很頻繁，在本文為大家介紹下事件綁定及函數(shù)聲明和命名函數(shù)表達(dá)式，感興趣的朋友可以參考下2013-09-09