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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
js实现日历与定时器
2017/02/22 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
深入理解Python分布式爬虫原理
2017/11/23 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
python中while和for的区别总结
2019/06/28 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
应届生骨科医生求职信
2013/10/31 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
2014年销售部工作总结
2014/12/01 职场文书
入党现实表现材料
2014/12/23 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
承诺书范本大全
2015/05/04 职场文书
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python