JS執行個體教程:製作圖片放大特效

來源:互聯網
上載者:User

效果:

運行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Magnifier</title><style type="text/css">#magnifier{width:342px;height:420px;position:absolute;top:100px;left:250px;font-size:0;border:1px solid #000;}#img{width:342px;height:420px;}#Browser{border:1px solid #000;z-index:100;position:absolute;background:#555;}#mag{border:1px solid #000;overflow:hidden;z-index:100;}</style><script type="text/javascript">function getEventObject(W3CEvent) { //事件標準化函數return W3CEvent window.event;}function getPointerPosition(e) { //相容瀏覽器的滑鼠x,y獲得函數e = e getEventObject(e);var x = e.pageX (e.clientX + (document.documentElement.scrollLeft document.body.scrollLeft));var y = e.pageY (e.clientY + (document.documentElement.scrollTop document.body.scrollTop));return { "x":x,"y":y };}function setOpacity(elem,level) { //相容瀏覽器設定透明值if(elem.filters) {elem.style.filter = "alpha(opacity=" + level * 100 + ")";} else {elem.style.opacity = level;}}function css(elem,prop) { //css設定函數,可以方便設定css值,並且相容設定透明值for(var i in prop) {if(i == "opacity") {setOpacity(elem,prop[i]);} else {elem.style[i] = prop[i];}}return elem;}var magnifier = {m : null,init:function(magni){var m = this.m = magni {cont : null, //裝載原始映像的divimg : null, //放大的映像mag : null, //放大框scale : 15 //比例值,設定的值越大放大越大,但是這裡有個問題就是如果不可以整除時,會產生些很小的白邊,目前不知道如何解決}css(m.img,{"position" : "absolute","width" : (m.cont.clientWidth * m.scale) + "px", //原始映像的寬*比例值"height" : (m.cont.clientHeight * m.scale) + "px" //原始映像的高*比例值})css(m.mag,{"display" : "none","width" : m.cont.clientWidth + "px", //m.cont為原始映像,與原始映像等寬"height" : m.cont.clientHeight + "px","position" : "absolute","left" : m.cont.offsetLeft + m.cont.offsetWidth + 10 + "px", //放大框的位置為原始映像的右方遠10px"top" : m.cont.offsetTop + "px"})var borderWid = m.cont.getElementsByTagName("div")[0].offsetWidth - m.cont.getElementsByTagName("div")[0].clientWidth; //擷取border的寬css(m.cont.getElementsByTagName("div")[0],{ //m.cont.getElementsByTagName("div")[0]為瀏覽框"display" : "none", //開始設定為不可見"width" : m.cont.clientWidth / m.scale - borderWid + "px", //原始圖片的寬/比例值 - border的寬度"height" : m.cont.clientHeight / m.scale - borderWid + "px", //原始圖片的高/比例值 - border的寬度"opacity" : 0.5 //設定透明度})m.img.src = m.cont.getElementsByTagName("img")[0].src; //讓原始映像的src值給予放大映像m.cont.style.cursor = "crosshair";m.cont.onmouseover = magnifier.start;},start:function(e){if(document.all){ //只在IE下執行,主要避免IE6的select無法覆蓋magnifier.createIframe(magnifier.m.img);}this.onmousemove = magnifier.move; //this指向m.contthis.onmouseout = magnifier.end;},move:function(e){var pos = getPointerPosition(e); //事件標準化this.getElementsByTagName("div")[0].style.display = "";css(this.getElementsByTagName("div")[0],{"top" : Math.min(Math.max(pos.y - this.offsetTop - parseInt(this.getElementsByTagName("div")[0].style.height) / 2,0),this.clientHeight - this.getElementsByTagName("div")[0].offsetHeight) + "px","left" : Math.min(Math.max(pos.x - this.offsetLeft - parseInt(this.getElementsByTagName("div")[0].style.width) / 2,0),this.clientWidth - this.getElementsByTagName("div")[0].offsetWidth) + "px" //left=滑鼠x - this.offsetLeft - 瀏覽框寬/2,Math.max和Math.min讓瀏覽框不會超出映像})magnifier.m.mag.style.display = "";css(magnifier.m.img,{"top" : - (parseInt(this.getElementsByTagName("div")[0].style.top) * magnifier.m.scale) + "px","left" : - (parseInt(this.getElementsByTagName("div")[0].style.left) * magnifier.m.scale) + "px"})},end:function(e){this.getElementsByTagName("div")[0].style.display = "none";magnifier.removeIframe(magnifier.m.img); //銷毀iframemagnifier.m.mag.style.display = "none";},createIframe:function(elem){var layer = document.createElement("iframe");layer.tabIndex = "-1";layer.src = "javascript:false;";elem.parentNode.appendChild(layer);layer.style.width = elem.offsetWidth + "px";layer.style.height = elem.offsetHeight + "px";},removeIframe:function(elem){var layers = elem.parentNode.getElementsByTagName("iframe");while(layers.length >0){layers[0].parentNode.removeChild(layers[0]);}}}window.onload = function(){magnifier.init({cont : document.getElementById("magnifier"),img : document.getElementById("magnifierImg"),mag : document.getElementById("mag"),scale : 3});}</script></head><body><div id="magnifier"><img src=http://www.webjx.com/javascript/"http://www.blueidea.com/articleimg/2009/10/7087/03.jpg" id="img" /><div id="Browser"></div></div><div id="mag"><img id="magnifierImg" /></div><select style="position:absolute;top:200px;left:650px;width:100px;"><option>select測試</option><option>是否能覆蓋</option></select></body></html>
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

