<!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>
.divMain
{/*给div添加滚动效果*/
PADDING-RIGHT:10px;
OVERFLOW-Y:auto;
PADDING-LEFT:10px;
SCROLLBAR-FACE-COLOR:#ffffff;
FONT-SIZE:11pt;
PADDING-BOTTOM:0px;
SCROLLBAR-HIGHLIGHT-COLOR:#ffffff;
OVERFLOW:auto;WIDTH:510px;
SCROLLBAR-SHADOW-COLOR:#919192;
COLOR:blue;
SCROLLBAR-3DLIGHT-COLOR:#ffffff;
LINE-HEIGHT:100%;
SCROLLBAR-ARROW-COLOR:#919192;
PADDING-TOP:0px;
SCROLLBAR-TRACK-COLOR:#ffffff;
FONT-FAMILY:宋体;
SCROLLBAR-DARKSHADOW-COLOR:#ffffff;
LETTER-SPACING:1pt;
HEIGHT:400px;
TEXT-ALIGN:left;
overflow-y:hidden;/*隐藏滚动条*/
}
.one
{
width:500px;
height:200px;
position:absolute;
left:0px;
top:0px;
border:1px solid
#FF9966;
background:#ccc;
filter:alpha(opacity=1);
}
.two
{
width:500px;
height:200px;
position:absolute;
left:0px;
top:0px;
border:1px solid #FF9966;
background:#0099FF;
filter:alpha(opacity=1);
}
</style>
<script
src="js/jquery-1.10.2.js"></script>
<script
type="text/javascript">
$(function () {
var
odiv = document.getElementById("divmain");//
var divmainLeft =
odiv.getBoundingClientRect().left;//获取divmain的位置
var divmainTop =
odiv.getBoundingClientRect().top
$("#one1").css("top",divmainTop
);
$("#one1").css("left",divmainLeft);
$("#two1").css("top", divmainTop+200);
$("#two1").css("left",
divmainLeft);
var boo_ = false;
var boo__ = false;
$("#one1").mouseenter(function () {
boo_ =
false;
var v = window.event.clientY;
var
handler = function () {
var vv =
$("#divmain").scrollTop();
$("#lab").val(vv);
$("#divmain").scrollTop(vv + 5);
if (vv >=
628 || boo_ == true) {
clearInterval(timer);
}
}
var timer =
setInterval(handler, 50);
});
$("#one1").mouseleave(function () {
//鼠标离开事件
boo_ =
true;
});
$("#two1").mouseenter(function () {
boo__ = false;
var v = window.event.clientY;
var handler = function () {
var vv =
$("#divmain").scrollTop();
$("#lab").val(vv);
$("#divmain").scrollTop(vv - 5);
if (vv == 0
|| boo__ == true) {
clearInterval(timer);
}
}
var timer =
setInterval(handler, 50);
});
$("#two1").mouseleave(function () {
//鼠标离开事件
boo__ =
true;
});
});
</script>
</head>
<body>
<div id="divmain"
class="divMain">
<img src="1.jpg"/>
</div>
<div id="one1" class="one"></div>
<div id="two1"
class="two"></div>
<input type="text" id="lab"
/>
</body>
</html>