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插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
JQuery省市联动效果实现过程详解
May 08 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
php 设计模式之 工厂模式
2008/12/19 PHP
php include和require的区别深入解析
2013/06/17 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
PHP学习笔记之session
2018/05/06 PHP
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
js 窗口抖动示例
2013/09/04 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
python网络编程之读取网站根目录实例
2014/09/30 Python
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
Python生成器generator原理及用法解析
2020/07/20 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
医学生自荐信范文
2013/12/03 职场文书
浪费资源的建议书
2014/03/12 职场文书
机关节能减排实施方案
2014/03/17 职场文书
小学生评语大全
2014/04/18 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
考试没考好检讨书
2015/05/06 职场文书
股东协议书范本2016
2016/03/21 职场文书
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android