自定義滾動條3.0

2019-11-21 01:15:51

字體：大中小

供稿：網(wǎng)友

支持任意形式（包括圖片自定義）的美化擴(kuò)展，跨瀏覽器支持
支持鼠標(biāo)按住上、下箭按鈕實(shí)現(xiàn)上下滾動
支持鼠標(biāo)滾輪放于“滾動條區(qū)”滾動，而不僅限放于滾動內(nèi)容區(qū)才滾
支持鼠標(biāo)按住滾動條（未松開）并移出滾動區(qū)域仍然能拖拽滾動
滾動條子根據(jù)左邊滾動內(nèi)容高與可視區(qū)域高度比例等比例，且當(dāng)滾動條細(xì)到一定程度時(shí)設(shè)置最小高度值,內(nèi)容過少時(shí)隱藏滾動條子
支持鼠標(biāo)在滾動條子的上下空白區(qū)間點(diǎn)擊實(shí)現(xiàn)上、下定位滾動（模擬windows滾動條）
支持鍵盤上下方向鍵，滾動區(qū)滾完之后才輪到頁面body滾
支持頁面刷新后保留滾動條滾動位置（需瀏覽器支持或打開cookie）
鼠標(biāo)放于自定義滾動區(qū)滾動滾輪，滾動區(qū)滾完之后才輪到頁面body滾
在原來幾個(gè)版本基礎(chǔ)上代碼重構(gòu)，這回只需在渲染的div里追加一個(gè)名為"dumascroll" 的class即可自動渲染，而不設(shè)此class的不受影響
修復(fù)了以往版本所發(fā)現(xiàn)的bug：以往版本

將來版本可繼續(xù)擴(kuò)展的功能有：
1、增加空格鍵的“下方向”快速滾動支持（更好地模擬windows滾動條用戶體驗(yàn)）
2、增加頁面body的渲染支持
3、增加textarea的渲染支持
4、增加嵌套div的渲染支持（目前代碼嵌套時(shí)有滾動的bug，被嵌套的div的滾動高度算法到這個(gè)版本時(shí)將大幅修改）
5、增加同時(shí)出現(xiàn)橫向滾動條的支持（當(dāng)有這方面需求時(shí)可以擴(kuò)展）

演示：

