实现jquery放大镜的两种方法

2024-09-27 21:28:06

jquery写的两种放大镜效果，没有使用到插件。调理和思路清晰。不是使用面向对象方式写的，初学者较容易看懂。废话不多说，看代码。图片这里就不上传了，大家自己找下。最好是找到比例的，这样效果比较好。

<body>
  <div id="father">
    <div id="container">
      <img src="img/400_1.jpg" style="display: block;">
      <img src="img/400_2.jpg" >
      <div class="shade"></div>
    </div>
    <div class="small first"><img src="img/50_1.jpg"></div>
    <div class="small second"><img src="img/50_2.jpg"></div>
  </div> 

  <div class="big">
    <img src="img/800_1.jpg" style="display: block;">
    <img src="img/800_2.jpg">
  </div>
</body>

css代码

*{padding: 0; margin: 0;}
  #father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;}
  #father .second{left: 70px;}
  .third{left: 140px;}
  #father{position: relative; top: 100px; left: 50px; height: 460px;}
  #container{position: absolute; width: 400px; height: 400px;}
  #container img{position: absolute; display: none;} 

  .shade{width: 200px; height: 200px; position: absolute; background: #000; opacity: 0.4; top: 0;
    left: 0; display: none;}
  .big{width: 400px; height: 400px; position: absolute; top: 100px; overflow: hidden; left: 500px; display: none;}
  .big img{width: 800px; height: 800px; position: absolute; display: none;}

js代码

<script type="text/javascript" src='js/jquery-1.12.4.min.js'></script>
  <script type="text/javascript">
    $(function () { 

      changePic('.first',0);
      changePic('.second',1); 

      var shadeWidth = $('.shade').width(),//阴影的宽度
        shadeHeight = $('.shade').height(),//阴影的高度
        middleWidth = $('#container').width(),//容器的宽度
        middleHeight = $('#container').height(),//容器的高度
        bigWidth = $('.big').width(),//放大图片盒子的宽度
        bigHeight = $('.big').height(),//放大图片盒子的高度
        rateX = bigWidth / shadeWidth,//放大区和遮罩层的宽度比例
        rateY = bigHeight / shadeHeight;//放大区和遮罩层的高度比例 

      //当鼠标移入与移出时阴影与放大去显现/消失
      $('#container').hover(function() {
        $('.shade').show();
        $('.big').show();
      }, function() {
        $('.shade').hide();
        $('.big').hide();
      }).mousemove(function(e) {//当鼠标移动时，阴影和放大区图片进行移动 

        //记录下光标距离页面的距离
        var x = e.pageX,
          y = e.pageY; 

        //设置遮罩层的位置
        $('.shade').offset({
          top: y-shadeHeight/2,
          left: x-shadeWidth/2
        });    

        //获取遮罩层相对父元素的位置
        var cur = $('.shade').position(),
          _top = cur.top,
          _left = cur.left,
          hdiffer = middleHeight - shadeHeight,
          wdiffer = middleWidth - shadeWidth; 

        if (_top < 0) _top = 0;
        else if (_top > hdiffer) _top = hdiffer;
        if (_left < 0) _left = 0;
        else if (_left > wdiffer) _left =wdiffer; 

        //判断完成后设置遮罩层的范围
        $('.shade').css({
          top: _top,
          left: _left
        }); 

        //设置放大区图片移动
        $('.big img').css({
          top: - rateY*_top,
          left: - rateX*_left
        }); 

      });; 

      //封装的改变图片显示的函数
      function changePic (element,index) {
        $(element).click(function() {
          $('#container img').eq(index).css('display', 'block').siblings().css('display', 'none');
          $('.big img').eq(index).css('display', 'block').siblings().css('display', 'none');
        });
      } 

    });

以上是常用的，下面这个是在原图基础上放大的

htm

<body>
  <div id="father">
    <div id="container">
      <img src="img/400_1.jpg" style="display: block;">
      <img src="img/400_2.jpg" >
      <img src="img/400_3.jpg" >
      <div class="shade">
        <img src="img/800_1.jpg" style="display: block;">
        <img src="img/800_2.jpg">
        <img src="img/800_3.jpg">
      </div>
    </div>
    <div class="small first"><img src="img/50_1.jpg"></div>
    <div class="small second"><img src="img/50_2.jpg"></div>
    <div class="small third"><img src="img/50_3.jpg"></div>
  </div>
</body>

css代码

