码迷,mamicode.com
首页 > 其他好文 > 详细

拖拽+自定义滚动条

时间:2014-07-26 02:34:06      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   java   color   os   io   

bubuko.com,布布扣


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>拖拽+滚动条</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
	*{margin:0; padding: 0;}
	body{font-family:14px/100% "microsoft yahei"; }
	#f-wrap{width: 1000px; margin: 0 auto; padding: 10px; border:1px dotted green;}
	#box{width:820px; padding-right:12px; height:500px; border:1px solid #ccc; overflow: hidden; position: relative;}
	/*内容区*/
	#cnt{width:800px; line-height:24px; position:absolute; padding:10px; background-color:#fff;}
	/*滚动条*/
	#scrollBd{width:12px; height:500px; background-color:#ddd; position:absolute; top:0; right:0;}
	#scrollBar{width:12px; height:50px; background-color:#aaa; position: absolute; cursor: pointer; -webkit-border-radius:12px; -moz-border-radius:12px; -o-border-radius:12px; border-radius:12px;}
</style>
<script type="text/javascript">
	window.onload= function(){
		var oWrap = document.getElementById('f-wrap'),
			oScroll = document.getElementById('scrollBd'),
			oBar = document.getElementById('scrollBar'),
			oBox = document.getElementById('box'),
			oCnt = document.getElementById('cnt');

		// 点击执行
		oBar.onmousedown = function(e){
			var e = e||event;
			var disY = e.clientY - oBar.offsetTop;
			if(oBar.setCapture){
				oBar.onmousemove = fnMove;
				oBar.onmouseup = fnUp;
				oBar.setCapture();
			}else{
				document.onmousemove = fnMove;
				document.onmouseup = fnUp;
			}

			// 移动
			function fnMove(e){
				var e = e||event;
				var t = e.clientY - disY;
				setTop(t);
			}

			// 弹起
			function fnUp(){
				this.onmousemove = null;
				this.onmouseup = null;
				if(this.releaseCapture){
					this.releaseCapture();
				}
			}
			return false;
		}
		// 滚动
		function fnWheel(e){
			var e = e||event;
			var flag =true;
			flag = e.wheelDelta ? e.wheelDelta<0 : e.detail>0;
			if(flag){
				setTop(oBar.offsetTop+10);
			}else{
				setTop(oBar.offsetTop-10)
			}
			if(e.preventDefault){
				e.preventDefault();
			}
			return false;
		}
		addEvent(oWrap,'mousewheel',fnWheel);
		addEvent(oWrap,'DOMMouseScroll',fnWheel);

		function setTop(t){
			if(t<=0){
				t=0;
			}else if(t >= oScroll.offsetHeight - oBar.offsetHeight){
				t = oScroll.offsetHeight - oBar.offsetHeight;
			}
			oBar.style.top = t +'px';
			// 滑块所占比例
			var scale = t/(oScroll.offsetHeight - oBar.offsetHeight);

			oCnt.style.top = -(oCnt.offsetHeight - box.offsetHeight) * scale + 'px';
			document.title= scale;
		}
	}

	// 浏览器兼容:封装事件绑定
	function addEvent(obj,sEvent,fn){
		if(obj.attachEvent){
			obj.attachEvent('on'+ sEvent,fn);
		}else{
			obj.addEventListener(sEvent,fn,false);
		}
	}
</script>
</head>
<body>
	<div id="f-wrap">
		<span style="float:right; font-size:20px; color:#999;">可执行区域</span>
	    <div id="box">
	    	<div id="scrollBd">
		    	<div id="scrollBar"></div>
		    </div>
	    	<div id="cnt">
	    		<h2>小苹果</h2>
			    <p>我种下一颗种子</p>
			    <p>终于长出了果实</p>
			    <p>今天是个伟大日子</p>
			    <p>摘下星星送给你</p>
			    <p>拽下月亮送给你</p>
			    <p>让太阳每天为你升起</p><br>
			    <p>变成蜡烛燃烧自己</p>
			    <p>只为照亮你</p>
			    <p>把我一切都献给你</p>
			    <p>只要你欢喜</p>
			    <p>你让我每个明天都</p>
			    <p>变得有意义</p>
			    <p>生命虽短爱你永远</p>
			    <p>不离不弃</p><br>
			    <p>你是我的小呀小苹果儿</p>
			    <p>怎么爱你都不嫌多</p>
			    <p>红红的小脸儿温暖我的心窝</p>
			    <p>点亮我生命的火 火火火火</p>
			    <p>你是我的小呀小苹果儿</p>
			    <p>就像天边最美的云朵</p>
			    <p>春天又来到了花开满山坡</p>
			    <p>种下希望就会收获</p><br>
			    <p>从不觉得你讨厌</p>
			    <p>你的一切都喜欢</p>
			    <p>有你的每天都新鲜</p>
			    <p>有你阳光更灿烂</p>
			    <p>有你黑夜不黑暗</p>
			    <p>你是白云我是蓝天</p><br>
			    <p>春天和你漫步在盛开的 花丛间</p>
			    <p>夏天夜晚陪你一起看 星星眨眼</p>
			    <p>秋天黄昏与你徜徉在 金色麦田</p>
			    <p>冬天雪花飞舞有你 更加温暖</p><br>
			    <p>你是我的小呀小苹果儿</p>
			    <p>怎么爱你都不嫌多</p>
			    <p>红红的小脸儿温暖我的心窝</p>
			    <p>点亮我生命的火 火火火火</p>
			    <p>你是我的小呀小苹果儿</p>
			    <p>就像天边最美的云朵</p>
			    <p>春天又来到了花开满山坡</p>
			    <p>种下希望就会收获</p><br>
			    <p>你是我的小呀小苹果儿</p>
			    <p>怎么爱你都不嫌多</p>
			    <p>红红的小脸儿温暖我的心窝</p>
			    <p>点亮我生命的火 火火火火</p>
			    <p>你是我的小呀小苹果儿</p>
			    <p>就像天边最美的云朵</p>
			    <p>春天又来到了花开满山坡</p>
			    <p>种下希望就会收获</p>
	    	</div>
	    </div>
	</div>
</body>
</html>


拖拽+自定义滚动条,布布扣,bubuko.com

拖拽+自定义滚动条

标签:des   style   blog   http   java   color   os   io   

原文地址:http://blog.csdn.net/ruizhengyun/article/details/38120009

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!