一、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;
}