原生javascript實(shí)現(xiàn)圖片放大鏡效果

上傳人：q*** IP屬地：湖北上傳時間：2022-07-05 格式：DOCX 頁數(shù)：18 大小：24.33KB 積分：28 舉報(bào) 版權(quán)申訴

已閱讀5頁，還剩13頁未讀，繼續(xù)免費(fèi)閱讀

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、<!DOCTYPE html><!- saved from url=(0042) -><html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta name="viewport" content="width=device-width

2、, initial-scale=1"><title>原生javascript實(shí)現(xiàn)圖片放大鏡效果 - 依然仰望 - 博客園</title><link type="text/css" rel="stylesheet" href="./原生javascript實(shí)現(xiàn)圖片放大鏡效果 - 依然仰望 - 博客園_files/blog-common.css"><link id="MainCss" type="text/css" rel="sty

3、lesheet" href="./原生javascript實(shí)現(xiàn)圖片放大鏡效果 - 依然仰望 - 博客園_files/bundle-darkgreentrip.css"><link type="text/css" rel="stylesheet" href="./原生javascript實(shí)現(xiàn)圖片放大鏡效果 - 依然仰望 - 博客園_files/325161.css"><link id="mobile-style" media="only screen a

4、nd (max-width: 768px)" type="text/css" rel="stylesheet" href="./原生javascript實(shí)現(xiàn)圖片放大鏡效果 - 依然仰望 - 博客園_files/bundle-darkgreentrip-mobile.css"><link title="RSS" type="application/rss+xml" rel="alternate" href="<link title=&quo

5、t;RSD" type="application/rsd+xml" rel="EditURI" href="<link type="application/wlwmanifest+xml" rel="wlwmanifest" href="<script async="" src="./原生javascript實(shí)現(xiàn)圖片放大鏡效果 - 依然仰望 - 博客園_files/analytics.js"></script><

6、;script type="text/javascript" src="./原生javascript實(shí)現(xiàn)圖片放大鏡效果 - 依然仰望 - 博客園_files/encoder.js"></script><script src="./原生javascript實(shí)現(xiàn)圖片放大鏡效果 - 依然仰望 - 博客園_files/jquery.js" type="text/javascript"></script> <script type="text/javascript&q

7、uot;>var currentBlogApp = 'wswq', cb_enable_mathjax=false;var isLogined=false;</script><script src="./原生javascript實(shí)現(xiàn)圖片放大鏡效果 - 依然仰望 - 博客園_files/blog-common.js" type="text/javascript"></script></head><body><a name="top"></

8、a><!-PageBeginHtml Block Begin-><div id="forme"><a target="_blank" href=" src="./原生javascript實(shí)現(xiàn)圖片放大鏡效果 - 依然仰望 - 博客園_files/o_fro.png" title="Frok me on GitHub"></a></div><!-PageBeginHtml Block End-><!-done-><

9、div id="home"><div id="header"><div id="blogTitle"><a id="lnkBlogLogo" href=" id="blogLogo" src="./原生javascript實(shí)現(xiàn)圖片放大鏡效果 - 依然仰望 - 博客園_files/logo.gif" alt="返回主頁"></a><!-done-><h1><a id

10、="Header1_HeaderTitle" class="headermaintitle" href="<h2>人生苦短，必須果敢。</h2></div><!-end: blogTitle 博客的標(biāo)題和副標(biāo)題 -><div id="navigator"><ul id="navList"><li><a id="blog_nav_sitehome" class="menu" hr

11、ef="<li><a id="blog_nav_myhome" class="menu" href="<li><a id="blog_nav_newpost" class="menu" rel="nofollow" href="<li><a id="blog_nav_contact" class="menu" rel="nofollow" href=&q

12、uot;<li><!-></li><li><a id="blog_nav_admin" class="menu" rel="nofollow" href="</ul><div class="blogStats"><div id="blog_stats">隨筆 - 18  </span&g

13、t;文章 - 0  評論 - 28</div></div><!-end: blogStats -></div><!-end: navigator 博客導(dǎo)航欄 -></div><!-end: header 頭部 -><div id="main&

