基于iscroll.js實(shí)現(xiàn)下拉刷新和上拉加載效果
更新時(shí)間：2021年08月18日 14:12:40 作者：我就是三冰
這篇文章主要為大家詳細(xì)介紹了基于iscroll.js實(shí)現(xiàn)下拉刷新和上拉加載效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
現(xiàn)在已經(jīng)不是純Android獨(dú)霸天下的時(shí)代了，H5嵌入Android的Hybrid混合開(kāi)發(fā)是大勢(shì)所趨。今天給大家?guī)?lái)的就是移動(dòng)端中常見(jiàn)的“上拉刷新，下拉加載”特效，這個(gè)特效將會(huì)基于H5來(lái)實(shí)現(xiàn)。
先看下運(yùn)行效果：
是不是有點(diǎn)小小的‘雞凍' ，它就是由我們今天要介紹的主人公‘iscroll.js'實(shí)現(xiàn)的，接下來(lái)我以最最簡(jiǎn)便的方式教給大家~~
實(shí)現(xiàn)步驟
一、準(zhǔn)備好iscroll.js庫(kù)
到官網(wǎng)下載即可：
https://github.com/cubiq/iscroll
二、搭建頁(yè)面結(jié)構(gòu)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll 實(shí)例：下拉刷新，滾動(dòng)翻頁(yè)</title>
<style type="text/css" media="all">
body,ul,li {
padding:0;
margin:0;
border:0;
}
body {
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
}
#header {
position:absolute;
top:0; left:0;
width:100%;
height:45px;
line-height:45px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
padding:0;
color:#eee;
font-size:20px;
text-align:center;
}
#header a {
color:#f3f3f3;
text-decoration:none;
font-weight:bold;
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}
#footer {
position:absolute;
bottom:0; left:0;
width:100%;
height:48px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
background-image:-o-linear-gradient(top, #999, #666 2%, #222);
padding:0;
border-top:1px solid #444;
}
#wrapper {
position:absolute; z-index:1;
top:45px; bottom:48px; left:0;
width:100%;
background:#555;
overflow:auto;
}
#scroller {
position:relative;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
float:left;
width:100%;
padding:0;
}
#scroller ul {
position:relative;
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
#scroller li {
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}
#scroller li > a {
display:block;
}
/**
*
* 下拉樣式 Pull down styles
*
*/
#pullDown, #pullUp {
background:#fff;
height:40px;
line-height:40px;
padding:5px 10px;
border-bottom:1px solid #ccc;
font-weight:bold;
font-size:14px;
color:#888;
}
#pullDown .pullDownIcon, #pullUp .pullUpIcon {
display:block; float:left;
width:40px; height:40px;
background:url(pull-icon@2x.png) 0 0 no-repeat;
-webkit-background-size:40px 80px; background-size:40px 80px;
-webkit-transition-property:-webkit-transform;
-webkit-transition-duration:250ms;
}
#pullDown .pullDownIcon {
-webkit-transform:rotate(0deg) translateZ(0);
}
#pullUp .pullUpIcon {
-webkit-transform:rotate(-180deg) translateZ(0);
}
</style>
</head>
<body>
<div id="header">
<a href="../db.html#page2">iScroll實(shí)例：下拉刷新，滾動(dòng)翻頁(yè)</a>
</div>
<div id="wrapper">
<div id="scroller">
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
</div>
<ul id="thelist">
<li>我是三冰 1</li>
<li>我是三冰 2</li>
<li>我是三冰 3</li>
<li>我是三冰 4</li>
<li>我是三冰 5</li>
<li>我是三冰 6</li>
<li>我是三冰 7</li>
<li>我是三冰 8</li>
<li>我是三冰 9</li>
<li>我是三冰 10</li>
<li>我是三冰 11</li>
<li>我是三冰 12</li>
<li>我是三冰 13</li>
</ul>
<div id="pullUp">
<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加載更多...</span>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
代碼非常簡(jiǎn)單，無(wú)需多言，僅僅搭建一個(gè)靜態(tài)結(jié)構(gòu)而已~~
效果如下：
對(duì)照這個(gè)效果圖看上面代碼簡(jiǎn)直太easy，暫時(shí)與iscroll沒(méi)有半毛錢關(guān)系，就是純靜態(tài)頁(yè)面，此時(shí)你們唯一沒(méi)有就是下面這個(gè)小圖標(biāo)，不用著急，文章最后會(huì)給到你的~~
二、完整Js代碼
<script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,
generatedCount = 0;
/**
* 下拉刷新 （自定義實(shí)現(xiàn)此方法）
* myScroll.refresh(); // 數(shù)據(jù)加載完成后，調(diào)用界面更新方法
*/
function pullDownAction () {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.getElementById('thelist');
for (i=0; i<3; i++) {
li = document.createElement('li');
li.innerText = '添加三冰 ' + (++generatedCount);
el.insertBefore(li, el.childNodes[0]);
}
myScroll.refresh(); //數(shù)據(jù)加載完成后，調(diào)用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}
/**
* 滾動(dòng)翻頁(yè) （自定義實(shí)現(xiàn)此方法）
* myScroll.refresh(); // 數(shù)據(jù)加載完成后，調(diào)用界面更新方法
*/
function pullUpAction () {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.getElementById('thelist');
for (i=0; i<3; i++) {
li = document.createElement('li');
li.innerText = '添加三冰 ' + (++generatedCount);
el.appendChild(li, el.childNodes[0]);
}
myScroll.refresh(); // 數(shù)據(jù)加載完成后，調(diào)用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}
/**
* 初始化iScroll控件
*/
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight;
myScroll = new iScroll('wrapper', {
scrollbarClass: 'myScrollbar', /* 重要樣式 */
useTransition: false, /* 此屬性不知用意，本人從true改為false */
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加載更多...';
}
},
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手開(kāi)始更新...';
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
this.minScrollY = -pullDownOffset;
} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手開(kāi)始更新...';
this.maxScrollY = this.maxScrollY;
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加載更多...';
this.maxScrollY = pullUpOffset;
}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '加載中...';
pullDownAction(); // Execute custom function (ajax call?)
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '加載中...';
pullUpAction(); // Execute custom function (ajax call?)
}
}
});
setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}
//初始化綁定iScroll控件
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
這么多代碼看啊，不用著急，挑幾個(gè)重點(diǎn)給你說(shuō)說(shuō)：
1）onRefresh函數(shù)是指頁(yè)面刷新或調(diào)用refresh()函數(shù)會(huì)觸發(fā)此函數(shù)，里面代碼中主要做【一些重置樣式和文字】的處理。
2）onScrollMove函數(shù)是指拖拽頁(yè)面，不松手的時(shí)候會(huì)觸發(fā)此函數(shù)，里面代碼中主要做【箭頭有個(gè)旋轉(zhuǎn)效果和松手提示】的處理。
3）onScrollEnd函數(shù)是指松開(kāi)手，停止拖拽的時(shí)候會(huì)觸發(fā)的函數(shù)，里面代碼中主要做【刷新數(shù)據(jù)和一些加載動(dòng)畫(huà)效果】的處理。
4）topOffset屬性主要是可以隱藏一個(gè)高度，正好把下拉刷新給隱藏掉
5）函數(shù)pullDownAction和pullUpAction中，我是自己用createElement函數(shù)造數(shù)據(jù)，但是真實(shí)開(kāi)發(fā)中，這里可以換成Ajax請(qǐng)求服務(wù)器數(shù)據(jù)即可
看看現(xiàn)在的效果如何：
現(xiàn)在數(shù)據(jù)什么的都能刷新了，只差那么一點(diǎn)點(diǎn)，如果下拉和上拉的時(shí)候，加載的小圖標(biāo)有個(gè)動(dòng)畫(huà)效果那就超級(jí)“完美”了：
既然是要來(lái)點(diǎn)動(dòng)畫(huà)效果，肯定是用最新的CSS3技術(shù)呀，廢話不多說(shuō)，直接貼完整代碼了：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll 實(shí)例：下拉刷新，滾動(dòng)翻頁(yè)</title>
<style type="text/css" media="all">
body,ul,li {
padding:0;
margin:0;
border:0;
}
body {
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
}
#header {
position:absolute;
top:0; left:0;
width:100%;
height:45px;
line-height:45px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
padding:0;
color:#eee;
font-size:20px;
text-align:center;
}
#header a {
color:#f3f3f3;
text-decoration:none;
font-weight:bold;
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}
#footer {
position:absolute;
bottom:0; left:0;
width:100%;
height:48px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
background-image:-o-linear-gradient(top, #999, #666 2%, #222);
padding:0;
border-top:1px solid #444;
}
#wrapper {
position:absolute; z-index:1;
top:45px; bottom:48px; left:0;
width:100%;
background:#555;
overflow:auto;
}
#scroller {
position:relative;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
float:left;
width:100%;
padding:0;
}
#scroller ul {
position:relative;
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
#scroller li {
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}
#scroller li > a {
display:block;
}
/**
*
* 下拉樣式 Pull down styles
*
*/
#pullDown, #pullUp {
background:#fff;
height:40px;
line-height:40px;
padding:5px 10px;
border-bottom:1px solid #ccc;
font-weight:bold;
font-size:14px;
color:#888;
}
#pullDown .pullDownIcon, #pullUp .pullUpIcon {
display:block; float:left;
width:40px; height:40px;
background:url(pull-icon@2x.png) 0 0 no-repeat;
-webkit-background-size:40px 80px; background-size:40px 80px;
-webkit-transition-property:-webkit-transform;
-webkit-transition-duration:250ms;
}
#pullDown .pullDownIcon {
-webkit-transform:rotate(0deg) translateZ(0);
}
#pullUp .pullUpIcon {
-webkit-transform:rotate(-180deg) translateZ(0);
}
/**
* 動(dòng)畫(huà)效果css3代碼
*/
#pullDown.flip .pullDownIcon {
-webkit-transform:rotate(-180deg) translateZ(0);
}
#pullUp.flip .pullUpIcon {
-webkit-transform:rotate(0deg) translateZ(0);
}
#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
background-position:0 100%;
-webkit-transform:rotate(0deg) translateZ(0);
-webkit-transition-duration:0ms;
-webkit-animation-name:loading;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}
@-webkit-keyframes loading {
from { -webkit-transform:rotate(0deg) translateZ(0); }
to { -webkit-transform:rotate(360deg) translateZ(0); }
}
</style>
</head>
<body>
<div id="header">
<a href="../db.html#page2">iScroll實(shí)例：下拉刷新，滾動(dòng)翻頁(yè)</a>
</div>
<div id="wrapper">
<div id="scroller">
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
</div>
<ul id="thelist">
<li>我是三冰 1</li>
<li>我是三冰 2</li>
<li>我是三冰 3</li>
<li>我是三冰 4</li>
<li>我是三冰 5</li>
<li>我是三冰 6</li>
<li>我是三冰 7</li>
<li>我是三冰 8</li>
<li>我是三冰 9</li>
<li>我是三冰 10</li>
<li>我是三冰 11</li>
<li>我是三冰 12</li>
<li>我是三冰 13</li>
</ul>
<div id="pullUp">
<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加載更多...</span>
</div>
</div>
</div>
<div id="footer"></div>
<script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,
generatedCount = 0;
/**
* 下拉刷新 （自定義實(shí)現(xiàn)此方法）
* myScroll.refresh(); // 數(shù)據(jù)加載完成后，調(diào)用界面更新方法
*/
function pullDownAction () {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.getElementById('thelist');
for (i=0; i<3; i++) {
li = document.createElement('li');
li.innerText = '添加三冰 ' + (++generatedCount);
el.insertBefore(li, el.childNodes[0]);
}
myScroll.refresh(); //數(shù)據(jù)加載完成后，調(diào)用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}
/**
* 滾動(dòng)翻頁(yè) （自定義實(shí)現(xiàn)此方法）
* myScroll.refresh(); // 數(shù)據(jù)加載完成后，調(diào)用界面更新方法
*/
function pullUpAction () {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.getElementById('thelist');
for (i=0; i<3; i++) {
li = document.createElement('li');
li.innerText = '添加三冰 ' + (++generatedCount);
el.appendChild(li, el.childNodes[0]);
}
myScroll.refresh(); // 數(shù)據(jù)加載完成后，調(diào)用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}
/**
* 初始化iScroll控件
*/
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight;
myScroll = new iScroll('wrapper', {
scrollbarClass: 'myScrollbar', /* 重要樣式 */
useTransition: false, /* 此屬性不知用意，本人從true改為false */
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加載更多...';
}
},
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手開(kāi)始更新...';
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
this.minScrollY = -pullDownOffset;
} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手開(kāi)始更新...';
this.maxScrollY = this.maxScrollY;
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加載更多...';
this.maxScrollY = pullUpOffset;
}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '加載中...';
pullDownAction(); // Execute custom function (ajax call?)
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '加載中...';
pullUpAction(); // Execute custom function (ajax call?)
}
}
});
setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}
//初始化綁定iScroll控件
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue插件mescroll.js實(shí)現(xiàn)移動(dòng)端上拉加載和下拉刷新
- vue.js整合vux中的上拉加載下拉刷新實(shí)例教程
- mescroll.js上拉加載下拉刷新組件使用詳解
- dropload.js插件下拉刷新和上拉加載使用詳解
- vue.js移動(dòng)端app之上拉加載以及下拉刷新實(shí)戰(zhàn)
- angularjs實(shí)現(xiàn)上拉加載和下拉刷新數(shù)據(jù)功能
- JS 插件dropload下拉刷新、上拉加載使用小結(jié)
- JS+CSS實(shí)現(xiàn)下拉刷新/上拉加載插件
- 原生js實(shí)現(xiàn)下拉刷新和上拉加載更多
相關(guān)文章
微信小程序開(kāi)發(fā)的四十個(gè)技術(shù)竅門總結(jié)（推薦）
這篇文章主要給大家介紹了微信小程序開(kāi)發(fā)的四十個(gè)技術(shù)竅門的相關(guān)資料，相信對(duì)大家的學(xué)習(xí)或者使用微信小程序具有一定的參考借鑒價(jià)值，所以特別推薦給大家，需要的朋友們可以一起來(lái)看看吧。2017-01-01
javascript解析ajax返回的xml和json格式數(shù)據(jù)實(shí)例詳解
這篇文章主要介紹了javascript解析ajax返回的xml和json格式數(shù)據(jù),結(jié)合實(shí)例形式詳細(xì)分析了JS ajax調(diào)用及返回值中xml與json格式數(shù)據(jù)的處理技巧,需要的朋友可以參考下2017-01-01
開(kāi)啟Javascript中apply、call、bind的用法之旅模式
在Javascript中，F(xiàn)unction是一種對(duì)象。Function對(duì)象中的this指向決定于函數(shù)被調(diào)用的方式,使用apply，call 與 bind 均可以改變函數(shù)對(duì)象中this的指向。2015-10-10
這篇文章主要介紹了fastadmin中調(diào)用js的方法，在文中給大家補(bǔ)充介紹了Fastadmin里面的js運(yùn)行原理,需要的朋友可以參考下2019-05-05
如何讓動(dòng)態(tài)插入的javascript腳本代碼跑起來(lái)。
如何讓動(dòng)態(tài)插入的javascript腳本代碼跑起來(lái)。...2007-01-01
iView 主要服務(wù)于 PC 界面的中后臺(tái)業(yè)務(wù)，是一套高質(zhì)量的開(kāi)源 UI 組件庫(kù)。這篇文章主要介紹了iView 上傳組件之手動(dòng)上傳功能,需要的朋友可以參考下2018-03-03
原生JavaScript實(shí)現(xiàn)的簡(jiǎn)單省市縣三級(jí)聯(lián)動(dòng)功能示例
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)的簡(jiǎn)單省市縣三級(jí)聯(lián)動(dòng)功能,結(jié)合完整實(shí)例形式分析了javascript聯(lián)動(dòng)菜單的實(shí)現(xiàn)方法,涉及javascript事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)拼圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
基于JavaScript實(shí)現(xiàn)圖片剪切效果
這篇文章主要介紹了用JavaScript實(shí)現(xiàn)圖片剪切效果,本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
這篇文章主要介紹了document.cookie 使用,主要包括cookie設(shè)置，修改cookie值及獲取cookie值的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-06-06