完美世界小说txt下载,天下高月小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

JS實(shí)現(xiàn)多圖點(diǎn)擊切換，鼠標(biāo)移上放大

繼 javascript 簡(jiǎn)單的圖片放大效果(一) 之后，把這個(gè)效果完善了一下，支持多圖輪流切換，如下：

創(chuàng)新互聯(lián)公司是專業(yè)的平邑網(wǎng)站建設(shè)公司，平邑接單;提供網(wǎng)站制作、網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行平邑網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

本次采用代碼封裝到一個(gè)對(duì)象的模式，和***次函數(shù)式寫法不一下，這樣更清晰，添加自定義屬性更方便，全部代碼如下：

大圖的地址用自定義屬性的方式顯示在標(biāo)簽如

 
 
 
  
  
  
  
  
  
  
  
  
  
  
      
  
  
      圖片放大實(shí)例
  
  
      
  
  
      
  
  
          * { 
  
  
              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; 
  
  
          }

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]; //獲取放大的目標(biāo)圖片對(duì)象

thisthis.bigImgUrl = this.targetImg.getAttribute('zoom'); //從目標(biāo)圖片對(duì)象的自定義屬性讀取大圖的URL

this.bindMove();

this.bindMinImg();

createMask:function () {

var mask = this.mask = document.createElement("div"); //創(chuàng)建MASK層

mask.id = "mask";

// 設(shè)置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"); //創(chuàng)建大圖顯示層

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"

});

// 創(chuàng)建大圖

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";

//顯示位置計(jì)算

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));

// 以下是左側(cè)小圖鼠標(biāo)放上去后右側(cè)顯示相應(yīng)的大圖

bindMinImg:function () {

var minImgUl = VVG.$('minImg'); //獲取左側(cè)的UL

var minImgLis = VVG.$$('li', minImgUl); //獲取左側(cè)的li

var thisthisObj = 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，并綁定左側(cè)迷你圖點(diǎn)擊事件

VVG.bindEvent(liImg, 'click', function (t,f) {

return function () {

thisObj.changeImg.call(thisObj,t,f); //此處調(diào)用changeImg方法

}

}(imgSrc,bImgSrc));

}

changeImg:function (imgSrc, bImgSrc) { //改變右邊的圖片地址

this.targetImg.src = imgSrc;

this.bigImg.setAttribute('src', bImgSrc);

}

}();

zoomImg.init('zoomWarp', {});

#p#

