一、client 系列

html>
    
    
    

    

clientWidth：可视区域的宽度（不含边框）

clientHeight：可视区域的高度（不含边框）

clientLeft：左边框的宽度

clientTop： 上边框的宽度

clientX：可视区域的横坐标

clientY：可视区域的纵坐标

1、案例：图片跟着鼠标移动最终版

之前图片跟着鼠标移动的案例有些bug，就是IE8不支持。

在IE8 下 没有事件参数，但是有 window.event 可以代替。

window.event： 谷歌， IE8 支持，但是火狐不支持。

html>
    
        

这个时候，如果 body 的高度/宽度变化了，可以滚动滑轮了会怎样呢？

body {
    height: 5000px;}

这时候，如果鼠标不动，只滚动滑轮的话，会发现图片会距离鼠标原点越来越远。为什么呢？

因为当我们滚动滑轮的时候，鼠标距离页面顶部的距离改变了，但是 clientY 是可视区域的大小，滚动滑轮的时候， clientY 的大小是没有变的，但是鼠标距离页面顶部的距离改变了，而图片在 Y 轴的距离计算还是按照 clientY 计算的，所以图片就会距离鼠标越来越远。

那么，怎么办呢？

事件参数 e 有连个属性：pageX,pageY 是距离页面顶部边界的距离，可以直接使用，但是不幸的是，IE8 又不支持。看来，只能是鼠标移动的距离 + 滑轮卷曲出去的距离来实现了。

思路：

之前我们封装的兼容代码都在一个函数里面，这里我们封装到一个对象 evt 里面。

这个 evt 对象封装了所有浏览器都支持的关于 clientX,clientY 等页面坐标的函数。

图片跟着鼠标移动的最终版：

html>
    
    
    

2、案例：淘宝宝贝放大镜

html>
    
    
    

    

        
        

    
    

        
    

第一步：获取所有需要的元素对象。

第二步：鼠标进入，离开小图，显示和隐藏遮挡层和大图。

第三步：遮挡层随着鼠标的移动而移动。

第四步：遮挡层移动的最大范围在小图内。

第五步：小图移动的距离/小图能移动的最大距离 == 大图移动的距离/大图能移动的最大距离，由此算出大图移动的距离 = 小图移动的距离 * 大图能移动的最大距离 / 小图能移动的最大距离。

第六步：将得到的大图移动的距离的负值赋值给大图即可。

3、案例：DIY 滑动栏

html>
    
    
    

    

        kkkkkk温馨提示：由于厂商可能在未提前通知的情况下更改产品包装、产地、赠品或随机附件等。
        飞虎回复仅在回复当时对提问者有效，其他网友仅供参考！若由此给您带来不便敬请谅解，谢谢！
        温馨提示：由于厂商可能在未提前通知的情况下更改产品包装、产地、赠品或随机附件等。
        飞虎回复仅在回复当时对提问者有效，其他网友仅供参考！若由此给您带来不便敬请谅解，谢谢！
        温馨提示：由于厂商可能在未提前通知的情况下更改产品包装、产地、赠品或随机附件等。
        飞虎回复仅在回复当时对提问者有效，其他网友仅供参考！若由此给您带来不便敬请谅解，谢谢！
        温馨提示：由于厂商可能在未提前通知的情况下更改产品包装、产地、赠品或随机附件等。
        飞虎回复仅在回复当时对提问者有效，其他网友仅供参考！若由此给您带来不便敬请谅解，谢谢！
        温馨提示：由于厂商可能在未提前通知的情况下更改产品包装、产地、赠品或随机附件等。
        飞虎回复仅在回复当时对提问者有效，其他网友仅供参考！若由此给您带来不便敬请谅解，谢谢！
        温馨提示：由于厂商可能在未提前通知的情况下更改产品包装、产地、赠品或随机附件等。
        飞虎回复仅在回复当时对提问者有效，其他网友仅供参考！若由此给您带来不便敬请谅解，谢谢！
        温馨提示：由于厂商可能在未提前通知的情况下更改产品包装、产地、赠品或随机附件等。
        飞虎回复仅在回复当时对提问者有效，其他网友仅供参考！若由此给您带来不便敬请谅解，谢谢！
        温馨提示：由于厂商可能在未提前通知的情况下更改产品包装、产地、赠品或随机附件等。
        飞虎回复仅在回复当时对提问者有效，其他网友仅供参考！若由此给您带来不便敬请谅解，谢谢！Daotin    
    

        

    

1、获取所有需要的元素。

2、鼠标点击，滑动，抬起，三个事件。

3、鼠标点击的时候获取鼠标的位置。

4、鼠标滑动的时候计算坐标 y。由于要保证鼠标移动的时候，鼠标相对滑动条顶部的距离一定，所以需要 spaceY。还需要注意滑动条滑动的范围。

5、鼠标抬起的时候，清除鼠标移动的事件。

6、防止滑动的时候选中了文字 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

7、通过比例，计算 content 内容反方向移动的距离。

二、复习

1、元素隐藏的不同方式

my$("dv").style.display = "none"; // 不占位my$("dv").style.visibility = "hidden"; // 占位my$("dv").style.opacity = 0;  // 占位my$("dv").style.height = 0; // 占位

原文出处