JS实现多图点击切换，鼠标移上放大

继 javascript 简单的图片放大效果(一) 之后，把这个效果完善了一下，支持多图轮流切换，如下：

创新互联公司是专业的平邑网站建设公司，平邑接单;提供网站制作、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行平邑网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

本次采用代码封装到一个对象的模式，和***次函数式写法不一下，这样更清晰，添加自定义属性更方便，全部代码如下：

大图的地址用自定义属性的方式显示在标签如

 
 
 
  
  
  
  
  
  
  
  
  
  
  
      
  
  
      图片放大实例
  
  
      
  
  
      
  
  
          * { 
  
  
              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]; //获取放大的目标图片对象

thisthis.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 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，并绑定左侧迷你图点击事件

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', {});

#p#

VVG.base库代码：

 
 
 
  
  
  /* 
  
  
   *    简单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) { 
  
  
          parentparent = parent || document; 
  
  
          return $(parent).getElementsByTagName(tag); 
  
  
      } 
  
  
  
  
  
      window.VVG.$$ = $$; 
  
  
  
  
  
      // getElementsByClassName 
  
  
  
  
  
      function $$$(str, parent, tag) { 
  
  
          //父节点存在 
  
  
          if (parent) { 
  
  
              parent = $(parent); 
  
  
          } else { 
  
  
              // 未传值时，父节点为body 
  
  
              parent = document; 
  
  
          } 
  
  
          // tagContent为节点类型，未传值时为all节点 
  
  
          tagtag = 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 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; 
  
  
  
  
  
      // 带横杠的字符形式转化为驼峰式命名 
  
  
  
  
  
      function camelize(string) { 
  
  
          return string.replace(/-(\w)/g, function (strMatch, p1) { 
  
  
              return p1.toUpperCase(); 
  
  
          }); 
  
  
      } 
  
  
  
  
  
      window.VVG.camelize = camelize; 
  
  
  
  
  
      // 驼峰式转化为横杠分隔 
  
  
  
  
  
      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; 
  
  
  
  
  
      // 设置根据ID设置样式 
  
  
  
  
  
      function setStyleById(element, cssjson) { 
  
  
          element = $(element); 
  
  
          for (property in cssjson) { 
  
  
              if (!cssjson.hasOwnProperty(property)) continue; 
  
  
              if            
                当前文章：JS实现多图点击切换，鼠标移上放大
                

                当前路径：http://www.csdahua.cn/qtweb/news14/246314.html
            
            
                                    成都网站优化推广公司_创新互联，为您提供自适应网站、网站制作、定制开发、网站导航、电子商务、ChatGPT            
            
                广告
                
            
            
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                快上网