繼 javascript 簡單的圖片放大效果(一) 之后，把這個效果完善了一下，支持多圖輪流切換，如下：
本次采用代碼封裝到一個對象的模式，和第一次函數式寫法不一下，這樣更清晰，添加自定義屬性更方便，全部代碼如下：
大圖的地址用自定義屬性的方式顯示在<img>標簽如
<li><img src="images/small.jpg" width="70" height="70" zoom="images/big.jpg"></li>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>圖片放大實例</title> <script type="text/javascript" src="js/vvgbase.1.0.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } #zoomWarp { width: 1000px; margin: 20px auto; overflow: hidden; } #smallwarp { position: relative; border: 1px solid #000; width: 300px; height: 300px; float: left; overflow: hidden; } #minImg { float: left; display: inline; margin-right: 5px; } #minImg li { width: 70px; height: 70px; overflow: hidden; background: #ccc; margin-bottom: 5px; border: 1px solid #333; cursor: pointer; list-style: none; } #minImg li.lastChild { margin-bottom: 0; } </style> </head> <body> <iframe src="http://greencat.w211141.fxdns.cn/jsplay/ImgZoomTest.html"></iframe> <div id="zoomWarp"> <ul id="minImg"> <li><img src="images/small.jpg" width="70" height="70" zoom="images/big.jpg"></li> <li><img src="images/small1.jpg" width="70" height="70" zoom="images/big1.jpg"></li> <li><img src="images/small.jpg" width="70" height="70" zoom="images/big.jpg"></li> <li class="lastChild"><img src="images/small1.jpg" width="70" height="70" zoom="images/big1.jpg"></li> </ul> <div id="smallwarp"> <img src="images/small.jpg" id="smallImg" zoom="images/big.jpg"/> </div> </div> <script type="text/javascript"> var zoomImg = function () { return { init:function (warpId, options) { this.zoomWarp = VVG.$(warpId); //獲取外層包裹層 var sWarp = options.smallWarp || 'smallwarp'; //小圖包裹層ID var smallWarp = this.smallWarp = VVG.$(sWarp); //獲取小圖包裹層 this.targetImg = VVG.$$('img', smallWarp)[0]; //獲取放大的目標圖片對象 this.bigImgUrl = this.targetImg.getAttribute('zoom'); //從目標圖片對象的自定義屬性讀取大圖的URL this.bindMove(); this.bindMinImg(); }, createMask:function () { var mask = this.mask = document.createElement("div"); //創建MASK層 mask.id = "mask"; // 設置CSS VVG.setStyleById(mask, { "position":"absolute", "z-index":100, "display":"none", "width":"100px", "height":"100px", "background":"#999", "border":"1px solid #000", "cursor":"crosshair", "opacity":80, "left":0, "top":0 }); this.smallWarp.appendChild(mask); //添加MASK層 }, createBigDiv:function () { var bigDiv = this.bigDiv = document.createElement("div"); //創建大圖顯示層 bigDiv.id = "big"; VVG.setStyleById(bigDiv, { "float":"left", "border":"1px solid #000", "display":"none", "width":"300px", "height":"300px", "overflow":"hidden", "border-left":"none", "position":"relative", "z-index":"100" }); // 創建大圖 var bigImg = this.bigImg = document.createElement('img'); bigImg.setAttribute('src', this.bigImgUrl); bigImg.id = 'bigImg'; bigImg.style.position = 'absolute'; bigDiv.appendChild(bigImg); this.zoomWarp.appendChild(bigDiv); //添加大圖顯示層 }, show:function () { // 顯示懸浮遮罩層和放大圖片層 this.mask.style.display = 'block'; this.bigDiv.style.display = 'block'; }, hidden:function () { //隱藏層 this.mask.style.display = 'none'; this.bigDiv.style.display = 'none'; }, zoomIng:function (event) { //開始放大 this.show(); //顯示 event = VVG.getEvent(event); //獲取事件 var target = this.mask; var maskW = target.offsetWidth; var maskH = target.offsetHeight; //console.log(maskW +':'+maskH); var sTop = document.documentElement.scrollTop || document.body.scrollTop; var mouseX = event.clientX; var mouseY = event.clientY + sTop; var smallX = this.smallWarp.offsetLeft; var smallY = this.smallWarp.offsetTop; var smallW = this.smallWarp.offsetWidth; var smallH = this.smallWarp.offsetHeight; //console.log('x=' + mouseX + ':y=' + mouseY + ':' + sTop + 'smallX:' + smallX); target.style.left = (mouseX - smallX - maskW / 2 ) + "px"; target.style.top = (mouseY - smallY - maskH / 2 ) + "px"; //顯示位置計算 if ((mouseX - smallX) < maskW / 2) { target.style.left = "0px"; } else if ((mouseX - smallX) > (smallW - maskW + maskW / 2)) { target.style.left = (smallW - maskW ) + "px"; } if ((mouseY - smallY) < maskH / 2) { target.style.top = "0px"; } else if ((mouseY - smallY) > (smallH - maskH + maskH / 2)) { target.style.top = (smallH - maskH) + "px"; } this.showBig(parseInt(target.style.left), parseInt(target.style.top)); }, showBig:function (left, top) { left = Math.ceil(left * 3); top = Math.ceil(top * 3); this.bigImg.style.left = -left + "px"; this.bigImg.style.top = -top + "px"; }, bindMove:function () { this.createMask(); this.createBigDiv(); VVG.bindEvent(this.smallWarp, 'mousemove', VVG.bindFunction(this, this.zoomIng)); VVG.bindEvent(this.smallWarp, 'mouseout', VVG.bindFunction(this, this.hidden)); }, // 以下是左側小圖鼠標放上去后右側顯示相應的大圖 bindMinImg:function () { var minImgUl = VVG.$('minImg'); //獲取左側的UL var minImgLis = VVG.$$('li', minImgUl); //獲取左側的li var thisObj = this; //this 賦值 for (var i = 0, n = minImgLis.length; i < n; i++) { var liImg = VVG.$$('img', minImgLis[i])[0]; var imgSrc = liImg.src; var bImgSrc = liImg.getAttribute('zoom'); //以下閉包傳值imgSrc,與bImgSrc，並綁定左側迷你圖點擊事件 VVG.bindEvent(liImg, 'click', function (t,f) { return function () { thisObj.changeImg.call(thisObj,t,f); //此處調用changeImg方法 } }(imgSrc,bImgSrc)); } }, changeImg:function (imgSrc, bImgSrc) { //改變右邊的圖片地址 this.targetImg.src = imgSrc; this.bigImg.setAttribute('src', bImgSrc); } } }(); zoomImg.init('zoomWarp', {}); </script> </body> </html>
VVG.base庫代碼：
View Code
/* * 簡單JS庫封裝 By VVG * @namespace VVG * E-mail:mysheller@163.com QQ:83816819 */ if (!String.trim) { String.prototype.trim = function () { var reg = /^\s+|\s+$/g; return this.replace(reg, ''); } } (function () { // create namespace VVG if (!window.VVG) { window.VVG = {}; } function isCompatible(other) { // Use capability detection to check requirements if (other === false || !Array.prototype.push || !Object.hasOwnProperty || !document.createElement || !document.getElementsByTagName) { alert('你的瀏覽器不支持某些特性！'); return false; } return true; } window.VVG.isCompatible = isCompatible; // getElementById function function $() { var elements = new Array(); for (var i = 0; i < arguments.length; i++) { var element = arguments[i]; if (typeof element == 'string') { element = document.getElementById(element); } if (!element) { continue; } // 如果只有一個參數，則返回 if (arguments.length == 1) { return element; } // 多個參數的時候存為數組 elements.push(element); } // 返回數組 return elements; } window.VVG.$ = $; // 獲取Parent父元素下標簽名為child 的 Tags function $$(tag, parent) { parent = parent || document; return $(parent).getElementsByTagName(tag); } window.VVG.$$ = $$; // getElementsByClassName function $$$(str, parent, tag) { //父節點存在 if (parent) { parent = $(parent); } else { // 未傳值時，父節點為body parent = document; } // tagContent為節點類型，未傳值時為all節點 tag = tag || '*'; // 在父節點查找子節點，建立空數組arr var els = parent.getElementsByTagName(tag), arr = []; for (var i = 0, n = els.length; i < n; i++) { // 查找每個節點下的classname，以空格分離為一個k數組 for (var j = 0, k = els[i].className.split(' '), l = k.length; j < 1; j++) { // 當K數組中有一個值與str值相等時，記住這個標簽並推入arr數組 if (k[j] == str) { arr.push(els[i]); break; } } } // 返回數組 return arr; } window.VVG.$$$ = $$$; window.VVG.getElementsByClassName = $$$; // Event事件綁定：綁定type事件到element元素，觸發func函數 function bindEvent(element, type, func) { if (element.addEventListener) { element.addEventListener(type, func, false); //false 表示冒泡 } else if (element.attachEvent) { element.attachEvent('on' + type, func); } else { element['on' + type] = func; } } window.VVG.bindEvent = bindEvent; // 解除Event事件綁定 function unbindEvent(element, type, func) { if (element.removeEventListener) { element.removeEventListener(type, func, false); } else if (element.detachEvent) { element.detachEvent('on' + type, func); } else { element['on' + type] = null; } } window.VVG.unbindEvent = unbindEvent; // 獲取事件 function getEvent(event) { return event || window.event; } window.VVG.getEvent = getEvent; // 獲取事件目標 function getTarget(event) { return event.target || event.srcElement; } window.VVG.getTarget = getTarget; // 獲取鼠標位於文檔的坐標 function getMousePositionInPage(event) { event = getEvent(event); return { 'x':event.pageX || event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft), 'y':event.pageY || event.clientY + (document.documentElement.scrollTop || document.body.scrollTop) } } window.VVG.getMousePositionInPage = getMousePositionInPage; // 停止事件冒泡 function stopPropagation(event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } } window.VVG.stopPropagation = stopPropagation; // 阻止默認事件 function preventDefault(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } } window.VVG.preventDefault = preventDefault; // apply從新定義函數的執行環境 function bindFunction(obj, func) { return function () { return func.apply(obj, arguments); }; } window.VVG.bindFunction = bindFunction; // 設置透明度 function setOpacity(node, level) { node = $(node); if (document.all) { node.style.filter = 'alpha(opacity=' + level + ')'; } else { node.style.opacity = level / 100; } } window.VVG.setOpacity = setOpacity; // 獲取可視窗口尺寸 function getWindowSize() { var de = document.documentElement; return { 'width':( window.innerWidth || (de && de.clientWidth) || document.body.clientWidth), 'height':( window.innerHeight || (de && de.clientHeight) || document.body.clientHeight) } } window.VVG.getWindowSize = getWindowSize; // 數字轉化為千分位格式函數 function thousandsNumberFormat(str) { var n = str.length; var c = n % 3; var reg = /\d{3}(?!$)/g; if (n > 3) { var str1 = str.slice(0, c); var str2 = str.slice(c, n); str1 = str1 ? str1 + ',' : ''; str = str1 + str2.replace(reg, function (p1) { return p1 + ','; }) } return str; } window.VVG.thousandsNumberFormat = thousandsNumberFormat; // 帶橫杠的字符形式轉化為駝峰式命名 function camelize(string) { return string.replace(/-(\w)/g, function (strMatch, p1) { return p1.toUpperCase(); }); } window.VVG.camelize = camelize; // 駝峰式轉化為橫杠分隔 function uncamelize(string, sep) { sep = sep || '-'; return string.replace(/([a-z])([A-Z])/g, function (strMatch, p1, p2) { return p1 + sep + p2.toLowerCase(); }); } window.VVG.uncamelize = uncamelize; // 設置根據ID設置樣式 function setStyleById(element, cssjson) { element = $(element); for (property in cssjson) { if (!cssjson.hasOwnProperty(property)) continue; if (property == 'opacity') { setOpacity(element, cssjson[property]); } else { element.style[camelize(property)] = cssjson[property]; } } } window.VVG.setStyleById = setStyleById; window.VVG.setStyle = setStyleById; // 根據Class類設置樣式 function setStyleByClassName(classname, cssjson, parent, tag) { var elements = $$$(classname, parent, tag); for (i = 0, n = elements.length; i < n; i++) { setStyleById(elements[i], cssjson); } } window.VVG.setStyleByClassName = setStyleByClassName; // 根據HTML標簽TAG設置樣式 function setStyleByTagName(tag, cssjson, parent) { var tags = $$(tag, parent); for (var i = 0; i < tags.length; i++) { setStyleById(tags[i], cssjson); } } window.VVG.setStyleByTagName = setStyleByTagName; // 獲取Element元素的className function getClassNames(element) { if (!(element = $(element))) return false; return element.className.replace(/\s+/g, ' ').split(' '); } window.VVG.getClassNames = getClassNames; // 查找element元素是否含有class function hasClassName(element, classname) { if (!(element = $(element))) return false; var classNames = getClassNames(element); for (var i = 0; i < classNames.length; i++) { if (classNames[i] === classname) return true; } return false; } window.VVG.hasClassName = hasClassName; // 增加class function addClassName(element, classname) { if (!(element = $(element))) return false; element.className += (element.className ? ' ' : '') + classname; } window.VVG.addClassName = addClassName; // 刪除其中一個className function removeClassName(element, classname) { if (!(element = $(element))) return false; if (hasClassName(element, classname)) { var classtexts = getClassNames(element); for (var i = 0; i < classtexts.length; i++) { if (classtexts[i] == classname) { delete(classtexts[i]); } } element.className = classtexts.join(' '); } } window.VVG.removeClassName = removeClassName; // 增加一個外部鏈接CSS function addStyleSheet(url, media) { media = media || 'screen'; var link = document.createElement('LINK'); link.setAttribute('rel', 'stylesheet'); link.setAttribute('type', 'text/css'); link.setAttribute('href', url); link.setAttribute('media', media); document.getElementsByTagName('head')[0].appendChild(link); } window.VVG.addStyleSheet = addStyleSheet; // 刪除一個外部鏈接CSS function removeStyleSheet(url) { var stylesheets = document.getElementsByTagName('link'); for (var i = 0; i < stylesheets.length; i++) { if (!(stylesheets[i].href.indexOf(url) == -1)) { stylesheets[i].parentNode.removeChild(stylesheets[i]); return true; } } return false; } window.VVG.removeStyleSheet = removeStyleSheet; // COOKIE 操作 function getCookie(name) { var start = document.cookie.indexOf(name + "="); var len = start + name.length + 1; if ((!start) && (name != document.cookie.substring(0, name.length))) { return null; } if (start == -1) return null; var end = document.cookie.indexOf(";", len); if (end == -1) end = document.cookie.length; return unescape(document.cookie.substring(len, end)); } window.VVG.getCookie = getCookie; function setCookie(name, value, expires, path, domain, secure) { var today = new Date(); today.setTime(today.getTime()); if (expires) { expires = expires * 1000 * 60 * 60 * 24; } var expires_date = new Date(today.getTime() + (expires)); document.cookie = name + "=" + escape(value) + ((expires) ? ";expires=" + expires_date.toGMTString() : "") + ((path) ? ";path=" + path : "") + ((domain) ? ";domain=" + domain : "") + ((secure) ? ";secure" : ""); } window.VVG.setCookie = setCookie; function deleteCookie(name, path, domain) { if (getCookie(name)) document.cookie = name + "=" + ((path) ? ";path=" + path : "") + ((domain) ? ";domain=" + domain : "") + ";expires=Thu, 01-Jan-1970 00:00:01 GMT"; } window.VVG.deleteCookie = deleteCookie; // ajax對象操作 // 安全過濾JSON的函數parseJSON function parseJSON(s, filter) { var j; function walk(k, v) { var i; if (v && typeof v === 'object') { for (i in v) { if (v.hasOwnProperty(i)) { v[i] = walk(i, v[i]); } } } return filter(k, v); } if (/^("(\\.|[^"\\\n\r])*?"|[,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t])+?$/.test(s)) { try { j = eval('(' + s + ')'); } catch (e) { throw new SyntaxError("parseJSON"); } } else { throw new SyntaxError("parseJSON"); } if (typeof filter === 'function') { j = walk('', j); } return j; } // 創建一個XMLHttpRequest對象 function getRequestObject(url, options) { var req = false; if (window.XMLHttpRequest) { req = new window.XMLHttpRequest(); } else if (window.ActiveXObject) { req = new window.ActiveXObject('Microsoft.XMLHTTP'); } if (!req) return false; // 設置默認數據 options = options || {}; options.method = options.method || 'GET'; options.send = options.send || null; // 定義事件偵聽函數 req.onreadystatechange = function () { switch (req.readyState) { case 1: // 正在載入 if (options.loadListener) { options.loadListener.apply(req, arguments); } break; case 2: // 載入完成 if (options.loadedListener) { options.loadedListener.apply(req, arguments); } break; case 3: // 正在交互 if (options.ineractiveListener) { options.ineractiveListener.apply(req, arguments); } break; case 4: // 交互完成 try { if (req.status && req.status == 200) { // 獲取文件格式 // 為不同的content-type設置對應的方法 var contentType = req.getResponseHeader('Content-Type'); var mimeType = contentType.match(/\s*([^;]+)\s*(;|$)/i)[1]; switch (mimeType) { case 'text/plain': if (options.txtResponseListener) { options.txtResponseListener.call(req, req.responseText); } break; case 'text/javascript': case 'application/javascript': if (options.jsResponseListener) { options.jsResponseListener.call(req, req.responseText); } break; case 'application/json': if (options.jsonResponseListener) { try { var json = parseJSON(req.responseText); } catch (e) { json = false; } options.jsonResponseListener.call(req, json); } break; case 'text/xml': case 'application/xml': case 'application/xhtml+xml': if (options.xmlResponseListener) { options.xmlResponseListener.call(req, req.responseXML); } break; case 'text/html': if (options.htmlResponseListener) { options.htmlResponseListener.call(req, req.responseText); } break; } if (options.completeListener) { options.completeListener.apply(req, arguments); } } else { if (options.errorListener) { options.errorListener.apply(req, arguments); } } } catch (e) { //ignore errors //alert('Response Error: ' + e); } break; } }; // Open the request req.open(options.method, url, true); // 添加一個header識別標記 req.setRequestHeader('VVG-Base-Ajax-Request', 'AjaxRequest'); return req; } window.VVG.getRequestObject = getRequestObject; // 簡易包裝send方法與發送XMLHttpRequest請求 function ajaxRequest(url, options) { var req = getRequestObject(url, options); return req.send(options.send); } window.VVG.ajaxRequest = ajaxRequest; })();