六、html+js网页滚动条插件

骑猪看日落 2022-11-13 11:26 205阅读 0赞

### 文章目录 ###

*  六、html+js网页滚动条插件
 *   *  6.1 图片预览
     *  6.2 index.html代码
     *  6.3 mousescroll.js代码
     *  6.4 jquery.min.js代码

--------------------

# 六、html+js网页滚动条插件 #

## 6.1 图片预览 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70_pic_center 1]

## 6.2 index.html代码 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    		<title>html+js网页滚动条插件</title>
    
    		<style type="text/css" media="screen">
    			/* #scrollwrap{width:500px; height: 300px;position: relative;} */
    			* { 
    				margin: 0;
    				padding: 0;
    			}
    
    			img { 
    				border: 0;
    			}
    
    			ol,
    			ul,
    			li { 
    				list-style: none;
    			}
    
    			body { 
    				font-family: '微软雅黑';
    			}
    
    			h3 { 
    				background: #ddd;
    				padding: 10px;
    				margin: 20px 0 10px;
    			}
    
    			#scrolllayout { 
    				width: 500px;
    				height: 300px;
    				border: 1px solid #111;
    				margin: 50px auto;
    				padding: 20px;
    			}
    
    			.scrollcontent { 
    				width: 500px;
    				top: 0;
    				left: 0;
    				padding: 20px;
    			}
    
    
    			/* 滚动条样式 */
    			#Yscrollouter { 
    				width: 10px;
    				height: 340px;
    				background: #dedede;
    				position: absolute;
    				top: 0;
    				right: 0;
    				display: none;
    			}
    
    			#Yscrollinner { 
    				width: 10px;
    				height: 100px;
    				background: #bbb;
    				border-radius: 10px;
    				position: absolute;
    				top: 0;
    				left: 0;
    			}
    
    			/* 滚动条样式 */
    
    
    			#div1 { 
    				width: 200px;
    				height: 300px;
    				border: 5px solid #111;
    				padding: 0 20px;
    				margin: 0 auto;
    				overflow: hidden;
    				position: relative;
    			}
    
    			.div2 { 
    				width: 200px;
    				padding: 20px;
    				position: absolute;
    				left: 0;
    				top: 0;
    			}
    		</style>
    
    		<script src="js/jquery.min.js"></script>
    		<script src="js/mousescroll.js"></script>
    
    	</head>
    	<body>
    
    		<div id="scrolllayout">
    			<div class="scrollcontent">
    				<h3>在每个匹配元素的上下文中执行一个函数。</h3>
    				<p>这意味着每次执行传入的函数（对于每个匹配的元素都是一次），“this”关键字指向特定的DOM元素。
    					此外，函数在执行时传递一个参数，表示元素在匹配集（整数，零索引）中的位置。
    					在每个函数中返回'false'会完全停止遍历所有元素的循环（这就像使用正常循环的'break'一样）。 从循环中返回'true'跳到下一次迭代（这就像使用正常循环的'continue'一样）。</p>
    				<h3>在每个匹配元素的上下文中执行一个函数。</h3>
    				<p>
    					这意味着每次执行传入的函数（对于每个匹配的元素都是一次），“this”关键字指向特定的DOM元素。
    					此外，函数在执行时传递一个参数，表示元素在匹配集（整数，零索引）中的位置。
    					在每个函数中返回'false'会完全停止遍历所有元素的循环（这就像使用正常循环的'break'一样）。 从循环中返回'true'跳到下一次迭代（这就像使用正常循环的'continue'一样）。</p>
    				<h3>在匹配集中的指定索引处访问单个匹配的DOM元素。</h3>
    				<p>
    					这使您可以提取实际的DOM元素并直接对其进行操作，而无需在其上使用jQuery功能。 这个被称为$（this）.get（0）的函数相当于在jQuery对象本身上使用方括号表示法，如$（this）[0]。</p>
    			</div>
    		</div>
    		<div id="div1">
    			<div class="div2">
    				<h3>Extends the jQuery object itself.</h3>
    				<p>Can be used to add functions into the jQuery namespace. See 'jQuery.fn.extend' for more information on using
    					this method to add Plugins.</p>
    				<h3>Extends the jQuery element set to provide new methods (used to make a typical jQuery plugin).</h3>
    				<p>Can be used to add functions into the to add plugin methods (plugins).</p>
    				<h3>Run this function to give control of the $ variable back to whichever library first implemented it.</h3>
    				<p>This helps to make sure that jQuery doesn't conflict with the $ object of other libraries.
    					By using this function, you will only be able to access jQuery using the 'jQuery' variable. For example, where you
    					used to do $("div p"), you now must do jQuery("div p").
    					NOTE: This function must be called after including the jQuery javascript file, but before including any other
    					conflicting library, and also before actually that other conflicting library gets used, in case jQuery is included
    					last.</p>
    			</div>
    		</div>
    
    		<script type="text/javascript">
    			// 在这里修改id，和速度
    			$(function() { 
    				var api1 = new myApi();
    				api1.mouseScroll.inte($('#scrolllayout'), 10);
    				var api2 = new myApi();
    				api2.mouseScroll.inte($('#div1'), 10);
    			});
    		</script>
    	</body>
    </html>