14、quot;><div id="mainContent"><div class="forFlow"><div id="post_detail"><!-done-><div id="topics"><div class="post"><h1 class="postTitle"><a id="cb_post_title_url" class="postTit

15、le2" href="./原生javascript實(shí)現(xiàn)圖片放大鏡效果 - 依然仰望 - 博客園_files/原生javascript實(shí)現(xiàn)圖片放大鏡效果 - 依然仰望 - 博客園.html">原生javascript實(shí)現(xiàn)圖片放大鏡效果</a></h1><div class="clear"></div><div class="postBody"><div id="cnblogs_post_body">當(dāng)我們在電商網(wǎng)

16、站上購買商品時，經(jīng)常會看到這樣一種效果，當(dāng)我們把鼠標(biāo)放到我們?yōu)g覽的商品圖片上時，會出現(xiàn)類似放大鏡一樣的一定區(qū)域的放大效果，方便消費(fèi)者觀察商品。今天我對這一技術(shù)，進(jìn)行簡單實(shí)現(xiàn)，實(shí)現(xiàn)圖片放大鏡效果。  我在代碼中進(jìn)行了代碼編寫的思路的說明和詳細(xì)的代碼注釋，方便讀者，請看代碼：<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"

17、><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="復(fù)制代碼"><img src="./原生javascript實(shí)現(xiàn)圖片放大鏡效果 - 依然仰望 - 博客園_files/copycode.gif" alt="復(fù)制代碼"></a></div><pre deep="10"><span style=

18、"color: #008080;"> 1 <!doctype html> 2 <html> 3 <head> 4

19、; <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"><span style="color: #0

20、08080;"> 7 *margin:0px; padding:0px; 8 .small-box 9<

21、/span> width:300px; 10 height:300px; 11 margin-<span sty

22、le="color: #000000;">left:100px; 12 margin-top:100px; 13 <span style="color: #000000;&quo

23、t;> border:1px #ccc solid; 14 cursor:move; 15 float</span

24、>:left; 16 position:relative; 17 <span style="color:

25、 #000000;"> 18 .small-box img 19 width:300px;</spa

26、n> 20 height:300px; 21 <span style="color: #008080;

27、"> 22 .tool 23 width:150px; 24 <span

28、style="color: #000000;"> height:150px; 25 background-color:gold; 26 opacity:0.6<span style=&qu

29、ot;color: #000000;"> 27 filter:alpha(opacity=60); 28 po

30、sition:absolute; 29 left:0px; 30 top:0px;<span

31、 style="color: #008080;"> 31 display:none; 32 33

32、 .tool.active 34 display:block; 35 <span styl

33、e="color: #000000;"> 36 .big-box 37 width:300px;

34、 38 height:300px; 39 border:1px #ccc solid;<sp

35、an style="color: #008080;"> 40 overflow:hidden; 41 float<span style="color: #000000;&quo

36、t;>:left; 42 margin-top:100px; 43 position:relative;</spa

37、n> 44 display:none; 45 <span style="color: #008080;

38、"> 46 .big-box.active 47 display:block; 48

39、; 49 .big-box img 50 <span style="color: #000000;&quo

40、t;> width:600px; 51 height:600px; 52 position:absolute;<

41、/span> 53 54 </style> 55 </head&gt

42、; 56 <body> 57 <div class="small-box" id="smallBox"> 58 <img src=&qu

43、ot;img1.jpg"/> 59 <div class="tool" id="tool"></div> 60 </div>

44、 61 <div class="big-box" id="bigBox"> 62 <img src="img1.jpg" id="bigImg" /> 63 </div>&l

