选择搭配
¥5299
+
- 分辨率：1920*1080(FHD)
- 后置摄像头：1200万像素
- 前置摄像头：500万像素
- 核 数：其他
- 频 率：以官网信息为准
- 品牌： Apple
- 商品名称：APPLEiPhone 6s Plus
- 商品编号：1861098
- 商品产地：中国大陆
- 商品毛重：0.51kg
- 热点：指纹识别，Apple Pay，金属机身，拍照神器
规格与包装
售后保障
商品评价
手机社区
// 1 面包屑导航
// 获取数据
// console.log(paths);
// 获取父节点
// 2 左侧选项卡
// 获取左侧选项卡标题
// console.log(h4Els);
// 获取选项卡标题对应的内容区
// console.log(1);
// 循环选项卡标题 排他法
// 循环选项卡内容 排他法
// 让标题所对应的下标的内容区显示
// 3 底部选项卡
//获取底部选项卡标题
// 获取底部选项卡的内容区
// console.log(bottomContent);
// 循环标题
// 排他法
// 循环底部选项卡内容区 排他法
// 4 右边伸缩菜单栏部分
// 获取顶部开关按钮
// 获取内容区
// var asideContent = document.querySelector('.wrap .toolBar .content');
// console.log(toolBar);
// 找到侧边栏的菜单标签
// console.log(asideList);
// 设置鼠标悬浮事件
// 找到当前li下的i和em标签
// 找到当前li下的i和em标签
var i = 0; // 设置一个i变量 接收图片地址链接的下标
// 5 渲染左侧商品图片及缩略图及其按钮点击事件
// 获取所有图片
// console.log(allImg);
// 获取图片地址
// 获取小图盒子
// 创建img节点
// 获取底部小缩略图盒子
// 循环创建li标签
// console.log(img.s);
// 创建图片节点
// 把图片追加到li
// 当li被点击 把当前li下的缩略图src赋值给展示小图src
i = index; // 同步下标
// console.log(i);
// 缩略图左右按钮点击效果
// 获取左侧按钮
// 获取右侧按钮
// 获取所有缩略图li
// 获取li的自身宽度
// 获取li的右外边距
// console.log(liMarginRight);
// 设置ul盒子已经走过的长度
// 默认展示的图片数量
// li宽度和外边距之和
// ul能走得最大距离
// 绑定点击事件
// 左侧按钮点击事件
// 右侧按钮点击事件
// 6 商品图放大镜效果
// 获取大容器
// 获取小图盒子
// 给小图盒子添加鼠标移入事件
// 创建遮盖层
// 追加给小图容器
// 创建大图容器
// 创建大图
// i为上面保存的小图的下标
// 追加给大容器
// 设置鼠标移动事件
// 使鼠标居中
// 遮盖层移动距离
// console.log(maskMoveLeft, maskMoveTop);
// 限制在盒子内移动
// 遮盖层最大移动距离
// console.log(maskMaxMoveLeft, maskMaxMoveTop);
maskMoveLeft = maskMaxMoveLeft; //定在最右边
maskMoveLeft = 0; // 定在最左边
maskMoveTop = maskMaxMoveTop; // 定在最下边
maskMoveTop = 0; // 定在最上边
// 控制大图移动
// 大图的最大移动距离
// 大图的移动距离 = (遮盖的移动距离 * 大图的最大的移动距离) / 遮盖最大的移动距离
// console.log(bigImg.style.left, bigImg.style.top);
// 添加鼠标移出事件 移出删除节点
// mask bigBox bigImg已经从页面中删除了 变量就不需要再引用
// 所以 要清除无效的DOM引用 让垃圾回收机制回收变量
// 7 渲染商品信息
var selectNum = 0; // 声明附加商品选中的默认数量
// 获取父节点
// 获取节点数据
// 获取左侧价格盒子
// 获取右侧价格盒子
// 获取右侧所有的附加商品选项框
// 声明默认价格
// 获取右边的选中数量框
// 选中数量赋值给右边的选中数量框
// 8 添加商品参数信息
// 获取商品参数数据
// 获取父节点
// 循环创建dldt商品参数标签盒子和标题
// 拿出item里边的data
// 循环data创建dd标签
// 给dd添加价格属性
// console.log(dd.getAttribute('price'));
// 9 添加商品参数信息单击事件
var condition = new Array(); // 构造一个空数组对象
condition.fill(0); // 填充为0
// 获取所有dl标签对象
// 循环每个dl
// 获取每个dl下的dd
// 循环为dd添加事件
// 排他法
// 获取choosed节点对象
// console.log(price);
// 循环创建mark标签
// 记录在哪一个dl下面
// 删除节点
// 获取之前给aNode设置的dlIndex
// 获取当前下标的dl下的所有dd
// console.log(dds);
// 删除节点后需要再置空数组
// 10 价格求和计算
// 获取初始数据
// 获取顶部价格容器
// console.log(topPrice.innerText);
//转换为数据类型
// 循环 获取每一项的价格数据
// console.log(param.price);
// 赋值给顶部
// 获取左边价格容器
// 右边价格容器
// 同步右侧商品价格
// 获取右侧所有的附加商品选项框
// console.log(topPrice);
// 给右侧附加商品的选项框添加点击事件
// 获取所有复选框
// 获取右侧价格节点以及价格
// 截取掉 ￥ 符号 并转换为数值类型
// console.log(rightTotalPrice);
// 之前声明过的选中数量也要随之增加
// 最终价格赋值给右边的商品价格框
// 最终选中数量赋值给右边的选中数量框
