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实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jquery实现图片放大镜效果
Dec 23 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
PHP4中实现动态代理
2006/10/09 PHP
php 伪静态之IIS篇
2014/06/02 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
golang与PHP输出excel示例
2016/07/22 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
javascript prototype原型操作笔记
2009/12/07 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
解析Python中的二进制位运算符
2015/05/13 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
环保建议书400字
2014/05/14 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技