电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

js實現自定義滾動條的示例

瀏覽:93日期:2024-04-14 11:22:33

自定義滾動條

目錄

代碼實例 代碼解析 下載源碼鏈接

代碼實例

* {padding: 0;margin: 0;}#box1 {width: 500px;height: 20px;background: #999;position: relative;margin: 20px auto;}#box2 {width: 20px;height: 20px;background: green;position: absolute;}#box3 {width: 0;height: 0;margin: 20px auto;}#box3 img {width: 100%;height: 100%;}<div id='box1'><div id='box2'></div></div><div id='box3'><img src='http://www.hdgsjgj.cn/bcjs/1.jpg'></div>// 獲取dom元素var oBox1 = document.getElementById(’box1’);var oBox2 = document.getElementById(’box2’);var oBox3 = document.getElementById(’box3’);// 按下滾動條后的操作oBox2.onmousedown = function(e) {// 獲取事件的必備操作,保證事件被獲取var oEvent = e || event// 保證只有被按下滾動條后才能執行此函數document.onmousemove = function(e) {var oEvent = e || eventvar l = oEvent.clientX - oBox1.offsetLeft// 獲取滾動條可活動的寬度范圍var wid = oBox1.offsetWidth - oBox2.offsetWidthif (l < 0) {l = 0} else if (l > wid) {l = wid}// 位置定位oBox2.style.left = l + ’px’// 根據滾動條位置獲得比例var scale = l / wid// 圖片的寬度和高度var w = 3264 * scalevar h = 4080 * scale// oBox3.style.cssText是加在內嵌style中的oBox3.style.cssText += ’width:’ + w + ’px;height:’ + h + ’px;’}// 保證鼠標松開后事件不再執行document.onmouseup = function() {document.onmousemove = nulldocument.onmousedown = null}}

代碼解析

elem.style.cssText是加在內嵌style中的

// oBox3.style.cssText是加在內嵌style中的oBox3.style.cssText += ’width:’ + w + ’px;height:’ + h + ’px;

下載源碼鏈接

星輝的Github

以上就是js實現自定義滾動條的示例的詳細內容,更多關于js實現自定義滾動條的資料請關注好吧啦網其它相關文章!

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 首页_中夏易经起名网 | 天津试验仪器-电液伺服万能材料试验机,恒温恒湿标准养护箱,水泥恒应力压力试验机-天津鑫高伟业科技有限公司 | PC构件-PC预制构件-构件设计-建筑预制构件-PC构件厂-锦萧新材料科技(浙江)股份有限公司 | COD分析仪|氨氮分析仪|总磷分析仪|总氮分析仪-圣湖Greatlake | 网站建设-高端品牌网站设计制作一站式定制_杭州APP/微信小程序开发运营-鼎易科技 | 知企服务-企业综合服务(ZiKeys.com)-品优低价、种类齐全、过程管理透明、速度快捷高效、放心服务,知企专家! | IIS7站长之家-站长工具-爱网站请使用IIS7站长综合查询工具,中国站长【WWW.IIS7.COM】 | SMN-1/SMN-A ABB抽屉开关柜触头夹紧力检测仪-SMN-B/SMN-C-上海徐吉 | 防伪溯源|防窜货|微信二维码营销|兆信_行业内领先的防伪防窜货数字化营销解决方案供应商 | 高防护蠕动泵-多通道灌装系统-高防护蠕动泵-www.bjhuiyufluid.com慧宇伟业(北京)流体设备有限公司 | 网优资讯-为循环资源、大宗商品、工业服务提供资讯与行情分析的数据服务平台 | 无痕胶_可移胶_无痕双面胶带_可移无痕胶厂家-东莞凯峰 | 优考试_免费在线考试系统_培训考试系统_题库系统_组卷答题系统_匡优考试 | 生物颗粒燃烧机-生物质燃烧机-热风炉-生物颗粒蒸汽发生器-丽水市久凯能源设备有限公司 | 百方网-百方电气网,电工电气行业专业的B2B电子商务平台 | ORP控制器_ORP电极价格-上优泰百科 | 通辽信息港 - 免费发布房产、招聘、求职、二手、商铺等信息 www.tlxxg.net | 国际高中-国际学校-一站式择校服务-远播国际教育 | 酒万铺-酒水招商-酒水代理| 防水套管_柔性防水套管_刚性防水套管-巩义市润达管道设备制造有限公司 | 120kv/2mA直流高压发生器-60kv/2mA-30kva/50kv工频耐压试验装置-旭明电工 | 河北中仪伟创试验仪器有限公司是专业生产沥青,土工,水泥,混凝土等试验仪器的厂家,咨询电话:13373070969 | 石家庄装修设计_室内家装设计_别墅装饰装修公司-石家庄金舍装饰官网 | 防水试验机_防水测试设备_防水试验装置_淋雨试验箱-广州岳信试验设备有限公司 | 专业生产动态配料系统_饲料配料系统_化肥配料系统等配料系统-郑州鑫晟重工机械有限公司 | 透平油真空滤油机-变压器油板框滤油机-滤油车-华之源过滤设备 | 万烁建筑设计院-建筑设计公司加盟,设计院加盟分公司,市政设计加盟 | 实验室隔膜泵-无油防腐蚀隔膜泵-耐腐蚀隔膜真空泵-杭州景程仪器 电杆荷载挠度测试仪-电杆荷载位移-管桩测试仪-北京绿野创能机电设备有限公司 | 手表腕表维修保养鉴定售后服务中心网点 - 名表维修保养 | 除尘布袋_液体过滤袋_针刺毡滤料-杭州辉龙过滤技术有限公司 | 彩超机-黑白B超机-便携兽用B超机-多普勒彩超机价格「大为彩超」厂家 | pos机办理,智能/扫码/二维码/微信支付宝pos机-北京万汇通宝商贸有限公司 | 武汉EPS线条_EPS装饰线条_EPS构件_湖北博欧EPS线条厂家 | 365文案网_全网创意文案句子素材站 | ?水马注水围挡_塑料注水围挡_防撞桶-常州瑞轩水马注水围挡有限公司 | 熔体泵|换网器|熔体齿轮泵|熔体计量泵厂家-郑州巴特熔体泵有限公司 | 上海地磅秤|电子地上衡|防爆地磅_上海地磅秤厂家–越衡称重 | 超声波破碎仪-均质乳化机(供应杭州,上海,北京,广州,深圳,成都等地)-上海沪析实业有限公司 | 2025第九届世界无人机大会| 不锈钢螺丝 - 六角螺丝厂家 - 不锈钢紧固件 - 万千紧固件--紧固件一站式采购 | 浴室柜-浴室镜厂家-YINAISI · 意大利设计师品牌 | 咿耐斯 |-浙江台州市丰源卫浴有限公司 |