<!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=gb2312" /> <title></title> <style type="text/css"> * { margin:0; padding:0; } body { margin:20px 0 400px 20px; font:12px Arial; } h1 { font-size:14px; } ol,ul { margin:20px; line-height:160%; } ul li { color:#f00; } .a1 { width:300px; height:190px; border:1px solid #f00; overflow:auto; } .a2 { width:600px; height:350px; margin:100px 0 100px 80px; border:1px solid #369; background:#eee url(http://www.blueidea.com/articleimg/2009/07/6875/duma.gif) no-repeat 50%; overflow:auto; } .dumascroll {}        /*只需對需要渲染滾動條的div設(shè)置該class即可*/ .dumascroll_area {     height:100%;     overflow:hidden; } .dumascroll_bar,.dumascroll_handle,.dumascroll_handle_a,.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a {     background-image:url(http://www.blueidea.com/articleimg/2009/07/6875/un_bg_bar.gif); } .dumascroll_bar {     position:absolute;     top:0;     right:0;     z-index:9;     width:14px;     height:100%;     cursor:default;     -moz-user-select:none;     -khtml-user-select:none;     user-select:none;     background-repeat:repeat-y;     background-position:-42px 0;     float:left; } .dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_handle,.dumascroll_handle_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a {     position:absolute;     left:0; } .dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a {     width:100%;     height:14px;     color:#fff;     text-align:center; } .dumascroll_arrow_up,.dumascroll_arrow_up_a { top:0; } .dumascroll_arrow_down,.dumascroll_arrow_down_a { bottom:0; } .dumascroll_handle,.dumascroll_handle_a { width:100%; background-repeat:repeat-y; } .dumascroll_arrow_up { background-position:0 0; } .dumascroll_arrow_up_a { background-position:-14px 0; } .dumascroll_handle { background-position:-28px 0; } .dumascroll_handle_a { background-position:-56px 0; } .dumascroll_arrow_down { background-position:-70px 0; } .dumascroll_arrow_down_a { background-position:-84px 0; } </style> <script> var duma = {     $:function(o){ if(document.getElementById(o)) {return document.getElementById(o);} },     getStyle:function(o) { return o.currentStyle||document.defaultView.getComputedStyle(o,null); },     getOffset:function(o) {         var t = o.offsetTop,h = o.offsetHeight;         while(o = o.offsetParent) { t += o.offsetTop; }         return { top:t, height:h };     },     bind:function(o,eType,fn) {         if(o.addEventListener) { o.addEventListener(eType,fn,false); }         else if(o.attachEvent) { o.attachEvent("on" + eType,fn); }         else { o["on" + eType] = fn; }     },     stopEvent:function(e) {         e = e || window.event;         e.stopPropagation && (e.preventDefault(),e.stopPropagation()) || (e.cancelBubble = true,e.returnValue = false);     },     setCookie:function(c_name,value,expiredays) {         var exdate = new Date();         exdate.setDate(exdate.getDate() + expiredays);         document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());     },     getCookie:function(c_name) {         if(document.cookie.length > 0) {             c_start = document.cookie.indexOf(c_name + "=");             if(c_start != -1) {                 c_start = c_start + c_name.length + 1;                 c_end = document.cookie.indexOf(";",c_start);                 if(c_end == -1) { c_end = document.cookie.length; }                 return unescape(document.cookie.substring(c_start,c_end));             }         }         return "";     } }; duma.BeautifyScrollBar = function(obj,arrowUpCss,arrowUpActiveCss,handleCss,handleActiveCss,arrowDownCss,arrowDownActiveCss) {     this.arrowUpInterval;     this.arrowDownInterval;     this.barMouseDownInterval;     this.relY;     this.id = obj;     this.obj = duma.$(this.id);     this.setObjCss();        //預(yù)先設(shè)置父容器的css定位才能讓接下來的屬性設(shè)置起作用     this.obj.innerHTML = '<div   class="iwvjtn8m0"   id="' + obj + 'Area" class="dumascroll_area">' + this.obj.innerHTML + '</div><div   class="iwvjtn8m0"   id="' + obj + 'Bar" class="dumascroll_bar"><div   id="iwvjtn8m0"   class="dumascroll_arrow_up"></div><div   id="iwvjtn8m0"   class="dumascroll_handle"></div><div   id="iwvjtn8m0"   class="dumascroll_arrow_down"></div></div>';     this.area = duma.$(obj + "Area");     this.bar = duma.$(obj + "Bar");     this.barPos;     this.arrowUp = this.bar.getElementsByTagName("div")[0];     this.arrowUpCss = arrowUpCss;     this.arrowUpActiveCss = arrowUpActiveCss;     this.handle = this.bar.getElementsByTagName("div")[1];     this.handleCss = handleCss;     this.handleActiveCss = handleActiveCss;     this.arrowDown = this.bar.getElementsByTagName("div")[2];     this.arrowDownCss = arrowDownCss;     this.arrowDownActiveCss = arrowDownActiveCss;     this.handleMinHeight = 15;     this.arrowUpHeight = parseInt(duma.getStyle(this.arrowUp).height);     this.arrowDownHeight = parseInt(duma.getStyle(this.arrowDown).height);     this.areaScrollHeight = this.area.scrollHeight;     this.handleHeight = parseInt(this.area.offsetHeight/this.area.scrollHeight * (this.bar.offsetHeight - this.arrowUpHeight - this.arrowDownHeight)); } duma.BeautifyScrollBar.prototype = {     setObjCss:function() {         duma.getStyle(this.obj).position == "static" ? this.obj.style.position = "relative" : duma.getStyle(this.obj).backgroundColor == "transparent" ? this.obj.style.backgroundColor = "#fff" : null;        //若容器本來就沒有設(shè)position，則初始化為relative；若容器原來未設(shè)置背景色，則初始化為白色；     },     sethandle:function() {                //當(dāng)內(nèi)容超多時(shí)設(shè)置拖拽條子的最小高度         this.handle.style.top = this.arrowUpHeight + "px";         if(this.handleHeight > this.handleMinHeight) {             this.handleHeight < this.bar.offsetHeight - this.arrowUpHeight - this.arrowDownHeight ? this.handle.style.height = this.handleHeight + "px" : this.handle.style.display = "none";         }         else { this.handleHeight = this.handleMinHeight; this.handle.style.height = this.handleMinHeight + "px"; }     },     setBarPos:function() {                //將當(dāng)前滾動的距離值存入cookie         this.barPos = this.area.scrollTop + "";         duma.setCookie(this.id + "CookieName",this.barPos,1);     },     getBarPos:function() {         this.barPos = duma.getCookie(this.id + "CookieName");         if(this.barPos!=null && this.barPos!="") {             this.area.scrollTop = this.barPos;             this.areaScroll();         }     },     clearArrowUpInterval:function() { clearInterval(this.arrowUpInterval); },     clearArrowDownInterval:function() { clearInterval(this.arrowDownInterval); },     clearBarMouseDownInterval:function() { clearInterval(this.barMouseDownInterval); },     areaScroll:function() {         this.handle.style.display != "none" ? this.handle.style.top = this.area.scrollTop/(this.area.scrollHeight - this.area.offsetHeight) * (this.bar.offsetHeight - this.handleHeight - this.arrowUpHeight - this.arrowDownHeight) + this.arrowUpHeight + "px" : null;     },     areakeydown:function(e) {            //支持鍵盤上下按鍵         var that = this;         document.onkeydown = function(event) {             var e = event || window.event,             ek = e.keyCode || e.which;             if(ek == 40) { that.area.scrollTop += 25 }             else if(ek == 38) { that.area.scrollTop -= 25 }             if(that.area.scrollTop > 0 && that.area.scrollTop < that.area.scrollHeight - that.area.offsetHeight){ duma.stopEvent(e); }             that.setBarPos();         }     },     handleMove:function(e) {         var e = e || window.event;         this.area.scrollTop = (e.clientY - this.relY - this.arrowUpHeight)/(this.bar.offsetHeight - this.handleHeight - this.arrowUpHeight - this.arrowDownHeight)*(this.area.scrollHeight - this.area.offsetHeight);         this.setBarPos();     },     handleMouseDown:function(e) {         var that = this,e = e || window.event;         that.relY = e.clientY - that.handle.offsetTop;         that.handle.setCapture ? that.handle.setCapture() : null;         that.handle.className = that.handleActiveCss;         document.onmousemove = function(event) { that.handleMove(event); };         document.onmouseup = function() {             that.handle.className = that.handleCss;             that.handle.releaseCapture ? that.handle.releaseCapture() : null;             document.onmousemove = null;         };     },     barScroll:function(e) {         var e = e || window.event,eDir;        //設(shè)置滾輪事件,e.wheelDelta與e.detail分別兼容IE、W3C，根據(jù)返回值的正負(fù)來判斷滾動方向         if(e.wheelDelta) { eDir = e.wheelDelta/120; }         else if(e.detail) { eDir = -e.detail/3; }         eDir > 0 ? this.area.scrollTop -= 80 : this.area.scrollTop += 80;    //步長設(shè)80像素比較接近window滾動條的滾動速度         if(this.area.scrollTop > 0 && this.area.scrollTop < this.area.scrollHeight - this.area.offsetHeight){ duma.stopEvent(e); }         this.setBarPos();     },     barDown:function(e) {         var e = e || window.event,that = this,             eY = e.clientY,             mStep = this.bar.offsetHeight,             documentScrollTop = document.documentElement.scrollTop || document.body.scrollTop,             hOffset = duma.getOffset(this.handle),             bOffset = duma.getOffset(this.bar);         if(documentScrollTop + eY < hOffset.top) { this.barMouseDownInterval = setInterval(function(e){             that.area.scrollTop -= that.area.offsetHeight;             if(that.area.scrollTop <= (eY + documentScrollTop - bOffset.top - that.arrowUpHeight)/(that.bar.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.area.scrollHeight) { that.clearBarMouseDownInterval(); }             that.setBarPos();         },80); }         else if(documentScrollTop + eY > hOffset.top + hOffset.height) { this.barMouseDownInterval = setInterval(function(){             that.area.scrollTop += that.area.offsetHeight;             if(that.area.scrollTop >= (eY + documentScrollTop - bOffset.top - that.arrowUpHeight - hOffset.height)/(that.bar.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.area.scrollHeight) { that.clearBarMouseDownInterval(); }             that.setBarPos();         },80); }         duma.stopEvent(e);     },     arrowUpMouseDown:function(e) {         var that = this;         this.arrowUpInterval = setInterval(function(){ that.area.scrollTop -= 25; that.setBarPos(); },10);         this.arrowUp.className = this.arrowUpActiveCss;         duma.stopEvent(e);     },     arrowUpMouseUp:function() { this.clearArrowUpInterval(); this.arrowUp.className = this.arrowUpCss; },     arrowUpMouseOut:function() { this.clearArrowUpInterval(); this.arrowUp.className = this.arrowUpCss; },     arrowDownMouseDown:function(e) {         var that = this;         this.arrowDownInterval = setInterval(function(){ that.area.scrollTop += 25; that.setBarPos(); },10);         this.arrowDown.className = this.arrowDownActiveCss;         duma.stopEvent(e);     },     arrowDownMouseUp:function() { this.clearArrowDownInterval(); this.arrowDown.className = this.arrowDownCss; },     arrowDownMouseOut:function() { this.clearArrowDownInterval(); this.arrowDown.className = this.arrowDownCss; },     run:function(){         var that = this;         this.sethandle();         this.areaScroll();         this.getBarPos();         this.area.onscroll = function(){that.areaScroll()};         this.area.onmouseover = this.bar.onmouseover = function(event){that.areakeydown(event)};         this.area.onmouseout = this.bar.onmouseout = function(){document.onkeydown = null};         this.handle.onmousedown = function(event){that.handleMouseDown(event)};         this.bar.onmousedown = function(event){that.barDown(event)};         this.bar.onmouseup = function(){that.clearBarMouseDownInterval()};         this.bar.onmouseout = function(){that.clearBarMouseDownInterval()};         this.arrowUp.onmousedown = function(event){that.arrowUpMouseDown(event)};         this.arrowUp.onmouseup = function(){that.arrowUpMouseUp()};         this.arrowUp.onmouseout = function(){that.arrowUpMouseOut()};         this.arrowDown.onmousedown = function(event){that.arrowDownMouseDown(event)};         this.arrowDown.onmouseup = function(){that.arrowDownMouseUp()};         this.arrowDown.onmouseout = function(){that.arrowDownMouseOut()};         duma.bind(this.obj,"mousewheel",function(event){that.barScroll(event)});         duma.bind(this.obj,"DOMMouseScroll",function(event){that.barScroll(event)});     } } duma.BeautifyScrollBar.init = function() {     var o = document.getElementsByTagName("div"),         oLen = o.length,         dumascrollClass = //bdumascroll/b/,         oArr = [],         oArrLen = oArr.length;     for(var i=0; i<oLen; i++) {         if(dumascrollClass.test(o[i].className)) {             oArr.push("dumaScrollAreaId_" + i);             oArrLen = oArr.length;             o[i].id = oArr[oArrLen - 1];         }     }     for(var j=0; j<oArrLen; j++) {         new duma.BeautifyScrollBar(oArr[j],"dumascroll_arrow_up","dumascroll_arrow_up_a","dumascroll_handle","dumascroll_handle_a","dumascroll_arrow_down","dumascroll_arrow_down_a").run();     } } duma.bind(window,"load",duma.BeautifyScrollBar.init); </script> </head> <body> <div   id="iwvjtn8m0"   class="a dumascroll b" style="width:300px; height:190px; padding:5px; border:1px solid #f00; line-height:400%; overflow:hidden;"> 我是第一個(gè)被渲染的，真不幸<br>我是第一個(gè)被渲染的，真不幸<br>我是第一個(gè)被渲染的，真不幸<br>我是第一個(gè)被渲染的，真不幸<br>我是第一個(gè)被渲染的，真不幸<br>我是第一個(gè)被渲染的，真不幸<br>我是第一個(gè)被渲染的，真不幸<br>我是第一個(gè)被渲染的，真不幸<br>我是第一個(gè)被渲染的，真不幸<br>我是第一個(gè)被渲染的，真不幸<br>我是第一個(gè)被渲染的，真不幸<br>我是第一個(gè)被渲染的，真不幸<br>我是第一個(gè)被渲染的，真不幸<br>我是第一個(gè)被渲染的，真不幸<br>我是第一個(gè)被渲染的，真不幸<br> </div> <div   id="iwvjtn8m0"   class="a dumfaf" style="width:400px; height:100px; margin:20px; border:2px inset #eee; overflow:auto;"> 我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！<br> 我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！<br>我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！<br>我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！<br>我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！<br>我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！<br>我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！<br>被渲染，我就不用你的class，拿我怎么樣？哈哈哈！<br>我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！<br>我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！<br>我還是普通的，我不希望被渲染，我就不用你的class，拿我怎么樣？哈哈哈！<br> </div> <div   id="iwvjtn8m0"   class="a dumascroll" style="width:780px; height:350px; margin:20px; border:1px solid #369; background:#eee url(http://www.blueidea.com/articleimg/2009/07/6875/duma.gif) no-repeat 50%; overflow:hidden;"> 22222<br><div   id="iwvjtn8m0"   class="a dumascroll b" style=" width:200px; height:150px; margin:20px; border:1px solid #093; line-height:400%; background:#fff; overflow:hidden; float:left;"> 真倒霉啊，俺還是被嵌套渲染的，555555<br> 真倒霉啊，俺還是被嵌套渲染的，555555<br> 真倒霉啊，俺還是被嵌套渲染的，555555<br> 真倒霉啊，俺還是被嵌套渲染的，555555<br> 真倒霉啊，俺還是被嵌套渲染的，555555<br> 真倒霉啊，俺還是被嵌套渲染的，555555<br> 真倒霉啊，俺還是被嵌套渲染的，555555<br> 真倒霉啊，俺還是被嵌套渲染的，555555<br> 真倒霉啊，俺還是被嵌套渲染的，555555<br> 真倒霉啊，俺還是被嵌套渲染的，555555<br> 真倒霉啊，俺還是被嵌套渲染的，555555<br> 真倒霉啊，俺還是被嵌套渲染的，555555<br> 真倒霉啊，俺還是被嵌套渲染的，555555<br> 真倒霉啊，俺還是被嵌套渲染的，555555<br> 真倒霉啊，俺還是被嵌套渲染的，555555<br> 真倒霉啊，俺還是被嵌套渲染的，555555<br> 真倒霉啊，俺還是被嵌套渲染的，555555<br> </div> <div   id="iwvjtn8m0"   class="a" style=" width:200px; height:120px; margin:20px; border:2px inset #eee; background:#fff; overflow:auto; float:right; float:right;"> 笨喲你，嵌套就嵌套，你不用他class就不會被渲染，你看看我，羨慕吧<br>笨喲你，嵌套就嵌套，你不用他class就不會被渲染，你看看我，羨慕吧<br>笨喲你，嵌套就嵌套，你不用他class就不會被渲染，你看看我，羨慕吧<br>笨喲你，嵌套就嵌套，你不用他class就不會被渲染，你看看我，羨慕吧<br>笨喲你，嵌套就嵌套，你不用他class就不會被渲染，你看看我，羨慕吧<br>笨喲你，嵌套就嵌套，你不用他class就不會被渲染，你看看我，羨慕吧<br>笨喲你，嵌套就嵌套，你不用他class就不會被渲染，你看看我，羨慕吧<br>笨喲你，嵌套就嵌套，你不用他class就不會被渲染，你看看我，羨慕吧<br>笨喲你，嵌套就嵌套，你不用他class就不會被渲染，你看看我，羨慕吧<br> </div><br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111 </div> <h1>圖片自定義滾動條3.0（Duma"自動渲染版"，也許世間萬物都會變，但是真摯的愛，卻永遠(yuǎn)留存在心中！）</h1> <ol> <li>支持任意形式（包括圖片自定義）的美化擴(kuò)展，跨瀏覽器支持</li> <li>支持鼠標(biāo)按住上、下箭按鈕實(shí)現(xiàn)上下滾動</li> <li>支持鼠標(biāo)滾輪放于"滾動條區(qū)"滾動，而不僅限放于滾動內(nèi)容區(qū)才滾</li> <li>支持鼠標(biāo)按住滾動條（未松開）并移出滾動區(qū)域仍然能拖拽滾動</li> <li>滾動條子根據(jù)左邊滾動內(nèi)容高與可視區(qū)域高度比例等比例，且當(dāng)滾動條細(xì)到一定程度時(shí)設(shè)置最小高度值,內(nèi)容過少時(shí)隱藏滾動條子</li> <li>支持鼠標(biāo)在滾動條子的上下空白區(qū)間點(diǎn)擊實(shí)現(xiàn)上、下定位滾動（模擬windows滾動條）</li> <li>支持鍵盤上下方向鍵，滾動區(qū)滾完之后才輪到頁面body滾</li> <li>支持頁面刷新后保留滾動條滾動位置（需瀏覽器支持或打開cookie）</li> <li>鼠標(biāo)放于自定義滾動區(qū)滾動滾輪，滾動區(qū)滾完之后才輪到頁面body滾</li> <li>在原來幾個(gè)版本基礎(chǔ)上代碼重構(gòu)，這回只需在渲染的div里追加一個(gè)名為"dumascroll" 的class即可自動渲染，而不設(shè)此class的不受影響</li> <li>修復(fù)了以往版本所發(fā)現(xiàn)的bug：<a  target="">以往版本</a></li> </ol> <h2>將來版本可繼續(xù)擴(kuò)展的功能有：</h2> <ul> <li>增加空格鍵的"下方向"快速滾動支持（更好地模擬windows滾動條用戶體驗(yàn)）</li> <li>增加頁面body的渲染支持</li> <li>增加textarea的渲染支持</li> <li>增加嵌套div的渲染支持（目前代碼嵌套時(shí)有滾動的bug，被嵌套的div的滾動高度算法到這個(gè)版本時(shí)將大幅修改）</li> <li>增加同時(shí)出現(xiàn)橫向滾動條的支持（當(dāng)有這方面需求時(shí)可以擴(kuò)展）</li> </ul> <p>期待大家?guī)兔ふ倚耣ug并提出寶貴建議，相信下一版本將做的更好，謝謝（QQ：149561420，gTalk：dumachuixuf@gmail.com）。</p> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：javascript iframe內(nèi)的函數(shù)調(diào)用實(shí)現(xiàn)方法

下一篇：9個(gè)javascript語法高亮插件推薦