编程练习，用JS实现放大镜特效教程-慕课网

第1章放大镜特效简介
视频：1-1 JS放大镜特效简介(02:19)

第5章解决兼容性问题
视频：5-1 解决兼容性问题(07:06)

第6章编程挑战
编程：6-1 编程挑战

编程练习

根据所学知识，补充完整代码，实现课程中的放大镜效果，当鼠标移到产品小图片之上时，右侧实现同步局部放大的放大镜效果。

温馨提示:完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。

任务

请编写mark层的onmousemove事件的响应代码，实现右侧局部放大图片跟随鼠标同步定位。

提示：

回顾一下课程所学的内容，开通脑筋：

1.需要捕获事件。

2.获取鼠标位置。

3.通过计算设置右侧图片的位置，并要注意鼠标的边界问题。

?不会了怎么办

index.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>放大镜</title> <style> * { margin: 0; padding: 0 } #demo { display: block; width: 400px; height: 255px; margin: 50px; position: relative; border: 1px solid #ccc; } #small-box { position: relative; z-index: 1; } #float-box { display: none; width: 160px; height: 120px; position: absolute; background: #ffffcc; border: 1px solid #ccc; filter: alpha(opacity=50); opacity: 0.5; cursor: move; } #mark { position: absolute; display: block; width: 400px; height: 255px; z-index: 10; background: #fff; filter: alpha(opacity=0); opacity: 0; cursor: move; } #big-box { display: none; position: absolute; top: 0; left: 460px; width: 400px; height: 300px; overflow: hidden; border: 1px solid #ccc; z-index: 1;; } #big-box img { position: absolute; z-index: 5 } </style> <script> //页面加载完毕后执行 window.onload = function () { varobjDemo = document.getElementById("demo"); varobjSmallBox = document.getElementById("small-box"); varobjMark = document.getElementById("mark"); varobjFloatBox = document.getElementById("float-box"); varobjBigBox = document.getElementById("big-box"); varobjBigBoxImage = objBigBox.getElementsByTagName("img")[0]; objMark.onmouseover = function () { objFloatBox.style.display = "block"; objBigBox.style.display = "block"; } objMark.onmouseout = function () { objFloatBox.style.display = "none"; objBigBox.style.display = "none"; } objMark.onmousemove = function (ev) { //请补充此处鼠标移动时的响应方法 } } </script> </head> <body> <div id="demo"> <div id="small-box"> <div id="mark"></div> <div id="float-box"></div> <img src="http://img1.sycdn.imooc.com//537d77fb0001559d04000255.jpg"/> </div> <div id="big-box"> <img src="http://img1.sycdn.imooc.com//537d781b0001c04210240654.jpg"/> </div> </div> </body> </html>

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

4-3 编程练习

编程练习

任务

提问题

其他问答

写笔记

您还未绑定服务号

收藏课程后，能更快找到我哦～

手记推荐

4-3 编程练习

热搜

最近搜索清空

编程练习

任务

提问题

其他问答

写笔记

您还未绑定服务号

收藏课程后，能更快找到我哦～

手记推荐