图片自定义滚动条3.0- 浏览器 - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网页特效 > 浏览器 > 图片自定义滚动条3.0

浏览器: Firefox和IE浏览器之间的7个JavaScript差异

No. « ‹ 1 2 »

技术文章搜索

关键字

浏览器中的图片自定义滚动条3.0

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-10 浏览: 231 ::

收藏到网摘: n/a

山寨无处不在,山寨傲游浏览器闪亮登场网页特效代码:模仿MSN消息提示的效果

运行代码框
<!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></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.ruanchen.com/'<div id="' + obj + 'Area" class="dumascroll_area">' + this.obj.innerHTML + '</div><div id="' + obj + 'Bar" class="dumascroll_bar"><div class="dumascroll_arrow_up"></div><div class="dumascroll_handle"></div><div 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; //若容器本来就没有设position，则初始化为relative；若容器原来未设置背景色，则初始化为白色； }, sethandle:function() { //当内容超多时设置拖拽条子的最小高度 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() { //将当前滚动的距离值存入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; //设置滚轮事件,e.wheelDelta与e.detail分别兼容IE、W3C，根据返回值的正负来判断滚动方向 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; //步长设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 class="a dumascroll b" style="width:300px; height:190px; padding:5px; border:1px solid #f00; line-height:400%; overflow:hidden;"> 我是第一个被渲染的，真不幸<br />我是第一个被渲染的，真不幸<br />我是第一个被渲染的，真不幸<br />我是第一个被渲染的，真不幸<br />我是第一个被渲染的，真不幸<br />我是第一个被渲染的，真不幸<br />我是第一个被渲染的，真不幸<br />我是第一个被渲染的，真不幸<br />我是第一个被渲染的，真不幸<br />我是第一个被渲染的，真不幸<br />我是第一个被渲染的，真不幸<br />我是第一个被渲染的，真不幸<br />我是第一个被渲染的，真不幸<br />我是第一个被渲染的，真不幸<br />我是第一个被渲染的，真不幸<br /> </div> <div 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 class="a dumascroll" style="width:780px; height:350px; margin:20px; border:1px solid #369; background:#eee url(http://www.ruanchen.com/"runCode(this.offsetParent.getElementsByTagName('textarea')[0])" type="button" value="运行代码" /> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]</span></p> <p><span>图片自定义滚动条3.0（Duma“自动渲染版”，也许世间万物都会变，但是真挚的爱，却永远留存在心中！）</span></p> <ol> <li><span>支持任意形式（包括图片自定义）的美化扩展，跨浏览器支持</span> </li> <li><span>支持鼠标按住上、下箭按钮实现上下滚动</span> </li> <li><span>支持鼠标滚轮放于“滚动条区”滚动，而不仅限放于滚动内容区才滚</span> </li> <li><span>支持鼠标按住滚动条（未松开）并移出滚动区域仍然能拖拽滚动</span> </li> <li><span>滚动条子根据左边滚动内容高与可视区域高度比例等比例，且当滚动条细到一定程度时设置最小高度值,内容过少时隐藏滚动条子</span> </li> <li><span>支持鼠标在滚动条子的上下空白区间点击实现上、下定位滚动（模拟windows滚动条）</span> </li> <li><span></span><span>支持键盘上下方向键，滚动区滚完之后才轮到页面body滚</span> </li> <li><span>支持页面刷新后保留滚动条滚动位置（需浏览器支持或打开cookie）</span> </li> <li><span>鼠标放于自定义滚动区滚动滚轮，滚动区滚完之后才轮到页面body滚</span> </li> <li><span>在原来几个版本基础上代码重构，这回只需在渲染的div里追加一个名为"dumascroll" 的class即可自动渲染，而不设此class的不受影响</span> </li> <li><span>修复了以往版本所发现的bug：以往版本 </span></li> </ol> <p><span><strong>将来版本可继续扩展的功能有</strong>：</span></p> <ul> <li><span>增加空格键的“下方向”快速滚动支持（更好地模拟windows滚动条用户体验）</span> </li> <li><span>增加页面body的渲染支持</span> </li> <li><span>增加textarea的渲染支持</span> </li> <li><span>增加嵌套div的渲染支持（目前代码嵌套时有滚动的bug，被嵌套的div的滚动高度算法到这个版本时将大幅修改）</span> </li> <li><span>增加同时出现横向滚动条的支持（当有这方面需求时可以扩展）</span></li> </ul> <p><span>期待大家帮忙寻找新bug并提出宝贵建议</span></p> <div style="text-align:left; margin-top:0px; clear:both;"> </div> <div id="tpage"> <span style="float:left;width:45%" class="text-truncate"> <img align="absmiddle" src="https://static.ruanchen.com/img/pre_art.gif" /> <a href="/tech/view/doc/36884/p/2/" title="山寨无处不在,山寨傲游浏览器闪亮登场">山寨无处不在,山寨傲游浏览器闪亮登场</a></span> <span style="float:right;width:45%;text-align:right" class="text-truncate"> <a href="/tech/view/doc/36886/p/2/" title="网页特效代码:模仿MSN消息提示的效果">网页特效代码:模仿MSN消息提示的效果</a> <img align="absmiddle" src="https://static.ruanchen.com/img/next_art.gif"/></span> </div> </div> <div style="clear:both;"> <script language="javascript"> var infoid = '36885'; var classid = 'tech'; </script> <script language="JavaScript" src="https://static.ruanchen.com/js/mood.js"></script> </div> <div id="cmt"> <h3> <img src="https://static.ruanchen.com/img/cmt.gif" align="absmiddle" /> 评论 (0) <small class="pagenav-listbar"> <a style="padding:5px;" href="javascript:tech_cmt('36885')">All</a> </small> </h3> <div id="cmt-list"></div> <form method="post" action="#cmt" onsubmit="alert('您还没有登陆，登陆后才能进行此操作。');return false;"> <textarea id="content" name="content" style="width:100%; height:100px;">

登陆还没注册？

浏览器 中的 图片自定义滚动条3.0

浏览器中的图片自定义滚动条3.0