以前寫過一個jQuery的圖片放大效果,但是存在著一些小問題,然後最近有時間重寫了一遍,做了很詳盡的改進.改進了大部分bug,而且不採用jQuery.

程式說明

主要為magnifier類,裡面的主要方法有:

  • init:運行方法
  • start:則是滑鼠移入div的事件處理
  • move:則是滑鼠在div中移動的事件處理
  • end:滑鼠移出後的事件處理

程式介紹

主要思維:當滑鼠移入圖片的時候,放大層的DIV出現,然後根據滑鼠移動狀況,改變放大層內映像的top值和left值,使得2個地方保持一致的現實。而2個映像跟據比例進行設定,width和height值,使之產生放大的效果,下面進行詳細的解釋:

在init方法中,主要處理瀏覽框div層的大小,放大框的大小和放大的映像大小。
瀏覽框div的width和height跟據,原始圖片的大小/比例值可以獲得,見代碼:

css(m.cont.getElementsByTagName("div")[0],{        //m.cont.getElementsByTagName("div")[0]為瀏覽框
    "display" : "none",                //開始設定為不可見
    "width" : m.cont.clientWidth / m.scale - borderWid + "px",    //原始圖片的寬/比例值 - border的寬度
    "height" : m.cont.clientHeight / m.scale - borderWid + "px",    ////原始圖片的高/比例值 - border的寬度
    "opacity" : 0.5                    //設定透明度
})

放大框的大小則設定為於原始映像相同大小,代碼如下:

css(m.mag,{
    "display" : "none",
    "width" : m.cont.clientWidth + "px",        //m.cont為原始映像
    "height" : m.cont.clientHeight + "px",
    "position" : "absolute",
    "left" : m.cont.offsetLeft + m.cont.offsetWidth + 10 + "px",    //放大框的位置為原始映像的右方遠10px
    "top" : m.cont.offsetTop + "px"
})

放大的映像大小為,原始映像大小*比例值,代碼如下:

css(m.img,{
    "position" : "absolute",
    "width" : (m.cont.clientWidth * m.scale) + "px",    //原始映像的寬*比例值
    "height" : (m.cont.clientHeight * m.scale) + "px"    //原始映像的高*比例值
})

由於放大是根據比例進行放大,所以在瀏覽框上和放大映像上需要仔細計算,這也就是該程式的主要思維之一。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。