亚洲人成人伊人成无码人,午夜动漫毛片下载

第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 編程練習

熱搜

最近搜索清空

編程練習

任務

提問題

其他問答

寫筆記

您還未綁定服務號

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

手記推薦