jquery实现的放大镜效果示例
更新时间：2020年02月24日 11:49:10 作者：巴啦啦小能量
这篇文章主要介绍了jquery实现的放大镜效果,结合实例形式分析了jQuery放大镜插件shoplistxq.js的定义与使用相关操作技巧,需要的朋友可以参考下
本文实例讲述了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表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
slides是一款强大的，专业的幻灯片组件，能够全方位对幻灯片的速度控制，本文通过代码实例给大家讲解jquery.slides.js，感兴趣的朋友一起学习2015-11-11
在进行Web开发时，并非所有的库都适合你的项目，但你仍需要收藏一些Web UI设计相关的库或框架，以在你需要的时候，加快你的开发效率。本文为你推荐10款非常优秀的基于JQuery的Web UI设计框架2014-08-08
当使用ajax获取data数据的时候，直接data.foo就可以得到。而较低版本的jquery就不行比如1.4之前，下面为大家介绍下jquery.post用法关于type设置问题2014-01-01
这篇文章主要介绍了jquery实现点击向下展开菜单项(伸缩导航)效果,通过jquery遍历及匹配页面元素并动态修改页面元素样式实现该功能,需要的朋友可以参考下2015-08-08
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
这篇文章主要介绍了jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,需要的朋友可以参考下2017-05-05
jQuery的选择器非常强大,使你可以轻松选取页面中任何一个对象,下面我们就主要针对DOM操作来看一下jQuery中选择器的基础使用教程,需要的朋友可以参考下2016-05-05
本文给大家分享两种方法实现''推拉门''动画效果也可以称作是手风琴效果，具体实现方法大家通过本文一起学习吧2017-08-08
在jquery中我们要动态的修改css属性我们只要使用css()方法就可以实现了，下面我来给大家详细介绍介绍。2015-05-05
jQuery标签替换函数replaceWith()的使用例子
这篇文章主要介绍了jQuery标签替换函数replaceWith()的使用例子,使用replaceWith可以替换模板里的标签,还可以实现多语言网站,需要的朋友可以参考下2014-08-08
一般情况下，在jQuery选择器中，我们很少会用到诸如“.”、“#”、“(”、“[”等特殊字符，但是在实际应用中，偶尔也会遇到表达式中含有“#”和“.”等特殊字符,那么是如何处理这些个特殊字符的呢？下面小编给大家介绍下2017-09-09
最新评论