jQuery自定义滚动条完整实例
网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了jQuery自定义滚动条,以完整实例形式分析了jQuery响应scroll事件及鼠标事件实现滚动条效果的相关技巧,需要的朋友可以参考下
本文实例讲述了jQuery自定义滚动条实现方法。分享给大家供大家参考,具体如下:
很多时候,由于美观上的考虑,往往需要自定义各种各样的滚动条,因此,本人做了一个demo
运行效果截图如下:
以下是代码部分:
<html> <head> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script> $(function(){ //内容高度 var content = $("#div2"); //框的高度 var box = $("#div1"); //自定义的滚动条 var scrollbar = $("#div3"); var scroll=function(content,box,scrollbar){ var bigHeight = content.height(); var smallHeight = box.height(); var rate = smallHeight/bigHeight; var h = Math.floor(rate*smallHeight); scrollbar.height(h); var offset = box.offset() var offsetT = offset.+1; scrollbar.mousedown(function(e){ var divOffsetT = scrollbar.offset().; var tempT = e.pageY-divOffsetT; function move(e){ var newH = e.pageY-tempT-offsetT; if(newH<0){ newH=0; }else if(newH>(smallHeight-h)){ newH=smallHeight-h; } var rate2 = (newH+h)/smallHeight; var contentH = Math.floor(bigHeight*rate2-smallHeight); content.css("",-contentH+"px"); scrollbar.css("",newH+"px"); } $("body").on("mousemove",move); $("body").mouseup(function(){ $("body").off("mousemove",move); }); }); } scroll(content,box,scrollbar); }); </script> <style> *{ margin:0; padding: 0;} body{ font-size: 12px;} #div1{ width: 200px; height: 300px; margin: 50px auto; position: relative; _overflow: hidden; border: 1px solid #000;} #div2{ width: 180px; position: absolute; : 0; left: 5px;} #div3{ width: 10px; position: absolute; : 0; right:5px; background: #000;} </style> </head> <body> <div id="div1"> <div id="div3"></div> <div id="div2"> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> </div> </div> <textarea name="" id="txt" cols="30" rows="10"></textarea> </body> </html>
希望本文所述对大家jQuery程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程