jquery放大镜

Html

Css

 * {
	margin:0;
	padding:0;
}
.box {
	width:350px;
	height:350px;
	margin:100px;
	border:1px solid #ccc;
	position:relative;
}
.big {
	width:400px;
	height:400px;
	position:absolute;
	top:0;
	left:360px;
	border:1px solid #ccc;
	overflow:hidden;
	display:none;
}
.mask {
	width:175px;
	height:175px;
	background:rgba(255,255,0,0.4);
	position:absolute;
	top:0;
	left:0;
	cursor:move;
	display:none;
}
.small {
	position:relative;
}
img {
	vertical-align:top;
}

window.onload = function() {
      //需求：鼠标放到小盒子上，让大盒子里面的图片和我们同步等比例移动。
      //技术点：onmouseenter== 第一个不冒泡
      //技术点：onmouseleave==onmouseout  第一个不冒泡
      //步骤：
      //1.鼠标放上去显示盒子，移开隐藏盒子。
      //2.老三步和新五步（黄盒子跟随移动）
      //3.右侧的大图片，等比例移动。

//0.获取相关元素
      var box = document.getElementsByClassName("box")[0];
      var small = box.firstElementChild || box.firstChild;
      var big = box.children[1];
      var mask = small.children[1];
      var bigImg = big.children[0];

//1.鼠标放上去显示盒子，移开隐藏盒子。(为小盒子绑定事件)
      small.onmouseenter = function() {
          //封装好方法调用：显示元素
          show(mask);
          show(big);
      }
      small.onmouseleave = function() {
          //封装好方法调用：隐藏元素
          hide(mask);
          hide(big);
      }

//2.老三步和新五步（黄盒子跟随移动）
      //绑定的事件是onmousemove，而事件源是small(只要在小盒子上移动1像素，黄盒子也要跟随)
      small.onmousemove = function(event) {
          //想移动黄盒子，必须知道鼠标在small中的位置。x作为mask的left值，y作mask的top值。
          //新五步
          event = event || window.event;
          var pagex = event.pageX || scroll().left + event.clientX;
          var pagey = event.pageY || scroll().top + event.clientY;
          //让鼠标在黄盒子最中间，减去黄盒子宽高的一半
          var x = pagex - box.offsetLeft - mask.offsetWidth / 2;
          var y = pagey - box.offsetTop - mask.offsetHeight / 2;
          //限制换盒子的范围
          //left取值为大于0，小盒子的宽-mask的宽。
          if (x < 0) {
              x = 0;
          }
          if (x > small.offsetWidth - mask.offsetWidth) {
              x = small.offsetWidth - mask.offsetWidth;
          }
          //top同理。
          if (y < 0) {
              y = 0;
          }
          if (y > small.offsetHeight - mask.offsetHeight) {
              y = small.offsetHeight - mask.offsetHeight;
          }
          //移动黄盒子
          console.log(small.offsetHeight);
          mask.style.left = x + "px";
          mask.style.top = y + "px";

//3.右侧的大图片，等比例移动。
          //如何移动大图片？等比例移动。
          //    大图片/大盒子 = 小图片/mask盒子
          //    大图片走的距离/mask走的距离 = （大图片-大盒子）/（小图片-黄盒子）
          //                var bili = (bigImg.offsetWidth-big.offsetWidth)/(small.offsetWidth-mask.offsetWidth);

//大图片走的距离/mask盒子都的距离 = 大图片/小图片
          var bili = bigImg.offsetWidth / small.offsetWidth;

var xx = bili * x;
          var yy = bili * y;

bigImg.style.marginTop = -yy + "px";
          bigImg.style.marginLeft = -xx + "px";
      }
  }

//显示和隐藏
  function show(ele) {
      ele.style.display = "block";
  }

function hide(ele) {
      ele.style.display = "none";
  }

//缓动动画封装
  function animate(ele, target) {
      clearInterval(ele.timer);
      ele.timer = setInterval(function() {
          var step = (target - ele.offsetTop) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          ele.style.top = ele.offsetTop + step + "px";
          console.log(1);
          if (Math.abs(target - ele.offsetTop) < Math.abs(step)) {
              ele.style.top = target + "px";
              clearInterval(ele.timer);
          }
      }, 25);
  }
  /**
   * Created by andy on 2015/12/8.
   */
  function scroll() { // 开始封装自己的scrollTop
      if (window.pageYOffset != null) { // ie9+ 高版本浏览器
          // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
          return {
              left: window.pageXOffset,
              top: window.pageYOffset
          }
      } else if (document.compatMode === "CSS1Compat") { // 标准浏览器   来判断有没有声明DTD
          return {
              left: document.documentElement.scrollLeft,
              top: document.documentElement.scrollTop
          }
      }
      return { // 未声明 DTD
          left: document.body.scrollLeft,
          top: document.body.scrollTop
      }
  }
  /**
   * Created by Lenovo on 2016/9/2.
   */
  /**
   * 通过传递不同的参数获取不同的元素
   * @param str
   * @returns {*}
   */
  function $(str) {
      var str1 = str.charAt(0);
      if (str1 === "#") {
          return document.getElementById(str.slice(1));
      } else if (str1 === ".") {
          return document.getElementsByClassName(str.slice(1));
      } else {
          return document.getElementsByTagName(str);
      }
  }

/**
   * 功能：给定元素查找他的第一个元素子节点，并返回
   * @param ele
   * @returns {Element|*|Node}
   */
  function getFirstNode(ele) {
      var node = ele.firstElementChild || ele.firstChild;
      return node;
  }

/**
   * 功能：给定元素查找他的最后一个元素子节点，并返回
   * @param ele
   * @returns {Element|*|Node}
   */
  function getLastNode(ele) {
      return ele.lastElementChild || ele.lastChild;
  }

/**
   * 功能：给定元素查找他的下一个元素兄弟节点，并返回
   * @param ele
   * @returns {Element|*|Node}
   */
  function getNextNode(ele) {
      return ele.nextElementSibling || ele.nextSibling;
  }

/**
   * 功能：给定元素查找他的上一个兄弟元素节点，并返回
   * @param ele
   * @returns {Element|*|Node}
   */
  function getPrevNode(ele) {
      return ele.previousElementSibling || ele.previousSibling;
  }

/**
   * 功能：给定元素和索引值查找指定索引值的兄弟元素节点，并返回
   * @param ele 元素节点
   * @param index 索引值
   * @returns {*|HTMLElement}
   */
  function getEleOfIndex(ele, index) {
      return ele.parentNode.children[index];
  }

/**
   * 功能：给定元素查找他的所有兄弟元素，并返回数组
   * @param ele
   * @returns {Array}
   */
  function getAllSiblings(ele) {
      //定义一个新数组，装所有的兄弟元素，将来返回
      var newArr = [];
      var arr = ele.parentNode.children;
      for (var i = 0; i < arr.length; i++) {
          //判断，如果不是传递过来的元素本身，那么添加到新数组中。
          if (arr[i] !== ele) {
              newArr.push(arr[i]);
          }
      }
      return newArr;
  }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jquery放大镜



代码描述：jquery商品预览图片放大镜效果

更新时间：2020-01-08 09:16:11

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

kdbl12

相关代码

jquery放大镜

最新