网站自行备案,asp网站的优点,网站开发人员职责,专业图片在线制作网站提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、概念其他事件页面加载事件元素滚动事件页面尺寸事件 元素尺寸与位置 二、案例举例电梯导航 前言
掌握阻止事件冒泡的方法理解事件委托的实现原理
一、概念… 提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档 文章目录 前言一、概念其他事件页面加载事件元素滚动事件页面尺寸事件 元素尺寸与位置 二、案例举例电梯导航 前言
掌握阻止事件冒泡的方法理解事件委托的实现原理
一、概念
1.事件流 事件流是对事件执行过程的描述了解事件的执行过程有助于加深对事件的理解提升开发实践中对事件运用的灵活度。
如上图所示任意事件被触发时总会经历两个阶段【捕获阶段】和【冒泡阶段】。
简言之捕获阶段是【从父到子】的传导过程冒泡阶段是【从子向父】的传导过程。
2.捕获和冒泡 事件流是如何影响事件执行的:
结合事件流的特征我们知道当某个元素的事件被触发时事件总是会先经过其祖先才能到达当前元素然后再由当前元素向祖先传递事件在流动的过程中遇到相同的事件便会被触发。
事件相继触发的【执行顺序】事件的执行顺序是可控制的即可以在捕获阶段被执行也可以在冒泡阶段被执行。如果事件是在冒泡阶段执行的我们称为【冒泡模式】它会先执行子盒子事件再去执行父盒子事件默认是冒泡模式。如果事件是在捕获阶段执行的我们称为【捕获模式】它会先执行父盒子事件再去执行子盒子事件。
结论
addEventListener 第3个参数决定了事件是在捕获阶段触发还是在冒泡阶段触发addEventListener 第3个参数为 true 表示捕获阶段触发false 表示冒泡阶段触发默认值为 false事件流只会在父子元素具有相同事件类型时才会产生影响绝大部分场景都采用默认的冒泡模式其中一个原因是早期 IE 不支持捕获
3.阻止冒泡
阻止冒泡是指阻断事件的流动保证事件只在当前元素被执行而不再去影响到其对应的祖先元素。
事件对象中的 ev.stopPropagation 方法专门用来阻止事件冒泡。 鼠标经过事件 mouseover 和 mouseout 会有冒泡效果 mouseenter 和 mouseleave 没有冒泡效果 (推荐) 4.事件委托
事件委托是利用事件流的特征解决一些现实开发需求的知识技巧主要的作用是提升程序效率。
大量的事件监听是比较耗费性能的如下代码所示
script// 假设页面中有 10000 个 button 元素const buttons document.querySelectorAll(table button);for(let i 0; i buttons.length; i) {// 为 10000 个 button 元素添加了事件buttons.addEventListener(click, function () {// 省略具体执行逻辑...})}
/script利用事件流的特征可以对上述的代码进行优化事件的的冒泡模式总是会将事件流向其父元素的如果父元素监听了相同的事件类型那么父元素的事件就会被触发并执行正是利用这一特征对上述代码进行优化如下代码所示
script// 假设页面中有 10000 个 button 元素let buttons document.querySelectorAll(table button);// 假设上述的 10000 个 buttom 元素共同的祖先元素是 tablelet parents document.querySelector(table);parents.addEventListener(click, function () {console.log(点击任意子元素都会触发事件...);})
/script事件对象中的属性 target 或 srcElement属性表示真正触发事件的元素它是一个元素类型的节点。
script// 假设页面中有 10000 个 button 元素const buttons document.querySelectorAll(table button)// 假设上述的 10000 个 buttom 元素共同的祖先元素是 tableconst parents document.querySelector(table)parents.addEventListener(click, function (ev) {// console.log(ev.target);// 只有 button 元素才会真正去执行逻辑if(ev.target.tagName BUTTON) {// 执行的逻辑}})
/script优化过的代码只对祖先元素添加事件监听相比对 10000 个元素添加事件监听执行效率要高许多
其他事件
页面加载事件
加载外部资源如图片、外联CSS和JavaScript等加载完毕时触发的事件
有些时候需要等页面资源全部处理完了做一些事情
事件名load
监听页面所有资源加载完毕
window.addEventListener(load, function() {// xxxxx
})元素滚动事件
滚动条在滚动的时候持续触发的事件
window.addEventListener(scroll, function() {// xxxxx
})页面尺寸事件
会在窗口尺寸改变的时候触发事件
window.addEventListener(resize, function() {// xxxxx
})元素尺寸与位置
获取元素的自身宽高、包含元素自身设置的宽高、padding、border
offsetWidth和offsetHeight
获取出来的是数值,方便计算
注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
二、案例举例
电梯导航
!DOCTYPE html
html langenheadmeta charsetUTF-8title小兔鲜儿 - 新鲜 惠民 快捷!/titlemeta http-equivX-UA-Compatible contentIEedgemeta namerenderer contentwebkitlink relstylesheet href./css/common.csslink relstylesheet href./css/index.css
/headbody!-- 项部导航 --div classxtx_topnavdiv classwrapper!-- 顶部导航 --ul classxtx_navslia hrefjavascript:;请先登录/a/lilia hrefjavascript:;免费注册/a/lilia hrefjavascript:;我的订单/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搜一搜/div/div/div/div!-- 分类及焦点图 --div classxtx_entrydiv classwrapper!-- 分类 --div classxtx_category!-- 顶级分类 --ul classxtx_category_superlia hrefjavascript:;生鲜small水果/smallsmall蔬菜/small/ai classsprites/i/lili classactivea hrefjavascript:;美食small面点/smallsmall干果/small/ai classsprites/i/lilia hrefjavascript:;电器small数码产品/small/ai classsprites/i/lilia hrefjavascript:;居家small床品/smallsmall四件套/smallsmall被枕/small/ai classsprites/i/lilia hrefjavascript:;洗护small洗发洗护/smallsmall美妆/small/ai classsprites/i/lilia hrefjavascript:;孕婴small奶粉/smallsmall玩具/smallsmall辅食/small/ai classsprites/i/lilia hrefjavascript:;餐橱small数码产品/small/ai classsprites/i/lilia hrefjavascript:;服饰small女装/smallsmall男装/small/ai classsprites/i/lilia hrefjavascript:;杂货small户外/smallsmall图书/small/ai classsprites/i/lilia hrefjavascript:;品牌small品牌制造/small/ai classsprites/i/li/ul!-- 子分类 --div classxtx_category_subset/div/div!-- 焦点图 --div classxtx_bannerullia hrefjavascript:;img src./uploads/banner_1.png alt/a/li/ul!-- 切换按钮 --a hrefjavascript:; classprev sprites/aa hrefjavascript:; classnext sprites/a!-- 指示器 --div classindicatorspan/spanspan/spanspan classactive/spanspan/spanspan/span/div/div/div/div!-- 新鲜好物 --div classxtx_goods_new xtx_paneldiv classwrapper!-- 面板头部 --div classxtx_panel_headerh3新鲜好物small新鲜出炉 品质靠谱/small/h3a hrefjavascript:; classmore查看全部i classsprites/i/a/div!-- 商品列表 --div classxtx_panel_goods_1a hrefjavascript:;img src./uploads/new_goods_1.jpg altspan classname睿米无线吸尘器F8/spanspan classpricesmall/small899/span/aa hrefjavascript:;img src./uploads/new_goods_2.jpg altspan classname智能环绕3D空调/spanspan classpricesmall/small1299/span/aa hrefjavascript:;img src./uploads/new_goods_3.jpg altspan classname广东软软糯米煲仔饭/spanspan classpricesmall/small129/span/aa hrefjavascript:;img src./uploads/new_goods_4.jpg altspan classname罗西机械智能手表/spanspan classpricesmall/small3399/span/a/div/div/div!-- 人气推荐 --div classxtx_goods_popular xtx_paneldiv classwrapper!-- 面板头部 --div classxtx_panel_headerh3人气推荐small人气爆款 不容错过/small/h3/div!-- 商品列表 --div classxtx_panel_goods_1a hrefjavascript:;img src./uploads/popular_1.jpgspan classtitle特惠推荐/spanspan classalt我猜得到 你的需要/span/aa href./index-hot.htmlimg src./uploads/popular_2.jpgspan classtitle爆款推荐/spanspan classalt人气好物推荐/span/aa href./index-one.htmlimg src./uploads/popular_3.jpgspan classtitle场景使用一站买全/spanspan classalt编辑精心整理推荐/span/aa hrefjavascript:;img src./uploads/popular_4.jpgspan classtitle领券中心/spanspan classalt发现更多超值优惠券/span/a/div/div/div!-- 热门品牌 --div classxtx_goods_brand xtx_paneldiv classwrapperdiv classxtx_panel_headerh3热门品牌small国际经典 品质保证/small/h3div classpage-bara hrefjavascript:; classprev sprites/aa hrefjavascript:; classnext sprites active/a/div/div!-- 商品列表 --div classxtx_goodsullia href./index-brand.htmlimg src./uploads/brand_goods_1.jpg alt/aa href./brand-list.htmlimg src./uploads/brand_goods_2.jpg alt/aa hrefjavascript:;img src./uploads/brand_goods_3.jpg alt/aa hrefjavascript:;img src./uploads/brand_goods_4.jpg alt/aa hrefjavascript:;img src./uploads/brand_goods_5.jpg alt/a/li/ul/div/div/div!-- 分类商品 --div classxtx_goods_category xtx_paneldiv classwrapper!-- 生鲜 --div classxtx_panel_headerh3生鲜/h3a hrefjavascript:; classmore查看全部i classsprites/i/adiv classtabs-bara hrefjavascript:; classactive水果/aa hrefjavascript:;蔬菜/aa hrefjavascript:;肉禽蛋/aa hrefjavascript:;裤装/aa hrefjavascript:;衬衫/aa hrefjavascript:;内衣/a/div/div!-- 商品列表 --div classxtx_panel_goods_2ul classclearfixlia hrefjavascript:;img src./uploads/fresh_goods_cover.jpg alt/adiv classlabelspan生鲜馆/spanspan全场3件8折/span/div/lili!-- 商品图片 --a hrefjavascript:;div classimg-boximg src./uploads/fresh_goods_1.jpg alt/div/a!-- 商品信息 --div classmetap classname美威 智利原味三文鱼排 240g/袋 4片装/pp classflag海鲜年货/pp classpricesmall/small59/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/fresh_goods_2.jpg alt/div/adiv classmetap classname红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只/pp classflag火锅食材/pp classpricesmall/small71.9/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/fresh_goods_3.jpg alt/div/adiv classmetap classname三都港 冷冻无公害黄花鱼 700g 2条 袋装/pp classflag海鲜水产/pp classpricesmall/small49.9/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/fresh_goods_4.jpg alt/div/adiv classmetap classname渔公码头 大连鲜食入味 即食海参 辽参刺参 调味海/pp classflag海鲜年货/pp classpricesmall/small899/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/fresh_goods_5.jpg alt/div/adiv classmetap classname越南进口白心火龙果4个 装 标准果 单果400-550g /pp classflag/pp classpricesmall/small29/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/fresh_goods_6.jpg alt/div/adiv classmetap classname广西沃柑 柑橘1.5kg/pp classflag新鲜水果/pp classpricesmall/small59/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/fresh_goods_7.jpg alt/div/adiv classmetap classname进口 牛油果 6个装 单果重约130-180g/pp classflag新鲜水果/pp classpricesmall/small39.9/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/fresh_goods_8.jpg alt/div/adiv classmetap classname泰国进口山竹5A级 500g /pp classflag新鲜水果/pp classpricesmall/small29.9/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/li/ul/div!-- 服饰 --div classxtx_panel_headerh3服饰/h3a hrefjavascript:; classmore查看全部i classsprites/i/adiv classtabs-bara hrefjavascript:; classactive行李箱/aa hrefjavascript:;男士包袋/aa hrefjavascript:;女士包袋/aa hrefjavascript:;钱包及小提袋/aa hrefjavascript:;男鞋/aa hrefjavascript:;女鞋/aa hrefjavascript:;拖鞋/a/div/div!-- 商品列表 --div classxtx_panel_goods_2ul classclearfixlia hrefjavascript:;img src./uploads/clothes_goods_cover.jpg alt/adiv classlabelspan服饰馆/spanspan3折狂欢/span/div/lili!-- 商品图片 --a hrefjavascript:;div classimg-boximg src./uploads/clothes_goods_1.jpg alt/div/a!-- 商品信息 --div classmetap classname人本秋季厚底帆布鞋 韩版低帮增高学生/pp classflag/pp classpricesmall/small55/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/clothes_goods_2.jpg alt/div/adiv classmetap classname迪士尼真皮针扣表带宽度 14-16mm规格双色压纹 女表带/pp classflag海鲜年货/pp classpricesmall/small20.9/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/clothes_goods_3.jpg alt/div/adiv classmetap classname三都港 冷冻无公害黄花鱼 700g 2条 袋装/pp classflag海鲜水产/pp classpricesmall/small209/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/clothes_goods_4.jpg alt/div/adiv classmetap classnameONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤/pp classflag/pp classpricesmall/small274.5/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/clothes_goods_5.jpg alt/div/adiv classmetap classname拉夫劳伦t恤男正品 /pp classflag圆领短袖/pp classpricesmall/small99/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/clothes_goods_6.jpg alt/div/adiv classmetap classname李宁跑步鞋男鞋空气 弧2018春季款/pp classflag/pp classpricesmall/small79/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/clothes_goods_7.jpg alt/div/adiv classmetap classnameDickies男鞋2020春季 英伦休闲工装鞋低帮/pp classflag/pp classpricesmall/small179/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/clothes_goods_8.jpg alt/div/adiv classmetap classname北极绒春夏季纯棉背心 男士修身纯色打底/pp classflag/pp classpricesmall/small69/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/li/ul/div!-- 餐厨 --div classxtx_panel_headerh3餐厨/h3a hrefjavascript:; classmore查看全部i classsprites/i/adiv classtabs-bara hrefjavascript:; classactive水果/aa hrefjavascript:;蔬菜/aa hrefjavascript:;肉禽蛋/aa hrefjavascript:;裤装/aa hrefjavascript:;衬衫/aa hrefjavascript:;内衣/a/div/div!-- 商品列表 --div classxtx_panel_goods_2ul classclearfixlia hrefjavascript:;img src./uploads/kitchen_goods_cover.jpg alt/adiv classlabelspan餐厨馆/spanspan大额优惠br等你来拿/span/div/lili!-- 商品图片 --a hrefjavascript:;div classimg-boximg src./uploads/kitchen_goods_1.jpg alt/div/a!-- 商品信息 --div classmetap classname创意可爱不锈钢便携餐具 套装筷子便携三件套/pp classflag/pp classpricesmall/small5.9/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/kitchen_goods_2.jpg alt/div/adiv classmetap classname三金西瓜霜竹炭牙刷软毛 成人家用家庭装/pp classflag/pp classpricesmall/small20.9/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/kitchen_goods_3.jpg alt/div/adiv classmetap classname朴TOPOTO大卫免手 洗平板拖把拓扑懒人木地 板刮刮乐桶拖布/pp classflag/pp classpricesmall/small129/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/kitchen_goods_4.jpg alt/div/adiv classmetap classnameONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤/pp classflag/pp classpricesmall/small274.5/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/kitchen_goods_5.jpg alt/div/adiv classmetap classname金纺不伤手柔顺剂 妈妈的选择/pp classflag/pp classpricesmall/small29/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/kitchen_goods_6.jpg alt/div/adiv classmetap classname洁成绵柔抹布洗碗巾超 值5片装 洗锅刷碗/pp classflag/pp classpricesmall/small10.9/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/kitchen_goods_7.jpg alt/div/adiv classmetap classname大卫双驱动旋转拖把桶 免手洗拓扑拖布地拖墩布 /pp classflag/pp classpricesmall/small159/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/kitchen_goods_8.jpg alt/div/adiv classmetap classname斧头牌AXE去污地板 清洁剂2L 柠檬清香 /pp classflag海鲜年货/pp classpricesmall/small22.9/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/li/ul/div!-- 居家 --div classxtx_panel_headerh3居家/h3a hrefjavascript:; classmore查看全部i classsprites/i/adiv classtabs-bara hrefjavascript:; classactive咖啡具/aa hrefjavascript:;水具酒具/aa hrefjavascript:;锅具/aa hrefjavascript:;餐具/aa hrefjavascript:;功能厨具/aa hrefjavascript:;茶具/aa hrefjavascript:;清洁保鲜/a/div/div!-- 商品列表 --div classxtx_panel_goods_2ul classclearfixlia hrefjavascript:;img src./uploads/home_goods_cover.jpg alt/adiv classlabelspan居家馆/spanspan全场满减/span/div/lili!-- 商品图片 --a hrefjavascript:;div classimg-boximg src./uploads/home_goods_1.jpg alt/div/a!-- 商品信息 --div classmetap classname菜鸟异常专用链接 非请 勿拍/pp classflag海鲜年货/pp classpricesmall/small8999/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/home_goods_2.jpg alt/div/adiv classmetap classname【中盐软水盐】汉斯希 尔家用软水机适配/pp classflag/pp classpricesmall/small65/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/home_goods_3.jpg alt/div/adiv classmetap classname云米净水壶家用直饮台式 净水机渗透过滤自来水/pp classflag海鲜年货/pp classpricesmall/small129/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/home_goods_4.jpg alt/div/adiv classmetap classnameztk恒温调奶器配件玻璃壶 炖盅/pp classflag海鲜年货/pp classpricesmall/small129/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/home_goods_5.jpg alt/div/adiv classmetap classname荞麦枕头单人枕芯双人 护颈椎枕头芯/pp classflag/pp classpricesmall/small29/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/home_goods_6.jpg alt/div/adiv classmetap classnameBear/小熊 LLJ-B04G1 家用多功能切碎机 电动/pp classflag料理机/pp classpricesmall/small10.9/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/home_goods_7.jpg alt/div/adiv classmetap classname荣事达薄饼机春饼春卷皮 家用博饼机电饼铛 /pp classflag/pp classpricesmall/small159/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/lilia hrefjavascript:;div classimg-boximg src./uploads/home_goods_8.jpg alt/div/adiv classmetap classname美式双人实木床 红实木 显档次/pp classflag/pp classpricesmall/small22.9/p/div!-- 其它 --div classextraa hrefjavascript:;span找相似/spanspan发现现多宝贝gt;/span/a/div/li/ul/div/div/div!-- 最新主题 --div classxtx_goods_topic xtx_paneldiv classwrapperdiv classxtx_panel_headerh3最新专题/h3a hrefjavascript:; classmore查看全部i classsprites/i/a/divdiv classxtx_topicul classclearfixlia hrefjavascript:;img src./uploads/topic_goods_1.jpg altdiv classmetap classtitle吃这些美食才不算辜负自己small餐厨起居洗护好物/small/pspan classpricesmall/small29.9起/span/div/adiv classsocialspan classlikei classsprites/i1220/spanspan classviewi classsprites/i1800/spanspan classreplyi classsprites/i1220/span/div/lilia hrefjavascript:;img src./uploads/topic_goods_2.jpg altdiv classmetap classtitle吃这些美食才不算辜负自己small餐厨起居洗护好物/small/pspan classpricesmall/small29.9起/span/div/adiv classsocialspan classlikedi classsprites/i1220/spanspan classviewi classsprites/i1800/spanspan classreplyi classsprites/i1220/span/div/lilia hrefjavascript:;img src./uploads/topic_goods_3.jpg altdiv classmetap classtitle吃这些美食才不算辜负自己small餐厨起居洗护好物/small/pspan classpricesmall/small29.9起/span/div/adiv classsocialspan classlikei classsprites/i1220/spanspan classviewi classsprites/i1800/spanspan classreplyi classsprites/i1220/span/div/li/ul/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/div!-- 电梯 --div classxtx-elevatorul classxtx-elevator-listlia hrefjavascript:; data-namenew新鲜好物/a/lilia hrefjavascript:; data-namepopular人气推荐/a/lilia hrefjavascript:; data-namebrand热门品牌/a/lilia hrefjavascript:; data-nametopic最新专题/a/lilia hrefjavascript:; idbackTopi classsprites/i顶部/a/li/ul/divscript//1.页面滚动到一定位置 电梯导航栏出现(/透明度1)(function () {const xtx_elevator document.querySelector(.xtx-elevator)const wrapper document.querySelector(.xtx_goods_new .xtx_panel .wrapper)window.addEventListener(scroll, function () {xtx_elevator.style.opacity document.documentElement.scrollTop 300 ? 1 : 0})})();//2.点击电梯导航栏的‘返回顶部’同时页面scrollTop0(function () {const backTop document.querySelector(#backTop)backTop.addEventListener(click, function () {document.documentElement.scrollTop 0})})();//3.点击点击导航栏除‘返回顶部’外,添加active同时页面显示对应内容scrollTop更改成与某offsettop相同(function () {const list document.querySelector(.xtx-elevator-list)list.addEventListener(click, function (e) {if (e.target.tagName A e.target.dataset.name) {const old document.querySelector(.xtx-elevator-list .active) //!!!!if (old) {old.classList.remove(active) //}e.target.classList.add(active)const item document.querySelector(.xtx_goods_${e.target.dataset.name}) //document.documentElement.scrollTop item.offsetTop}})})();//4.页面滚动到某位置区间电梯导航栏的对应位置classList.add(active)const news document.querySelector(.xtx_goods_new)const popular document.querySelector(.xtx_goods_popular)const brand document.querySelector(.xtx_goods_brand)const topic document.querySelector(.xtx_goods_topic)window.addEventListener(scroll, function () {const old document.querySelector(.xtx-elevator-list .active) //!!!!if (old) {old.classList.remove(active) //}if (document.documentElement.scrollTop news.offsetTop document.documentElement.scrollTop popular.offsetTop) {document.querySelector([data-namenew).classList.add(active) //导航条} else if (document.documentElement.scrollTop popular.offsetTop document.documentElement.scrollTop brand.offsetTop) {document.querySelector([data-namepopular).classList.add(active)} else if (document.documentElement.scrollTop brand.offsetTop document.documentElement.scrollTop topic.offsetTop) {document.querySelector([data-namebrand).classList.add(active)} else if (document.documentElement.scrollTop topic.offsetTop) {document.querySelector([data-nametopic).classList.add(active)}})/script/body/html
