Html .CSS JQUERY （magnifier）实现详情页面特效
常飞翼
一、jquery使用技巧
1、jquery操作css
2、jquery hover()方法
3、轮播图插件unslider
4、jqeury click()方法（扩展：方法的重载overload）
5、图片放大插件jQueryMagnifier
6、jquery设置内容和属性
7、jquery添加、删除元素
二、任务
1、首页（轮播图、鼠标悬停效果）
（1）读一遍轮播图的demo代码（页面标签元素、标签样式效果、jquery代码）
（2）准备并配置好插件的相关文件（js文件、图片）
（3）粘贴demo代码
（4）修改属性（高宽、颜色、形状等CSS样式）和参数（id名称、class名称、图片路径）
2、商品详细页面（商品重量样式切换、图片放大镜）
（1）准备并配置好插件相关文件（css、js、图片）
（2）编写html和js代码
注意：修改css里的图片路径和html里的图片路径
（3）图代码，并修改相关属性参数（高宽、颜色、形状等CSS样式）
扩展作业：
（1）重载的定义：
概念： 在同一的类中，允许在一个以上的同名方法，只要他们的参数的个数或者参数类型不同即可 特点：与返回值类型无关，只看参数列表，切参数列表必须不同。（参数个数或参数类型）。调用时，根据方法参数列表的不同来区分；
（2）用重载实现：在js中用方法重载实现，设置边框宽度（1个参数上下左右全一样，2个参数先上下后左右，4个参数上右下左）
三、实现过程代码
.html jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>商品详情(总)</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/detail1.css">
<script src="js/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/magnifier.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/magnifier.js"></script>
<style>
.cl{
color: #FF5722;
background: #FFFFFF;
border: 3px solid red;
}
</style>
</head>
<body>
<div id="all">
<iframe class="iheader" src="header.html"></iframe>
<div style="clear: both;"></div>
<div id="content">
<div class="a1">
<!-- <img class="big" src="img/cake1_big.jpg">
<div class="a11">
<ul>
<li><img src="img/cake1_s1.jpg"></li>
<li><img src="img/cake1_s2.jpg"></li>
<li><img src="img/cake1_s3.jpg"></li>
<li><img src="img/cake1_s4.jpg"></li>
</ul>
</div> -->
<!-- <div class="left"> -->
<div class="magnifier" id="magnifier1">
<div class="magnifier-container">
<div class="images-cover"></div>
<!-- 当前图片显示容器 -->
<div class="move-view"></div>
<!-- 跟随鼠标移动的盒子 -->
</div>
<div class="magnifier-assembly">
<div class="magnifier-btn">
<span class="magnifier-btn-left"><</span>
<span class="magnifier-btn-right">></span>
</div>
<!-- 按钮组 -->
<div class="magnifier-line">
<ul class="clearfix animation03">
<li>
<div class="small-img">
<img src="img/cake1_s1.jpg"/>
</div>
</li>
<li>
<div class="small-img">
<img src="img/cake1_s2.jpg"/>
</div>
</li>
<li>
<div class="small-img">
<img src="img/cake1_s3.jpg"/>
</div>
</li>
<li>
<div class="small-img">
<img src="img/cake1_s4.jpg"/>
</div>
</li>
</ul>
</div>
<!-- 缩略图 -->
</div>
<div class="magnifier-view">
<!-- 经过放大的图片显示容器 -->
</div>
</div>
</div>
<div class="a2">
<h2>提拉米苏(约2磅)</h2>
<div class="a21">
<div class="a211">
<span class="color">售价</span>
<span class="prices">￥198</span>
<span class="shic">市场价<span class="prices2">￥338</span></span>
<span class="yis">已售6264件</span>
</div>
<div class="a22">
<p></p>
<span class="color">材料</span>
<span class="neir">鸡蛋、奶油、小麦粉、芒果、榴莲肉、巧克力、干酪</span>
<p></p>
<span class="color">包装</span>
<span class="neir">一次性蛋糕用具一套</span>
<p></p>
<span class="color">备注</span>
<span class="neir">品牌:悦轩饼家</span>
</div>
<div class="a23">
<p></p>
<span class="color">配送说明</span>
<p>北京、上海、广州、深圳、天津、重庆、南京、长沙</p>
<span class="color">配送至</span>
<p>郑州</p>
<span class="color">说明</span>
<p>深圳大鹏新区暂不配送</p>
</div>
<div class="a24">
<span class="color">选择</span>
<p></p>
<span class="bang">2磅</span>
<span class="bang">3磅</span>
<span class="bang">4磅</span>
</div>
<div class="a25">
<a href="#"><button class="a25color1">加入购物车</button></a>
<a href="#"><button class="a25color2">加入购物车</button></a>
</div>
</div>
</div>
</div>
<div style="clear: both;"></div>
<iframe class="ifooter" src="footer.html"></iframe>
</div>
</body>
<script type="text/javascript">
$(function(){
var magnifierConfig = {
magnifier: "#magnifier1", //最外层的大容器
width: 400, //承载容器宽
height: 400, //承载容器高
moveWidth: null, //如果设置了移动盒子的宽度，则不计算缩放比例
zoom: 5 //缩放比例
};
var _magnifier = magnifier(magnifierConfig);
/*magnifier的内置函数调用*/
/*
//设置magnifier函数的index属性
_magnifier.setIndex(1);//重新载入主图,根据magnifier函数的index属性
_magnifier.eqImg();
*/
});
</script>
<link rel="stylesheet" href="css/detail1.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
// 图片外框停悬
$(".bang").click(function(e){
if(!$(this).hasClass("cl")){
//$(this).addClass("active"); //多选
$(this).addClass("cl").siblings("span").removeClass("cl"); //单选
}else{
$(this).removeClass("cl");
}
console.log('event', e.currentTarget.id);
let targId= e.currentTarget.id;
searchObj.tagCategoryIds = targId;
});
</script>
</html>
magnifier
/* 垂直居中 */
.small-img{
display: flex;
align-items:center;
justify-content: center;
}
.clearfix:before,
.clearfix:after{
display: table;
line-height: 0;
content: "";
}
.magnifier{
position: relative;
}
.magnifier-container{
width: 500px;
height: 500px;
overflow: hidden;
position: relative;
border: 1px solid #ddd;
}
.move-view{
width: 100px;
height: 100px;
position: absolute;
background-image: url("../img/move-box.png");
}
.images-cover{
height: 100%;
width: 100%;
position: relative;
}
.images-cover img{
width: 100%;
position: absolute;
}
.magnifier-assembly{
height: 92px;
overflow: hidden;
position: relative;
padding-left: 30px;
padding-right: 30px;
}
.magnifier-btn{
position: absolute;
font-family: "宋体";
width: 100%;
top: 50%;
left: 0;
margin-top: -40px;
}
.magnifier-btn span{
line-height: 60px;
height: 60px;
width: 20px;
background-color: #6e6e6e;
color: #fff;
display: block;
z-index: 9998;
text-align: center;
font-size: 20px;
cursor: pointer;
border-radius: 3px;
}
.magnifier-btn .magnifier-btn-left{
float: left;
}
.magnifier-btn .magnifier-btn-right{
float: right;
}
.magnifier-line{
position: relative;
overflow: hidden;
height: 92px;
}
.magnifier-line ul{
display: block;
font-size: 0;
width: 10000%;
position: absolute;
left: 0;
z-index: 9997;
}
.magnifier-line li{
float: left;
width: 100px;
cursor: pointer;
}
.magnifier-line ul > .active .small-img{
border-color: #bbb;
}
.small-img{
height: 60px;
padding: 1px;
margin: 5px;
overflow: hidden;
border: 1px solid #ddd;
text-align: center;
}
.small-img img{
max-width: 100%;
max-height: 100%;
}
.magnifier-view{
width: 100%;
height: 100%;
position: absolute;
right: -105%;
top: 0;
z-index: 9999;
background-color: #fff;
display: none;
overflow: hidden;
}
.magnifier-view img{
display: block;
}
.animation03{
transition: all 0.3s ease-in 0.1s;
-ms-transition: all 0.3s ease-in 0.1s;
-moz-transition: all 0.3s ease-in 0.1s;
-webkit-transition: all 0.3s ease-in 0.1s;
-o-transition: all 0.3s ease-in 0.1s;
}
类似资料：