45、t;span style="color: #008080;"> 64 <script> 65 /* 66 <span style="color: #0

46、08000;"> 第一步：當(dāng)頁面加載完后，獲取所要操作的節(jié)點(diǎn)對象。 67 第二步：為smallBox添加一個鼠標(biāo)浮動事件 68 <span style="color: #008000;&

47、quot;> 當(dāng)鼠標(biāo)浮動到smallBox可視區(qū)域的時候，顯示出小黃盒子tool 69 和右邊的大盒子（小黃盒子的放大版）bigBox 70 <span style="color: #008000

48、;"> 添加active 71 72 為smallBox添加一個鼠標(biāo)離開事件 73

49、 隱藏小黃盒子和右邊的大盒子 74 去掉active 75 <span style="color: #008

50、080;"> 76 第三步：為smallBox添加一個鼠標(biāo)移動事件 77 小黃盒子tool要跟著鼠標(biāo)的坐標(biāo)移動

51、; 78 右邊的大盒子里的圖片也跟著指定的比例移動 79 */ 80 <span style=

52、"color: #0000ff;">var smallBox = document.getElementById("smallBox");/小盒子 81 <span s

53、tyle="color: #0000ff;">var tool = document.getElementById("tool");/小盒子中的黃色區(qū)域 82 <spa

54、n style="color: #0000ff;">var bigBox = document.getElementById("bigBox");/大盒子 83 <sp

55、an style="color: #0000ff;">var bigImg = document.getElementById("bigImg");/放大的圖片 84 <

56、;span style="color: #008000;">/鼠標(biāo)進(jìn)入小盒子區(qū)域內(nèi)，顯示黃色區(qū)域和大盒子 85 smallBox.onmouseenter = function<span

57、style="color: #000000;">() 86 tool.className = "tool active" 87 bigBox.className = &quo

58、t;big-box active" 88 89 <span style="color: #0080

59、00;">/鼠標(biāo)離開小盒子區(qū)域，不顯示黃色區(qū)域和大盒子 90 smallBox.onmouseleave = function<span style="color: #000000;&qu

60、ot;>() 91 tool.className = "tool" 92 bigBox.className = "big-box"<span style="c

61、olor: #000000;"> 93 94 /<span style=&q

62、uot;color: #008000;">鼠標(biāo)在小盒子內(nèi)移動 95 smallBox.onmousemove = function(e)<span style="color: #00808

63、0;"> 96 var _e = window.event|e;/事件對象 97 &l

64、t;span style="color: #0000ff;">var x = _e.clientX-this.offsetLeft-tool.offsetWidth/2;/事件對象在小盒子內(nèi)的橫向偏移量 98 var&l

65、t;/span> y = _e.clientY-this.offsetTop-tool.offsetHeight/2;/豎向偏移量 99 if(x<0<span style="color: #000000;&q

66、uot;>)100 x = 0;/當(dāng)左偏移出小盒子時，設(shè)為0101 <span style

67、="color: #000000;"> 102 if(y<0)103</span&

68、gt; y = 0;/當(dāng)上偏移出小盒子時，設(shè)為0104 <span style="color: #008080

69、;">105 if(x>this.offsetWidth-tool.offsetWidth)106

70、 x = this.offsetWidth-tool.offsetWidth;/當(dāng)右偏移出小盒子時，設(shè)為小盒子的寬度-黃色放大區(qū)域?qū)挾?lt;/span><span style="color: #008080;"&

71、gt;107 108 if(y>this.offsetHeight-<span

72、style="color: #000000;">tool.offsetHeight)109 y = this.offsetHeight-tool.offsetHeight;/<span s

73、tyle="color: #008000;">當(dāng)下偏移出小盒子時，設(shè)為小盒子的高度-黃色放大區(qū)域高度110 111 tool.style.left = x + "px"&l

74、t;span style="color: #008000;">/黃色放大區(qū)域距離小盒子左偏距112 tool.style.top = y + "px"/<span st

75、yle="color: #008000;">黃色放大區(qū)域距離小盒子上偏距113 bigImg.style.left = -x*2 + "px"/放大圖片移動方向相反，偏移距離加倍114 bigImg.style.top = -y*2 + "px"<span style="color

人人文庫> 全部分類> 教育資料 > 備課教案

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

原生javascript實(shí)現(xiàn)圖片放大鏡效果

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