一. 鼠标指针应用 案例：（01.拖拽效果.html） 1) 添加小球的鼠标按下事件 事件处理函数实现如下： 1）获取当前鼠标点在小球的位置(deliaX, deliaY) 2）为矩形添加鼠标移动事件 2）矩形元素的鼠标移动事件的处理 定义变量moveX，moveY存放小球left和top属性值 moveX = pageX - 矩形.offsetLeft - deliaX moveY = pageY - 矩形.offsetTop - deliaY 3) 小球水平、垂直的边界值实现 a. 如果moveX值小于等于0，则小球的left属性值都是0 如果moveX值大于等于（矩形宽度 - 小球的宽度），则小球的left属性值都是（矩形宽度 - 小球的宽度） b. 垂直情况同a 4）鼠标抬起，小球停止运动 添加鼠标抬起事件，事件处理函数实现移出鼠标的移动事件 练习：（02.拖拽效果的封装.html） 将拖拽效果的实现封装为一个函数： function drag(ball){ ball.onmousedown = function(evt){ } } drag(ball1);二. 京东放大镜 案例：（03.放大镜效果.html） 1. 结构 <div id="smallPic"> <img src="images/xiao.jpg"> <div id="zoom"></div> </div> <div id="bigPic"></div> 2. 样式： smallPic 宽、高、边框、外边距、定位 zoom 定位、宽、高、背景色、透明度、边框 bigPic 宽、高、背景图片、定位、位置、边框 3. js 1）鼠标进入smallPic时，显示放大镜和右侧大图 鼠标离开smallPic时，隐藏放大镜和右侧大图 2）鼠标进入smallPic时，实现放大镜的鼠标跟随效果 3）放大镜移动时，右侧显示放大的内容 放大镜移动175的距离，大图移动400的距离，所以小图移动1像素，大图移动400/175像素 大图移动使用backgroundPosition bigPic.style.backgroundPosition = -moveX * 400/175 + 'px ' + -moveY * 400/175 + 'px';
作业：放大镜实用 结构： 两大块：上边和下边 上边：左边和右边 左边：小图和放大镜 右边：大图 下边：两张小图
<div id="main"> <div id="left"> <img src="images/image0.jpg" id="leftImg"> <div id="zoom"></div> </div> <div id="right"> <img src="images/images0.jpg"> </div> </div> <div id="viewImg"> <img src="images/image0.jpg"> <img src="images/image1.jpg"> </div> 样式： main 外边距 left 宽、高、边框、定位 leftImg 宽、高 zoom 定位、宽、高、背景色、透明度、鼠标形状、不可见 right 宽、高、不可见、内容隐藏 viewImg 上、左外边距 viewImg img 宽 js： 1）计算放大镜的尺寸 放大镜尺寸:左侧div尺寸 == 右侧div尺寸:大图的尺寸 2）计算放大的倍数 右侧div的宽度/放大镜的宽度 3）右侧大图移动的实现 改变div的滚动位置，设定两个属性 scrollLeft scrollTop 4）点击下面小图，上面左侧及右侧的图片随之改变 为每个小图添加单击事件 事件处理程序实现将当前单击的小图的src属性值赋给上面左侧及右侧图片的src属性。
转载于:https://www.cnblogs.com/yangjingyang/p/10210478.html
相关资源：windows 7 左手鼠标指针