## 6.3 mousescroll.js代码 ##

'use strict';
    
    //下面别动
    function myApi() { 
    
    	this.mouseScroll = { 
    
    		inte: function(obj, value) { 
    			this.OBJ = obj;
    			this.addscroll(obj);
    
    
    
    			var outH = obj.outerHeight(),
    				oScrollcontent = obj.children(':first'),
    				contentH = oScrollcontent.outerHeight(),
    				oYscrollinnerH = outH / contentH * outH,
    				oYscrollouter = obj.find('#Yscrollouter'),
    				oYscrollinner = obj.find('#Yscrollinner');
    
    			obj.css({ 
    				'position': 'relative',
    				'overflow': 'hidden'
    			});
    			oScrollcontent.css('position', 'absolute');
    
    			if (contentH > outH) { 
    				this.mousehover(obj, oYscrollouter, oYscrollinner);
    				this.mousewheel(obj, value, oScrollcontent, oYscrollinner, outH, contentH, oYscrollinnerH);
    				this.mousemoved(obj, oScrollcontent, oYscrollouter, oYscrollinner, outH, contentH, oYscrollinnerH);
    			};
    		},
    
    		addscroll: function(obj, value) { 
    			obj.append('<div id="Yscrollouter"><div id="Yscrollinner"></div></div>');
    			$('#Yscrollinner').css('cursor', 'pointer');
    		},
    
    		mousehover: function(obj, outer, inner) { 
    
    			obj.hover(function() { 
    				outer.fadeIn(400);
    			}, function() { 
    				outer.fadeOut(400);
    			});
    
    			inner.hover(function() { 
    				$('body').css({ 
    					'-moz-user-select': 'none',
    					'-webkit-user-select': 'none',
    					'-ms-user-select': 'none',
    					'-khtml-user-select': 'none',
    					'user-select': 'none',
    				});
    			}, function() { 
    				$('body').css({ 
    					'-moz-user-select': 'auto',
    					'-webkit-user-select': 'auto',
    					'-ms-user-select': 'auto',
    					'-khtml-user-select': 'auto',
    					'user-select': 'auto',
    				});
    			});
    
    		},
    
    		mousewheel: function(obj, value, O, inner, H1, H2, H3) { 
    
    			var oScrollcontentVal = value / (H1 - H3) * (H2 - H1);
    
    			inner.height(H3); //滚动条高度
    
    			obj.on('mousewheel', function(event, delta) {  //绑定滚轮事件
    
    				event.preventDefault(); //阻止浏览器默认为行
    
    				var delta = event.originalEvent.wheelDelta;
    				var oYscrollinnerTop = inner.position().top;
    
    				var oScrollcontentTop = O.position().top;
    
    				if (delta > 0) { 
    					if (oYscrollinnerTop - value < 0) { 
    						inner.css('top', 0);
    						O.css('top', 0);
    					} else { 
    						inner.css('top', oYscrollinnerTop - value);
    						O.css('top', oScrollcontentTop + oScrollcontentVal);
    					}
    				} else { 
    					if (oYscrollinnerTop + value > H1 - H3) { 
    						inner.css('top', H1 - H3);
    						O.css('top', H1 - H2);
    					} else { 
    						inner.css('top', oYscrollinnerTop + value);
    						O.css('top', oScrollcontentTop - oScrollcontentVal);
    					}
    				};
    			});
    
    		},
    
    		mousemoved: function(obj, O, outer, inner, H1, H2, H3) { 
    			inner.on('mousedown', function(event) {  //绑定鼠标事件
    
    				var clientY = event.clientY,
    					oYscrollinnerTop = inner.position().top,
    					oScrollcontentTop = O.position().top,
    
    					moveY = 0;
    
    				$(document).on('mousemove', function(event) { 
    					moveY = event.clientY - clientY;
    					var oScrollcontentMove = moveY / (H1 - H3) * (H2 - H1);
    
    					if (oYscrollinnerTop + moveY < 0) { 
    						inner.css('top', 0);
    						O.css('top', 0);
    					} else if (oYscrollinnerTop + moveY > H1 - H3) { 
    						inner.css('top', H1 - H3);
    						O.css('top', H1 - H2);
    					} else { 
    						inner.css('top', oYscrollinnerTop + moveY);
    						O.css('top', oScrollcontentTop - oScrollcontentMove);
    					}
    				});
    
    				$(document).on('mouseup', function(event) { 
    					$(document).off('mousemove');
    				})
    
    			})
    		}
    
    	}
    }

## 6.4 jquery.min.js代码 ##

链接：[分享百度网盘的链接，点击即可下载][Link 1]  
提取码：0258

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/dabd3fc1273a4484ba13a869810fbd4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/8ef44c2f314e4909a0a3cbbeebb59145.png
[Link 1]: https://pan.baidu.com/s/1aEd8P3lUPCuhA9OyBWESsg