zoukankan      html  css  js  c++  java
  • jQuery使用jQuery实现放大镜的效果

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div{ 171px;height: 256px;padding: 5px;border: 1px solid #ccc;position: relative;}
        #div .small{ 171px;height: 256px;background:         #eee;position: relative;}
        #div .float{ 50px;height: 50px;border: 1px solid #000;background: #fff;filter: alpha(opacity: 30);opacity: 0.3;position: absolute;top: 0;left: 0;display: none;}
        #div .mark{ 100%;height: 100%;position: absolute;z-index: 2;left: 0px;top: 0px;background: red;filter: alpha(opacity: 0);opacity: 0;}
        #div .big{position: absolute;top: -1px;left: 215px; 171px;height: 256px;overflow: hidden;border: 2px solid #CCC;display: none;}
        #div .big img {position: absolute;top: -30px;left: -80px;}
    </style>
    </head>
    <body>
    <!--用jquery面向对象写一个放大镜 -->
    <!--注意:布局并设置好样式:大盒子div和小图盒子small为相对定位,遮罩mark滑块float大图盒子big大图图片均绝对定位,大图盒子big隐藏-->
    <div id="div">
      <div class="small">
        <span class="mark"></span>
        <span class="float"></span>
        <img src="small.jpg" />
      </div>
      <div class="big">
        <img src="big.jpg" />
      </div>
    </div>
    </body>
    </html>

    js部分:

    <script src="jquery-1.11.3.js"></script>
    <script>
    //jquery-1.11.3.js文件下载到本地并先导入该文件
    //遮罩移入事件:滑块和大图盒子显示;遮罩移出事件:滑块和大图盒子隐藏;遮罩移动事件
    
    $(function(){
      $('.mark').mouseenter(function(){
        $('.float').css({display: 'block'});
        $('.big').css({display: 'block'});
      }).mouseleave(function(){
        $('.float').css({display: 'none'});
        $('.big').css({display: 'none'});
      }).mousemove(function(e){
        //获取并设置滑块的位置
        var left = e.offsetX - $('.float').width() / 2;
        var top = e.offsetY - $('.float').height() / 2;
    
        //设置滑块边界
        if(left <= 0){
          left = 0;
        }else if(left >= $(this).outerWidth() - $('.float').outerWidth()){
          left = $(this).outerWidth() - $('.float').outerWidth();
        }
        if(top <= 0){
          top = 0;
        }else if(top >= $(this).outerHeight() - $('.float').outerHeight()){
          top = $(this).outerHeight() - $('.float').outerHeight();
        }
        $('.float').css({left:left + 'px',top:top + 'px'});
        //设置滑块在遮罩上的移动比例(当前所在位置 /(遮罩的宽 -滑块的宽))
        var pX = left / ($(this).outerHeight() - $('.float').outerHeight());
        var pY = top / ($(this).outerHeight() - $('.float').outerHeight());
        //依据比例来设置大图图片显示的位置
        var bigLeft = - pX * ($('.big img').outerWidth() - $('.big').outerWidth()) + 'px';
        var bigTop = - pY * ($('.big img').outerHeight() - $('.big').outerHeight()) + 'px';
        $('.big img').css({left:bigLeft,top:bigTop});
      })
    })
    </script>
  • 相关阅读:
    2021.07.11 【ABAP随笔】采购订单Message输出打印
    项目管理43210学习笔记
    Rails跳过回调方法
    树莓派接USB温湿度传感器(python)
    Visual Studio2019安装时报错Microsoft.Net.4.7.2.FullRedist的解决方法
    微信浏览器中H5使用wx-open-launch-app打开第三方APP
    Linux系统使用qq邮箱在线发送邮件
    LRU工程实现源码(一):Redis 内存淘汰策略
    Android Studio解决Build Log出现乱码问题
    git新拉取项目
  • 原文地址:https://www.cnblogs.com/snowstorm22/p/10232550.html
Copyright © 2011-2022 走看看