哈尔滨网站制作前景,湖南省建设厅电话号码是多少,建网站金坛哪家强?,中囯军事网这是我学习JS的第11天了#xff0c;#xff0c;#xff0c;我现在赶着周末学JS#xff0c;然后还有二十多天就期末了呵呵呵。。。
图片切换模块
思路分析#xff1a; 这是实现的代码#xff0c;建议还是把不同的变量定义出来比较合适#xff1a; //获取三个盒子// 小盒…这是我学习JS的第11天了我现在赶着周末学JS然后还有二十多天就期末了呵呵呵。。。
图片切换模块
思路分析 这是实现的代码建议还是把不同的变量定义出来比较合适 //获取三个盒子// 小盒子const small document.querySelector(.small)// 中盒子const middle document.querySelector(.middle)// 大盒子const large document.querySelector(.large)let activeElement nullsmall.addEventListener(mouseover, function (e) {if (e.target.tagName IMG) {// 排他const parent e.target.parentNodeif(activeElement){activeElement.classList.remove(active)}// 当前元素的父亲添加parent.classList.add(active)activeElement parent//让中等盒子里面的图片.src更换为小图片srcmiddle.querySelector(img).src e.target.srclarge.style.backgroundImage url(${e.target.src})}})
这是原视频的代码虽然后面好像又能切换图片了但是为什么呢 // 1. 获取三个盒子// 2. 小盒子 图片切换效果const small document.querySelector(.small)// 中盒子const middle document.querySelector(.middle)// 大盒子const large document.querySelector(.large)// 2. 事件委托small.addEventListener(mouseover, function (e) {if (e.target.tagName IMG) {// console.log(111)// 排他 干掉以前的 active li 上面this.querySelector(.active).classList.remove(active)// 当前元素的爸爸添加 activee.target.parentNode.classList.add(active)// 拿到当前小图片的 src// console.log(e.target.src)// 让中等盒子里面的图片src 更换为 小图片srcmiddle.querySelector(img).src e.target.src// 大盒子更换背景图片large.style.backgroundImage url(${e.target.src})}}) 奥我知道了是有没有添加active类的情况如果没有active类的话就完蛋了就null了
呵呵。
放大镜效果
接下来我们实现放大镜的效果 第一条已经做完了现在来做第二个部分 看看这个 // 鼠标经过中等盒子显示隐藏大盒子middle.addEventListener(mouseenter, show)middle.addEventListener(mouseleave, hide)let timeId 0// 显示函数function show() {clearTimeout(timeId)large.style.display block}// 隐藏函数function hide() {timeId setTimeout(function () {large.style.display none}, 200)}// 鼠标经过大盒子显示隐藏大盒子large.addEventListener(mouseenter, show)large.addEventListener(mouseleave, hide)
然后我们来做黑色遮罩层跟着鼠标来回移动的效果可以先添加显示和隐藏移动再说吧 middle.addEventListener(mousemove, function (e) {let x e.pageX - middle.getBoundingClientRect().leftlet y e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop if (x 0 x 400 y 0 y 400) {//黑色盒子不是一直移动的// layer.style.left x px// layer.style.top y px//声明两个变量黑色盒子移动的mx变量let mx 0, my 0if (x 100) {mx 0}if (x 100 x 300) {mx x - 100}if (x 300) {mx 200}layer.style.left mx pxif (y 100) {my 0}if (y 100 y 300) {my y -100}if (y 300) {my 200}layer.style.top my px} 大图和小图一起移动
//大图和小图一起移动,两倍关系large.style.backgroundPositionX -2 *mx px large.style.backgroundPositionY -2 *my px
JS部分代码 // 1. 获取三个盒子// 2. 小盒子 图片切换效果const small document.querySelector(.small)// 中盒子const middle document.querySelector(.middle)// 大盒子const large document.querySelector(.large)// 2. 事件委托small.addEventListener(mouseover, function (e) {if (e.target.tagName IMG) {// console.log(111)// 排他 干掉以前的 active li 上面this.querySelector(.active).classList.remove(active)// 当前元素的爸爸添加 activee.target.parentNode.classList.add(active)// 拿到当前小图片的 src// console.log(e.target.src)// 让中等盒子里面的图片src 更换为 小图片srcmiddle.querySelector(img).src e.target.src// 大盒子更换背景图片large.style.backgroundImage url(${e.target.src})}})// 3. 鼠标经过中等盒子 显示隐藏 大盒子middle.addEventListener(mouseenter, show)middle.addEventListener(mouseleave, hide)let timeId null// 显示函数 显示大盒子function show() {// 先清除定时器clearTimeout(timeId)large.style.display block}// 隐藏函数 隐藏大盒子function hide() {timeId setTimeout(function () {large.style.display none}, 200)}// 4. 鼠标经过大盒子 显示隐藏 大盒子large.addEventListener(mouseenter, show)large.addEventListener(mouseleave, hide)// 5. 鼠标经过中等盒子显示隐藏 黑色遮罩层const layer document.querySelector(.layer)middle.addEventListener(mouseenter, function () {layer.style.display block})middle.addEventListener(mouseleave, function () {layer.style.display none})// 6.移动黑色遮罩盒子middle.addEventListener(mousemove, function (e) {// let x 10, y 20// console.log(11)// 鼠标在middle 盒子里面的坐标 鼠标在页面中的坐标 - middle 中等盒子的坐标// console.log(e.pageX)鼠标在页面中的坐标// middle 中等盒子的坐标// console.log(middle.getBoundingClientRect().left)let x e.pageX - middle.getBoundingClientRect().leftlet y e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop// console.log(x, y)// 黑色遮罩移动 在 middle 盒子内 限定移动的距离if (x 0 x 400 y 0 y 400) {// 黑色盒子不是一直移动的// 声明2个变量 黑色盒子移动的 mx my变量 let mx 0, my 0if (x 100) mx 0if (x 100 x 300) mx x - 100if (x 300) mx 200if (y 100) my 0if (y 100 y 300) my y - 100if (y 300) my 200layer.style.left mx pxlayer.style.top my px// 大盒子的背景图片要跟随 中等盒子移动 存在的关系是 2倍 large.style.backgroundPositionX -2 * mx pxlarge.style.backgroundPositionY -2 * my px}})
全部代码
!DOCTYPE html
html langenheadmeta charsetUTF-8title小兔鲜儿 - 新鲜 惠民 快捷!/titlemeta http-equivX-UA-Compatible contentIEedgemeta namerenderer contentwebkit!-- link relstylesheet href//at.alicdn.com/t/font_1939705_bgtmkonu28.css --link relstylesheet href./css/common.csslink relstylesheet href./css/product.css
/headbody!-- 项部导航 --div classxtx_topnavdiv classwrapper!-- 顶部导航 --ul classxtx_navslia hrefjavascript:;请先登录/a/lilia hrefjavascript:;免费注册/a/lilia href.javascript:;我的订单/a/lilia hrefjavascript:;会员中心/a/lilia hrefjavascript:;帮助中心/a/lilia hrefjavascript:;在线客服/a/lilia hrefjavascript:;i classmobile sprites/i手机版/a/li/ul/div/div!-- 头部 --div classxtx_headerdiv classwrapper!-- 网站Logo --h1 classxtx_logoa href/小兔鲜儿/a/h1!-- 主导航 --div classxtx_navsul classclearfixlia hrefjavascript:;首页/a/lilia hrefjavascript:;生鲜/a/lilia hrefjavascript:;美食/a/lilia hrefjavascript:;餐厨/a/lilia hrefjavascript:;电器/a/lilia hrefjavascript:;居家/a/lilia hrefjavascript:;洗护/a/lilia hrefjavascript:;孕婴/a/lilia hrefjavascript:;服装/a/li/ul/div!-- 站内搜索 --div classxtx_search clearfix!-- 购物车 --a hrefjavascript:; classxtx_search_cart spritesi2/i/a!-- 搜索框 --div classxtx_search_wrapperinput typetext placeholder搜一搜 onclicklocation.href./search.html/div/div/div/divdiv classxtx-wrapperdiv classcontainer!-- 面包屑 --div classxtx-breada hrefjavascript:; 首页 /aa hrefjavascript:; 电子产品 /aa hrefjavascript:; 电视 /aspan小米电视4A 32英寸/span/div!-- 商品信息 --div classxtx-product-infodiv classleftdiv classpictruediv classmiddleimg src./images/1.jpg altdiv classlayer/div/divdiv classsmallulli classactiveimg src./images/1.jpg alt/liliimg src./images/2.jpg alt/liliimg src./images/3.jpg alt/liliimg src./images/4.jpg alt/liliimg src./images/5.jpg alt/li/ul/divdiv classlarge/div/divdiv classotherullip销量人气/pp1999/pp销量人气/p/lilip商品评价/pp999/pp查看评价/p/lilip收藏人气/pp299/ppa hrefjavascript:;收藏商品/a/p/lilip品牌信息/pp小米/ppa hrefjavascript:;品牌主页/a/p/li/ul/div/divdiv classrighth3 classname小米电视4A 32英寸/h3p classdesc全面屏设计 / 高清分辨率 / 海量内容 / 1G4G大内存 / 多核处理器/pp classpricespan classnow¥1899/spanspan classold¥2999/span/pdiv classaddressdiv classitemdiv classdt促销/divdiv classdd12月好物放送App领券购买直降120元/div/divdiv classitemdiv classdt配送/divdiv classdd至div classboxspan陕西 西安 i/i/span/div/div/divdiv classitemdiv classdt服务/divdiv classddspan classfw无忧退货/spanspan classfw快速退款/spanspan classfw免费包邮/spana href# classlj了解详情/a/div/div/divdiv classattrsdiv classitemdiv classdt颜色/divdiv classddimg src./uploads/img/cate-06.png altimg src./uploads/img/cate-07.png alt/div/divdiv classitemdiv classdt颜色/divdiv classddspan classsize22英寸/spanspan classsize42英寸/spanspan classsize52英寸/spanspan classsize62英寸/span/div/divdiv classitemdiv classdt数量/divdiv classdddiv classnuma hrefjavascript:;-/ainput typetext value1a hrefjavascript:;/a/div/div/divdiv classitema classbuy hrefjavascript:;立即购买/a/div/div/div/div!-- 同类产品推荐 --div classxtx-relevant-producth3同类产品推荐/h3ullia href#img src./uploads/history_goods_1.jpg altp classnameUSB Type C数据线/pp classdesc快速充电稳定传输/pp classprice¥39/p/a/lilia href#img src./uploads/history_goods_2.jpg altp classname红米Note 5A 高配版/pp classdesc1600万像素柔光自拍/pp classprice¥1899/p/a/lilia href#img src./uploads/history_goods_3.jpg altp classnameVGA网口多功能转接器/pp classdesc小巧便携节省桌面空间/pp classprice¥19/p/a/lilia href#img src./uploads/history_goods_4.jpg altp classname笔记本Pro 15.6/pp classdesc全金属强化机身搭配独显/pp classprice¥4899/p/a/li/ula hrefjavascript:; classprevspan classiconfont icon-angle-left/span/aa hrefjavascript:; classnextspan classiconfont icon-angle-right/span/a/div!-- 商品详情 --div classxtx-product-detaildiv classmaindiv classcontdiv classtab-heada hrefjavascript:;商品详情/aa hrefjavascript:;商品评价span998/span/a/divdiv classtab-pane!-- 静态属性 --div classattrsdiv classitemspan商品名称/spanspan小米L32M5-AZ /span/divdiv classitemspan商品编号/spanspan4620979 /span/divdiv classitemspan商品毛重/spanspan8.0kg /span/divdiv classitemspan商品产地/spanspan中国大陆 /span/divdiv classitemspan屏幕尺寸/spanspan32英寸及以下 /span/divdiv classitemspan能效等级/spanspan三级能效 /span/divdiv classitemspan电视类型/spanspan人工智能 /span/divdiv classitemspan选购指数/spanspan6.9-6.0 /span/divdiv classitemspan观看距离/spanspan2m以下≤32英寸/span/div/div!-- 详情内容 --div classdetailimg srchttps://yanxuan-item.nosdn.127.net/39d7f2407c90d0442566a719146ee9c1.jpg altdata-v-2c43c764img srchttps://yanxuan-item.nosdn.127.net/7dfee58e7c6b3996badf368610ed62b1.jpgalt data-v-2c43c764imgsrchttps://yanxuan-item.nosdn.127.net/d1acff1a29bddd21c2ad337d892a9f7c.jpg altdata-v-2c43c764img srchttps://yanxuan-item.nosdn.127.net/ac722b04b2014ac337d8db695ee46f0c.jpgalt data-v-2c43c764imgsrchttps://yanxuan-item.nosdn.127.net/c63e36faa0848ee37c825897f5cec179.jpg altdata-v-2c43c764img srchttps://yanxuan-item.nosdn.127.net/e0f13dbf14c8a2f07e86bf3df3ca002b.jpgalt data-v-2c43c764/div/divdiv classtab-pane styledisplay: none;评价/div/div!-- 注意事项 --div classwarnh3注意事项/h3p classtit• 购买运费如何收取 /pp单笔订单金额(不含运费)满88元免邮费不满88元每单收取10元运费。港澳台地区需满500元免邮费不满500元每单收取30元运费) /pbrbrp classtit• 使用什么快递发货? /pp默认使用顺丰快递发货(个别商品使用其他快递 /pp配送范围覆盖全国大部分地区(港澳台地区除外。 /pbrbrp classtit• 如何申请退货? /pp1.自收到商品之日起30日内顾客可申请无忧退货退款将原路返还不同的银行处理时间不同预计1-5个工作日到账 /pp2.内裤和食品等特殊商品无质量问题不支持退货 /pp3.退货流程 确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成 /pp4.因小兔鲜儿产生的退货如质量问题退货邮费由小兔鲜儿承担退款完成后会以现金券的形式报销。因客户个人原因产生的退货购买和寄回运费由客户个人承担。/p/div/divdiv classasidediv classtit24小时热销榜/divdiv classproductimg src./uploads/fresh_goods_3.jpg altp classnameUSB Type C数据线/pp classdesc快速充电稳定传输/pp classprice¥29/p/divdiv classproductimg src./uploads/fresh_goods_3.jpg altp classnameUSB Type C数据线/pp classdesc快速充电稳定传输/pp classprice¥29/p/divdiv classproductimg src./uploads/fresh_goods_3.jpg altp classnameUSB Type C数据线/pp classdesc快速充电稳定传输/pp classprice¥29/p/divdiv classtit专题推荐/divdiv classspecialimg src./uploads/discuss_goods_1.jpg altp classname一往无前诞生于崛起/p/divdiv classspecialimg src./uploads/discuss_goods_1.jpg altp classname一往无前诞生于崛起/p/divdiv classspecialimg src./uploads/discuss_goods_1.jpg altp classname一往无前诞生于崛起/p/div/div/div/div/div!-- 公共底部 --div classxtx_footer clearfixdiv classwrapper!-- 联系我们 --div classcontact clearfixdldt客户服务/dtdd classchat在线客服/dddd classfeedback问题反馈/dd/dldldt关注我们/dtdd classweixin公众号/dddd classweibo微博/dd/dldldt下载APP/dtdd classqrcodeimg src./uploads/qrcode.jpg/dddd classdownloadspan扫描二维码/spanspan立马下载APP/spana hrefjavascript:;下载页面/a/dd/dldldt服务热线/dtdd classhotline400-0000-000small周一至周日 8:00-18:00/small/dd/dl/div/div!-- 其它 --div classextradiv classwrapper!-- 口号 --div classslogana hrefjavascript:; classprice价格亲民/aa hrefjavascript:; classexpress物流快捷/aa hrefjavascript:; classquality品质新鲜/a/div!-- 版权信息 --div classcopyrightpa hrefjavascript:;关于我们/aa hrefjavascript:;帮助中心/aa hrefjavascript:;售后服务/aa hrefjavascript:;配送与验收/aa hrefjavascript:;商务合作/aa hrefjavascript:;搜索推荐/aa hrefjavascript:;友情链接/a/ppCopyRight copy; 小兔鲜儿/p/div/div/div/divscript// 1. 获取三个盒子// 2. 小盒子 图片切换效果const small document.querySelector(.small)// 中盒子const middle document.querySelector(.middle)// 大盒子const large document.querySelector(.large)// 2. 事件委托small.addEventListener(mouseover, function (e) {if (e.target.tagName IMG) {// console.log(111)// 排他 干掉以前的 active li 上面this.querySelector(.active).classList.remove(active)// 当前元素的爸爸添加 activee.target.parentNode.classList.add(active)// 拿到当前小图片的 src// console.log(e.target.src)// 让中等盒子里面的图片src 更换为 小图片srcmiddle.querySelector(img).src e.target.src// 大盒子更换背景图片large.style.backgroundImage url(${e.target.src})}})// 鼠标经过中等盒子显示隐藏大盒子middle.addEventListener(mouseenter, show)middle.addEventListener(mouseleave, hide)let timeId 0// 显示函数function show() {clearTimeout(timeId)large.style.display block}// 隐藏函数function hide() {timeId setTimeout(function () {large.style.display none}, 200)}// 鼠标经过大盒子显示隐藏大盒子large.addEventListener(mouseenter, show)large.addEventListener(mouseleave, hide)//鼠标经过中等盒子显示隐藏黑色遮罩层const layer document.querySelector(.layer)middle.addEventListener(mouseenter, function () {layer.style.display block})middle.addEventListener(mouseleave, function () {layer.style.display none})//移动黑色遮罩层middle.addEventListener(mousemove, function (e) {let x e.pageX - middle.getBoundingClientRect().leftlet y e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop//遮罩层在middle盒子内限定移动的距离if (x 0 x 400 y 0 y 400) {//黑色盒子不是一直移动的// layer.style.left x px// layer.style.top y px//声明两个变量黑色盒子移动的mx变量let mx 0, my 0if (x 100) {mx 0}if (x 100 x 300) {mx x - 100}if (x 300) {mx 200}layer.style.left mx pxif (y 100) {my 0}if (y 100 y 300) {my y - 100}if (y 300) {my 200}layer.style.top my px//大图和小图一起移动,两倍关系large.style.backgroundPositionX -2 * mx pxlarge.style.backgroundPositionY -2 * my px}})/script
/body/html
