jquery实现的放大镜效果示例


Posted in jQuery onFebruary 24, 2020

本文实例讲述了jquery实现的放大镜效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>商品详情</title>
  <link rel="stylesheet" href="../css/shoplistxq.css" rel="external nofollow" >
</head>
<body>
  <div class="main box">
    <div class="img">
      <img src="../img/shoplist/TB1lO6XJpXXXXc_XFXXLhc5_XXX_054423.jpg" alt="">
      <div class="bri"></div>
      <div class="big"></div>
    </div>
    <div class="content">
      <h3>2件卫衣男士长袖t恤加厚打底衫加绒秋衣保,<br>
        暖上衣男装冬季衣服潮
      买一送一!2件仅需89!加绒不加价!</h3>
      <div>价格¥ 168.00</div>
      <div>尺码</div>
      <div>颜色</div>
      <div>数量</div>
      <div>加入购物车</div>
    </div>
  </div>
</body>
</html>
<script src="../js/jquery-1.11.3.js"></script>
<script src="../js/shoplistxq.js"></script>

shoplistxq.css:

*{
 margin:0;
 padding:0;
 font-family: "微软雅黑";
}
ul li{
 list-style: none;
}
a{
 text-decoration: none;
 color: #666;
}
/*主体宽度*/
.main {
 margin:0 auto;
 width: 1210px;
}
.box{
  margin-top: 50px;
}
.box::after{
  content: ".";
  height:0;
  overflow: hidden;
  visibility: hidden;
  clear: both;
}
.img{
  width: 400px;
  height: 400px;
  border: 1px solid #666666;
  position: relative;
  float: left;
}
.img img{
  width: 100%;
  height: 100%;
}
.bri{
  position: absolute;
  width: 100px;
  height: 100px;
  left:0;
  top:0;
  background: rgb(233, 118, 118);
  opacity: .5;
  cursor: crosshair;
}
.big{
  width:100%;
  height: 100%;
  position: absolute;
  background: url("../img/shoplist/TB1lO6XJpXXXXc_XFXXLhc5_XXX_054423.jpg");
  left:401px;
  top:0;
  background-size: 100%;
  display:none;
}
.content{
  float: right;
}

shoplistxq.js:

$(function() {
  $(".img").mousemove(function (e) {
    $(".bri").css({
      "left": e.pageX - $(this).offset().left - $(".bri").width() / 2,
      "top": e.pageY - $(this).offset().top - $(".bri").height() / 2
    })
    if (parseFloat($(".bri").css("left")) < 0){
      $(".bri").css("left","0");
      // console.log("kk");
    } else if (parseFloat($(".bri").css("left")) >= parseFloat($(this).width() - $(".bri").width())){
      // alert("kk");
      $(".bri").css("left",$(this).width() - $(".bri").width());
    }
    if (parseFloat($(".bri").css("top")) < 0) {
      $(".bri").css("top", "0");
    } else if (parseFloat($(".bri").css("top")) >= parseFloat($(this).height() - $(".bri").height())) {
      // alert("kk");
      $(".bri").css("top", $(this).height() - $(".bri").height());
    }
    console.log($(".img").css("background"))
    // 放大倍数
    let num = 4;
    let left = -num * parseFloat($(".bri").css("left"));
    let top = -num * parseFloat($(".bri").css("top"));
    // console.log($(".bri").css("left"))
    $(".big").css({
      "background-size": num*100+"%",
      "background-position":left+"px " +top+"px",
      "display":"block"
      // "background": $(".img").css("background")
    });
  })
})
$(".img").mouseout(function (e) {
  $(".big").css({
    "display": "none"
    // "background": $(".img").css("background")
  });
})

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
jquery向后台提交数组的代码分析
Feb 20 #jQuery
jquery实现垂直手风琴导航栏
Feb 18 #jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 #jQuery
jquery传参及获取方式(两种方式)
Feb 13 #jQuery
jQuery实现简易QQ聊天框
Feb 10 #jQuery
jQuery实现简单聊天室
Feb 08 #jQuery
jquery实现点击弹出对话框
Feb 08 #jQuery
You might like
咖啡的化学
2021/03/03 咖啡文化
新版PHP极大的增强功能和性能
2006/10/09 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
php实现中文转数字
2016/02/18 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
JavaScript声明变量名的语法规则
2015/07/10 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Flask数据库迁移简单介绍
2017/10/24 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
如何理解Python中的变量
2020/06/01 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
销售经理岗位职责
2014/03/16 职场文书
如何写自我鉴定
2014/03/19 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
简爱电影观后感
2015/06/10 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
导游词之上海豫园
2019/10/24 职场文书