最近在恶补HTML相关知识点，本人是后端程序员，看到周围很多人都被裁员了，突然想尽早转变成全栈程序员变成独立开发者，有空余接接私单、商单的

尚优选网站设计开发

页面分析

less的使用

页面交互功能实现

• 选项卡的点击切换
• 价格动态切换
• 商品信息动态加载
• 点击商品参数添加效果
• 点击侧边栏关闭开启效果
• 商品动态加入效果
• 公用函数封装
• 放大镜效果

部分代码

/* **1、找到smallPic元素  *2、鼠标移入事件，创建蒙版,创建大图*3、移除鼠标时，销毁大图层*/function bigClassMove() {var smallPic = document.querySelector('#wrapper #content .contentMain #center #center-left .leftTop .smallPic');var leftTop = document.querySelector('#wrapper #content .contentMain #center #center-left .leftTop');var imgList = goodData.imagessrc;smallPic.onmouseenter = function() {var maskDiv = document.createElement('div');maskDiv.className = 'mask';var bigDiv = document.createElement('div');bigDiv.className = 'bigPic';var bigImg = document.createElement('img');bigImg.src = imgList[bigImgIndex].b;bigDiv.appendChild(bigImg);leftTop.appendChild(bigDiv);smallPic.appendChild(maskDiv);smallPic.onmousemove = function(even) {var left = even.clientX - smallPic.getBoundingClientRect().left - maskDiv.offsetWidth / 2;var top = even.clientY - smallPic.getBoundingClientRect().top - maskDiv.offsetHeight / 2;if (left < 0) {left = 0;} else if (left > smallPic.clientWidth - maskDiv.offsetWidth) {left = smallPic.clientWidth - maskDiv.offsetWidth;}if (top < 0) {top = 0;} else if (top > smallPic.clientHeight - maskDiv.offsetHeight) {top = smallPic.clientHeight - maskDiv.offsetHeight}maskDiv.style.left = left + 'px';maskDiv.style.top = top + 'px';var scale = (smallPic.clientWidth - maskDiv.offsetWidth) / (bigImg.offsetWidth - bigDiv.clientWidth)bigImg.style.left = -left / scale + 'px';bigImg.style.top = -top / scale + 'px';}smallPic.onmouseleave = function() {smallPic.removeChild(maskDiv);leftTop.removeChild(bigDiv);}}}

演示效果

需要代码工程的同学 ，工程已经打包好了↓↓↓↓
扫描下方QCode，或者关注GZH： 码猿趣事，回复关键字：shopping开发, 即可持续更新中~。