1、scroll家族：
检测盒子内容的宽高：scrollWidth、scrollHeight
检测卷曲的部分宽高：obj.scrollTop,obj.scrollLeft
如果是页面被卷曲的部分：window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
2、新的方法：window.scrollTo(xPos,yPos)
3、新的事件：onscroll,滚动事件
4、新的数据类型：
json(javascript对象表示法)：无序的键值对的集合
var json={
“name”:”zhangsan”,
“age”:19
}
如何遍历json：
for(var key in json){
console.log(key);
console.log(json[key])
}
event对象:
获取event对象：事件函数传参或者window.event
event对象的重要属性：
target：事件的源头
type：事件的类型
bubble：是否冒泡
button：鼠标事件按下的哪个按键
screenX:相对于浏览器而言鼠标的横坐标
pageX:相对于body而言，鼠标的横坐标（有兼容性,不能用，解决办法？clientX+页面被卷曲的部分）
clientX:相对于浏览器的可视区域而言，鼠标的横坐标
新的事件：onmousemove 鼠标移动事件
js放大镜效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.box{
width: 900px;
height: 430px;
margin:50px 100px;
position: relative;
}
img{
display: block;
}
.small{
float: left;
}
div.mask{
width: 184.9px;
height: 184.9px;
background: lightyellow;
opacity: 0.3;
filter:alpha(opacity=30);
display: none;
position: absolute;
top:0;
left:0;
}
.big{
border:1px solid #ccc;
overflow: hidden;
width: 430px;
height: 430px;
float: left;
margin-left:20px;
}
.big img{
margin-top:0px;
margin-left:0px;
}
</style>
<script src="js/myJquery1.2.js"></script>
</head>
<body>
<div class="box">
<div class="small">
<img src="images/small.jpg" alt="" />
<div class="mask"></div>
</div>
<div class="big">
<img src="images/big.jpg" alt="" />
</div>
</div>
<script>
//需求分析：
//1、当鼠标在small中移动时，mask显示，big显示
//2. 当鼠标在small中移动时，mask跟随鼠标移动，并且鼠标在mask的中间，mask不能超出small
//3、当鼠标在small中移动时，mask覆盖的区域，在big中会显示细节
//4、当鼠标移出small时，mask和big都隐藏；
//获取事件源和相关元素：
var box = document.getElementsByTagName('div')[0];
var small = box.children[0];
var big = box.children[1];
var mask = small.children[1];
var bigImg = big.children[0];
//当鼠标在small中移动时
small.onmousemove = function(event){
//mask显示，big显示
mask.style.display = "block";
big.style.display = "block";
//获取事件对象
var e = event||window.event;
//获取鼠标距离页面顶部和页面左侧的距离
var pageX = e.clientX + scroll().left;
var pageY = e.clientY + scroll().top;
//获取以box为参考系，鼠标的坐标，并且鼠标在mask的中间
var x = pageX - box.offsetLeft-mask.offsetWidth/2;
var y = pageY - box.offsetTop-mask.offsetHeight/2;
//mask不能超出small
if(x<0){
x=0;
}
if(y<0){
y=0;
}
if(x>small.offsetWidth-mask.offsetWidth){
x = small.offsetWidth-mask.offsetWidth;
}
if(y>small.offsetHeight-mask.offsetHeight){
y = small.offsetHeight-mask.offsetHeight;
}
//mask跟随鼠标移动
mask.style.top = y + "px";
mask.style.left = x+"px";
//mask覆盖的区域，在big中会显示细节
//大图从百分之几开始显示
var percentX = x/small.offsetWidth;
var percentY = y/small.offsetHeight;
//大图移动
bigImg.style.marginLeft = -percentX*bigImg.offsetWidth +"px";
bigImg.style.marginTop = -percentY*bigImg.offsetHeight + "px";
}
//当鼠标移出small时，mask和big都隐藏
small.onmouseout = function(){
mask.style.display = "none";
big.style.display = "none";
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