*{padding: 0; margin: 0;}
    #father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;}
    #father .second{left: 70px;}
    .third{left: 140px;}
    #father{position: relative; top: 100px; left: 50px; height: 460px;}
    #container{position: absolute; width: 400px; height: 400px;}
    #container img{position: absolute; display: none;}
    .shade{width: 200px; height: 200px; position: absolute; top: 0;left: 0; display: none; border-radius: 50%; overflow: hidden; background: #000;}
    .shade img{display: none; width: 800px; height: 800px; position: absolute;}

js代码

<span style="white-space:pre">  </span><script type="text/javascript" src='js/jquery-1.12.4.min.js'></script>
  <script type="text/javascript">
    $(function () { 

      changePic('.first',0);
      changePic('.second',1);
      changePic('.third',2); 

      var shadeWidth = $('.shade').width(),//阴影的宽度
        shadeHeight = $('.shade').height(),//阴影的高度
        middleWidth = $('#container').width(),//容器的宽度
        middleHeight = $('#container').height(),//容器的高度
        bigImgWidth = $('.shade img').width(),//放大图片盒子的宽度
        bigImgHeight = $('.shade img').height(),//放大图片盒子的高度
        rateX = bigImgWidth / middleWidth,//放大区和遮罩层的宽度比例2
        rateY = bigImgHeight / middleHeight;//放大区和遮罩层的高度比例2 

      //当鼠标移入与移出时阴影与放大去显现/消失
      $('#container').hover(function() {
        $('.shade').show();
        $('.big').show();
      }, function() {
        $('.shade').hide();
        $('.big').hide();
      }).mousemove(function(e) {//当鼠标移动时，阴影和放大区图片进行移动 

        //记录下光标距离页面的距离
        var x = e.pageX,
          y = e.pageY; 

        //设置遮罩层的位置
        $('.shade').offset({
          top: y-shadeHeight/2,
          left: x-shadeWidth/2
        });    

        //获取遮罩层相对父元素的位置
        var cur = $('.shade').position(),
          _top = cur.top,
          _left = cur.left,
          hdiffer = middleHeight - shadeHeight,
          wdiffer = middleWidth - shadeWidth; 

        if (_top < 0) _top = 0;
        else if (_top > hdiffer) _top = hdiffer;
        if (_left < 0) _left = 0;
        else if (_left > wdiffer) _left =wdiffer; 

        //判断完成后设置遮罩层的范围
        $('.shade').css({
          top: _top,
          left: _left
        }); 

        //设置放大区图片移动
        $('.shade img').css({
          top: - _top*rateY*3/2,
          left: - _left*rateX*3/2
        }); 

      });; 

      //封装的改变图片显示的函数
      function changePic (element,index) {
        $(element).click(function() {
          $('#container img').eq(index).css('display', 'block').siblings().css('display', 'none');
          $('.shade img').eq(index).css('display', 'block').siblings().css('display', 'none');
        });
      } 

    });
<span style="white-space:pre">  </span></script>

基于jquery的放大镜效果

核心代码: 复制代码代码如下: $(function(){ var mouseX = 0; //鼠标移动的位置X var mouseY = 0; //鼠标移动的位置Y var maxLeft = 0; //最右边 var maxTop = 0; //最下边 var markLeft = 0; //放大镜移动的左部距离 var markTop = 0; //放大镜移动的顶部距离 var perX = 0; //移动的X百分比 var perY = 0; //移动的Y百分比 var bigLeft
基于jquery编写的放大镜插件

本文实例为大家分享了自己动手实现的jquery放大镜插件,供大家参考,具体内容如下 /** *********************************************** **此插件使用须知--------------- ** **滤镜(inner)与其活动区(active)之比要等于 ** **放大区(movequ)与其内部图片之比.如比值不相 ** **等,请改变图片大小.------------------------** **参数介绍 ** **active:滤镜活动区
jquery放大镜效果超漂亮噢

这个放大镜的代码挺简单滴效果也不错. 复制代码代码如下: <script> //QQ:496928838 微凉 $(function(){ $("#demo").enlarge( { // 鼠标遮罩层样式 shadecolor: "#FFD24D", shadeborder: "#FF8000", shadeopacity: 0.4, cursor: "move", // 大图外层样式 layerwidth: 4
基于jQuery实现放大镜特效

相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的文章中,我们将向大家介绍通过jQuery实现放大镜效果. 1.实现原理首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置. 方法二:对原图片进行放大,也就是调整原图的长和宽. 上面我们介绍了通过两种方式实现放大镜效果,接下来,我们将以上的两种方式应用到我们的jQuery
jQuery实现的放大镜效果示例

本文实例讲述了jQuery实现的放大镜效果.分享给大家供大家参考,具体如下: zoom.css: *{ padding: 0; margin: 0; } li{ list-style-type: none; } .zoom{ margin: 50px; position: relative; } .zoomMiddle{ border: 1px solid #ccc; width: 300px; height: 300px; margin-bottom: 3px; position: relat
jQuery实现图片局部放大镜效果

下图只是给大家举个例子,类似于这种效果图: 具体实现过程请看下文代码: css .zoomPad{ position:relative; float:left; z-index:99; cursor:crosshair; } .zoomPreload{ -moz-opacity:0.8; opacity: 0.8; filter: alpha(opacity = 80); color: #333; font-size: 12px; font-family: Tahoma; text-decora
jquery实现放大镜简洁代码(推荐)

简介网上有许多放大镜的jquery的插件,但是用着不是那么得心应手,现在一页代码实现一个放大镜功能,如果需要附加的功能可以手动修改,原理都在注释里 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>放大镜效果</title> <style type="text/css"> * { margin: 0; paddi
基于jQuery仿淘宝产品图片放大镜代码分享

这篇文章主要介绍了jQuery淘宝产品图片放大镜特效,鼠标点击图片,图片放大,特别适合图片细节展示,感兴趣的小伙伴可以参考下. (1)html代码: <div class="box"> <div class="tb-booth tb-pic tb-s310"> <a href="images/01.jpg"> <img src="images/01_mid.jpg" alt="
基于jQuery仿淘宝产品图片放大镜特效

在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果常用的js组件jquery.imagezoom,jquery.jqzoom,jquery.zoom等这些组件大同小异. 大家感兴趣的话可以去百度一下. 本文主要是使用非组件方法来做放大镜效果. 每一张图片都要生成三种尺寸,否则放大镜的效果不会太明显,这里是 54X54 320X320 800X800. 首先看效果:鼠标经过小图时,大图随之切换. 首先是html <div c
jquery图片放大镜效果

昨天看一篇博文的时候,说到了这个效果,于是自己想试着写一个,没有使用插件, 基本的想法就是,左边是小图,右边对应大图,鼠标进去小图范围之后,获取他的坐标(x,y)然后计算 x/小图的宽度*大图得宽度/2 y/小图的高度*大图得高度/2 计算出来的两个结果即为大图得左右偏移距离 /2是为了让右边区域不会出现空白. 经过测试,ie7以上以及主流浏览器都可以用,代码如下: <div class="wrap"> <div class="small">
jquery图片放大镜功能的实例代码

复制代码代码如下: /*放大镜*/ .ZoomMain {margin:100px;width:395px;height:460px;float:left;position:relative;} .ZoomMain .zoom {height:393px;width:393px;position:relative;border: 1px solid #dcdddd;} .ZoomMain .zoom .move{position:absolute;left:0; top:0;display:n
jquery实现图片放大镜功能

实现原理: 这里用到了两张图片,一张小图,一张大图.将大图设置为放大镜的背景图片,当鼠标在小图上移动时,同时控制背景大图在放大镜中的位置.两张图片大小最好是等比例的,这样才能达到最佳效果.当没有大图时,则默认为小图本身,这时由于两张图片大小一样,因此放大镜效果不明显,就跟没放大是一样的. 此插件用到了html5,css3的一些属性,ie8及以下版本不兼容,放大镜是方形的. 运行效果截图如下: 具体代码如下: (function () { $.fn.Magnifier = function (op
jQuery实现放大镜效果实例代码

在没给大家做详细文字说明之前,先给大家分享一段简单的jquery实现放大镜效果代码,需要的朋友可以直接拿去代码. $(function(){ var mouseX = 0; //鼠标移动的位置X var mouseY = 0; //鼠标移动的位置Y var maxLeft = 0; //最右边 var maxTop = 0; //最下边 var markLeft = 0; //放大镜移动的左部距离 var markTop = 0; //放大镜移动的顶部距离 var perX = 0; //移动的
基于jquery实现放大镜效果

各大商城详细页面产品图片特效展示,鼠标滑过小图显示中图,鼠标滑过中图显示大图展示,jquery放大镜效果图片类似图片放大镜展示,提高用户体验设计,jquery 图片放大镜效果是典型的一款图片特效展示. 效果图如下: 图片大框初始样式: <div class="goods-imginfo-bimg-box" style="background-image: url(http://www.od.my/images/201507/thumb_img/142_thumb_P_1
使用jquery实现放大镜效果

实现原理首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置. 方法二:对原图片进行放大,也就是调整原图的长和宽. 上面我们介绍了通过两种方式实现放大镜效果,接下来,我们将以上的两种方式应用到我们的jQuery插件中. 首先,我们需要一个img元素显示原图对象,还需要一个容器作为显示框:显示框里面存放大图对象.当鼠标移动到原图上时,通过对大图进行绝对定位来显示对应的部位,实现类似放大镜的效果. 接下来,让我们定义Index.html页

实现jquery放大镜的两种方法

相关推荐

随机推荐