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