Javascript学习第九、十天总结scroll家族和event对象及放大镜特效

来源：互联网发布：java伪造ip请求头信息编辑：程序博客网时间：2024/06/06 03:18

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>

阅读全文

0 0