<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<title>效果:鼠标在图片上滚动,图片放大或缩小</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
-moz-user-select: none;
}
#scroll {
width: 10px;
height: 35px;
background-color: #fff;
position: absolute;
right: 5px;
}
#main {
width: 502px;
height: 350px;
/*background: url(images/signup_icon.png);*/
background-color: #555;
margin: 0 auto;
position: relative;
top:50px;
overflow: hidden;
}
#main ul li {
width: 100%;
height: 50px;
text-align: center;
font-size: 30px;
color: #fff;
}
#ulList {
position: absolute;
}
</style>
</head>
<body onselectstart="return false"> <!--禁止选中-->
<div id="main">
<!-- <img id="aaa" src="images/scroll.jpg" /> -->
<div id="scroll"></div>
<ul id="ulList">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<script language="JavaScript" type="text/javascript">
function dragDrop() {
var VVG = {};
VVG.DOM = {
$:function(id) {
return typeof id == 'string' ? document.getElementById(id) : id;
},
bindEvent:function(node,type,func) { //绑定事件方法
if(node.addEventListener) {
node.addEventListener(type,func,false);
// node:文档节点、document、window 或 XMLHttpRequest; type:字符串,事件名称,不含“on”; false:表示该元素在事件的“冒泡阶段”(由内向外传递时)响应时间,true:表示该元素在事件的“捕获阶段”(由外往内传递时)响应事件;
} else if (node.attachEvent) {
node.attachEvent('on' + type,func);
} else {
node['on' + type] = func;
}
},
getEvent:function(event) { //获取事件
return event ? event:window.event;
},
getTarget:function(event) { //获取事件
return event.target || event.srcElement;
}
};
var Drop = function() {
var dragging = null; //初始化 拖动所设标志位
var sTop = 0;
var mouseClientY = 0; //初始鼠标位置 高度值
function drag(event) { // 事件执行函数
event = VVG.DOM.getEvent(event);
var target = VVG.DOM.getTarget(event);
var main = VVG.DOM.$('main');
var scroll = VVG.DOM.$('scroll');
sTop = parseInt(sTop);
var top = event.clientY + sTop - mouseClientY; // 鼠标现在位置 + 滚动条TOP值 - 鼠标按下时位置
var liHeight = main.getElementsByTagName('li')[0].offsetHeight;
var liNum = main.getElementsByTagName('li').length - (main.offsetHeight / liHeight);
var ulList = VVG.DOM.$('ulList');
var scrollTop = scroll.offsetTop;
var liPx = liNum * liHeight / (main.offsetHeight - scroll.offsetHeight); // li平均值
if(event.type == 'mousedown') {
if(target.id == 'scroll') { // 获取滚动条,只点击它才执行
if(event.button == 2) { // 只有点击鼠标左键执行
return event.returnValue = false; // 解除默认事件发生
} else {
dragging = target;
mouseClientY = event.clientY; //获取鼠标的top值
sTop = dragging.style.top != '' ? dragging.style.top : 0; // 获取滚动条的TOP值
}
}
} else if (event.type == 'mousemove'){
if(dragging) {
if (scrollTop < 0) {
dragging.style.top = '0px';
ulList.style.top = '0px';
} else if(scrollTop > (main.offsetHeight - scroll.offsetHeight)) {
dragging.style.top = (main.offsetHeight - scroll.offsetHeight) + 'px';
ulList.style.top = -liNum * liHeight + 'px';
} else {
dragging.style.top = top + 'px';
ulList.style.top = -liPx * top + 'px';
}
}
} else if (event.type == 'mouseup') {
dragging = null;
} else if (event.type == 'mousewheel' || event.type == 'DOMMouseScroll') {
var detail = event.detail *4 || parseInt(-event.wheelDelta/10);
if (scrollTop < 0) {
scroll.style.top = '0px';
ulList.style.top = '0px';
} else if(scrollTop > (main.offsetHeight - scroll.offsetHeight)) {
scroll.style.top = (main.offsetHeight - scroll.offsetHeight) + 'px';
ulList.style.top = -liNum * liHeight + 'px';
} else {
scroll.style.top = scrollTop + detail + 'px'; // 滚动条TOP值 + 滚轮值 = 滚动条现在位置
ulList.style.top = -(scrollTop + detail) * liPx + 'px'; // (滚动条TOP值 + 滚轮值)* li平均值 = 滚动一次 UL向上移动的TOP值
}
}
};
return {
dragStart: function() {
//绑定事件
VVG.DOM.bindEvent(main, func(), drag);
VVG.DOM.bindEvent(document, "mousedown", drag);
VVG.DOM.bindEvent(main, "mousemove", drag);
VVG.DOM.bindEvent(document, "mouseup", drag);
}()
}
}();
}
dragDrop();
function func() {
return (/firefox/i).test(navigator.userAgent) ? 'DOMMouseScroll':'mousewheel';
}
</script>
</body>
</html>
转载于:https://my.oschina.net/u/1865767/blog/466057