VVG.base庫代碼：

 
 
 
  
  
  /* 
  
  
   *    簡(jiǎn)單JS庫封裝  By VVG 
  
  
   *    @namespace VVG 
  
  
   *    E-mail:[email protected]    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; 
  
  
              } 
  
  
              // 如果只有一個(gè)參數(shù)，則返回 
  
  
              if (arguments.length == 1) { 
  
  
                  return element; 
  
  
              } 
  
  
              // 多個(gè)參數(shù)的時(shí)候存為數(shù)組 
  
  
              elements.push(element); 
  
  
          } 
  
  
          // 返回?cái)?shù)組 
  
  
          return elements; 
  
  
      } 
  
  
  
  
  
      window.VVG.$ = $; 
  
  
  
  
  
      // 獲取Parent父元素下標(biāo)簽名為child 的 Tags 
  
  
  
  
  
      function $$(tag, parent) { 
  
  
          parentparent = parent || document; 
  
  
          return $(parent).getElementsByTagName(tag); 
  
  
      } 
  
  
  
  
  
      window.VVG.$$ = $$; 
  
  
  
  
  
      // getElementsByClassName 
  
  
  
  
  
      function $$$(str, parent, tag) { 
  
  
          //父節(jié)點(diǎn)存在 
  
  
          if (parent) { 
  
  
              parent = $(parent); 
  
  
          } else { 
  
  
              // 未傳值時(shí)，父節(jié)點(diǎn)為body 
  
  
              parent = document; 
  
  
          } 
  
  
          // tagContent為節(jié)點(diǎn)類型，未傳值時(shí)為all節(jié)點(diǎn) 
  
  
          tagtag = tag || '*'; 
  
  
          // 在父節(jié)點(diǎn)查找子節(jié)點(diǎn)，建立空數(shù)組arr 
  
  
          var els = parent.getElementsByTagName(tag), 
  
  
              arr = []; 
  
  
          for (var i = 0, n = els.length; i < n; i++) { 
  
  
              // 查找每個(gè)節(jié)點(diǎn)下的classname，以空格分離為一個(gè)k數(shù)組 
  
  
              for (var j = 0, k = els[i].className.split(' '), l = k.length; j < 1; j++) { 
  
  
                  // 當(dāng)K數(shù)組中有一個(gè)值與str值相等時(shí)，記住這個(gè)標(biāo)簽并推入arr數(shù)組 
  
  
                  if (k[j] == str) { 
  
  
                      arr.push(els[i]); 
  
  
                      break; 
  
  
                  } 
  
  
              } 
  
  
          } 
  
  
          // 返回?cái)?shù)組 
  
  
          return arr; 
  
  
      } 
  
  
  
  
  
      window.VVG.$$$ = $$$; 
  
  
      window.VVG.getElementsByClassName = $$$; 
  
  
  
  
  
      // Event事件綁定：綁定type事件到element元素，觸發(fā)func函數(shù) 
  
  
  
  
  
      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; 
  
  
  
  
  
      // 獲取事件目標(biāo) 
  
  
  
  
  
      function getTarget(event) { 
  
  
          return event.target || event.srcElement; 
  
  
      } 
  
  
  
  
  
      window.VVG.getTarget = getTarget; 
  
  
  
  
  
      // 獲取鼠標(biāo)位于文檔的坐標(biāo) 
  
  
  
  
  
      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; 
  
  
  
  
  
      // 阻止默認(rèn)事件 
  
  
  
  
  
      function preventDefault(event) { 
  
  
          if (event.preventDefault) { 
  
  
              event.preventDefault(); 
  
  
          } else { 
  
  
              event.returnValue = false; 
  
  
          } 
  
  
      } 
  
  
  
  
  
      window.VVG.preventDefault = preventDefault; 
  
  
  
  
  
      //  apply從新定義函數(shù)的執(zhí)行環(huán)境 
  
  
  
  
  
      function bindFunction(obj, func) { 
  
  
          return function () { 
  
  
              return func.apply(obj, arguments); 
  
  
          }; 
  
  
      } 
  
  
  
  
  
      window.VVG.bindFunction = bindFunction; 
  
  
  
  
  
      // 設(shè)置透明度 
  
  
  
  
  
      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; 
  
  
  
  
  
      //  數(shù)字轉(zhuǎn)化為千分位格式函數(shù) 
  
  
  
  
  
      function thousandsNumberFormat(str) { 
  
  
          var n = str.length; 
  
  
          var c = n % 3; 
  
  
          var reg = /\d{3}(?!$)/g; 
  
  
          if (n > 3) { 
  
  
              var strstr1 = str.slice(0, c); 
  
  
              var strstr2 = str.slice(c, n); 
  
  
              str1str1 = str1 ? str1 + ',' : ''; 
  
  
              str = str1 + str2.replace(reg, function (p1) { 
  
  
                  return p1 + ','; 
  
  
              }) 
  
  
          } 
  
  
          return str; 
  
  
      } 
  
  
  
  
  
      window.VVG.thousandsNumberFormat = thousandsNumberFormat; 
  
  
  
  
  
      // 帶橫杠的字符形式轉(zhuǎn)化為駝峰式命名 
  
  
  
  
  
      function camelize(string) { 
  
  
          return string.replace(/-(\w)/g, function (strMatch, p1) { 
  
  
              return p1.toUpperCase(); 
  
  
          }); 
  
  
      } 
  
  
  
  
  
      window.VVG.camelize = camelize; 
  
  
  
  
  
      // 駝峰式轉(zhuǎn)化為橫杠分隔 
  
  
  
  
  
      function uncamelize(string, sep) { 
  
  
          sepsep = sep || '-'; 
  
  
          return string.replace(/([a-z])([A-Z])/g, function (strMatch, p1, p2) { 
  
  
              return p1 + sep + p2.toLowerCase(); 
  
  
          }); 
  
  
      } 
  
  
  
  
  
      window.VVG.uncamelize = uncamelize; 
  
  
  
  
  
      // 設(shè)置根據(jù)ID設(shè)置樣式 
  
  
  
  
  
      function setStyleById(element, cssjson) { 
  
  
          element = $(element); 
  
  
          for (property in cssjson) { 
  
  
              if (!cssjson.hasOwnProperty(property)) continue; 
  
  
              if                                                

                                                網(wǎng)頁標(biāo)題：JS實(shí)現(xiàn)多圖點(diǎn)擊切換，鼠標(biāo)移上放大                                                

                                                標(biāo)題來源：http://m.fisionsoft.com.cn/article/cophgcc.html

新聞中心

其他資訊