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代码）

jquery轮播图插件unslider

（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"><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;}