jQuery自定义滚动条完整实例
本文实例讲述了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.top+1;
scrollbar.mousedown(function(e){
var divOffsetT = scrollbar.offset().top;
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("top",-contentH+"px");
scrollbar.css("top",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; top: 0; left: 5px;}
#div3{ width: 10px; position: absolute; top: 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程序设计有所帮助。
相关推荐
-
jQuery滚动条插件nanoscroller使用指南
网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条. 美化滚动条最简单的方式就是使用jquery插件,本文介绍的就是jquery插件中的滚动条插件nanoscroller. 官方展示,样式可自定义 1.nanoscroller插件功能 对内容实现滚动功能 2.nanoscroller官方地址 http://jamesflorentino.githu
-
jquery自定义滚动条插件示例分享
复制代码 代码如下: <!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="
-
学习使用jquery iScroll.js移动端滚动条插件
大家在日常工作中最常用的插件是什么,jQurey?Lazyload?但是这些都是在PC端,但是在移动端最常用的插件莫过于iScroll了,iScroll到底是什么东西,应该怎么用?iScroll是个很强大的插件,我也只是略懂皮毛,这里我们简单的介绍一下. iScroll的产生: iScroll的产生完全是因为移动版webkit浏览器,例如在iPhone,Android 的移动设备上. iScroll的使用方法: iScroll的原理是外层有一个溢出隐藏(overflow:hidden;)的DOM
-
jquery滚动条插件jScrollPane的使用介绍
这是一个js的页面滚动条插件 使用时引入三个文件:(路径自行填写) 复制代码 代码如下: <link type="text/css" href="路径/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="路径/jquery.mousewheel.js
-
JQuery+DIV自定义滚动条样式的具体实现
JQuery计算滚动条长度和位置,代码如下: javascript 复制代码 代码如下: <script type="text/javascript"> var scrMinHeight = 1; //滚动条最小高度 var scrMaxHeight = 0; //滚动条最大高度 var scrDefualtTop = 80; //滚动条默认位置 var scrHeight = 0; //初始化滚动条 function InitScrol
-
jQuery实现的自定义滚动条实例详解
本文实例讲述了jQuery实现的自定义滚动条.分享给大家供大家参考,具体如下: 可以自由的给滚动条定义背景,上下按钮,当然不仅仅是颜色,连图片当背景也可以.支持鼠标滚轮,点击滚动条滚轴定位,上下按钮久按加速,兼容 ie,firefox,chrome. 调用方法: $("#a").jscroll(); demo: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset=
-
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
leonaScroll-1.1最新版 leonaScroll-1.1.js 欢迎使用leonaScroll-1.1.js,如您在使用过程中发现更多问题,欢迎指正! 更新:1.1版本 1.修复了前面初始版本中的一些bug,比如不能自适应用户的文本内容,css文件繁杂 2.用户只需调用一个方法即可使用该插件,无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素,显得更为自由 3.增设了滚动条宽度.上下微调按钮高度,滚动文本区域的设置 4.增设了文本内容未超出时是否显示滚动条可选设置选项
-
jQuery iScroll.js 移动端滚动条美化插件第1/5页
官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ 'Carousel' demo iScroll功能很强大,目前我只用来 自定义滚动条 以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项. 一.用法 iScroll对要滚动的元素进行初始化,且不限制一个页面中使用iScroll的元素个数. 使用iScroll时,DOM树的结构要足够
-
利用div+jquery自定义滚动条样式的2种方法
最近做项目中有一个模块是用于实时监控的,左边有个菜单栏用于显示所有的设备,那当然是从数据库中动态获取的了,右边是个iframe用于显示监控画面.本来这个功能并不复杂,左边的菜单项是利用dtree.js来实现的,可时当功能实现完成之后,却发现一个问题,就是左边菜单栏中的设备名有的会很长,会超出了div的长度,准确说是左边iframe的宽度和长度不够.那么,这时就必须要利用滚动条了,可以设置左边菜单项div的overflow-x:auto;overlfow-y:auto;这样就会自动生成了滚动条,但
-
jQuery自定义滚动条完整实例
本文实例讲述了jQuery自定义滚动条实现方法.分享给大家供大家参考,具体如下: 很多时候,由于美观上的考虑,往往需要自定义各种各样的滚动条,因此,本人做了一个demo 运行效果截图如下: 以下是代码部分: <html> <head> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script> $(function(
-
jQuery自定义动画函数实例详解(附demo源码)
本文实例讲述了jQuery自定义动画函数完整实现技巧.分享给大家供大家参考,具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-zdy-dh-move-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d
-
Vue 自定义指令功能完整实例
本文实例讲述了Vue 自定义指令功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义指令</title> <script type="text/javascript" src="https://cdn.bootcss.com/v
-
jQuery操作动画完整实例分析
本文实例讲述了jQuery操作动画.分享给大家供大家参考,具体如下: <html> <head> <title>jQuery操作动画</title> <meta charset="UTF-8"/> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="
-
jQuery操作事件完整实例分析
本文实例讲述了jQuery操作事件.分享给大家供大家参考,具体如下: <html> <head> <title>jQuery操作事件</title> <meta charset="UTF-8"/> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="
-
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
本文实例讲述了jQuery实现导航滚动到指定内容效果.分享给大家供大家参考,具体如下: 做页面制作也有两年了,其中也做过许多页面效果,有简单的,也有复杂的,今天就来分享一个导航滚动到内容的特效. 平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有"小尾巴",今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有"小尾巴". html: <!DOCTYPE
-
jQuery动态添加可拖动元素完整实例(附demo源码下载)
本文实例讲述了jQuery动态添加可拖动元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: index.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type&