HTML 底子，尚优选网站计划开辟(二)

最近在恶补HTML相关知识点，本人是后端步伐员，看到周围许多人都被裁员了，突然想尽早转变成全栈步伐员变成独立开辟者，有空余接接私单、商单的
  
  
尚优选网站计划开辟

页面分析

less的使用

页面交互功能实现

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

部门代码

1. /*
2.          *
3.          *1、找到smallPic元素  
4.          *2、鼠标移入事件，创建蒙版,创建大图
5.          *3、移除鼠标时，销毁大图层
6.          */
7.         function bigClassMove() {
8.                 var smallPic = document.querySelector(
9.                         '#wrapper #content .contentMain #center #center-left .leftTop .smallPic');
10.                 var leftTop = document.querySelector('#wrapper #content .contentMain #center #center-left .leftTop');
12.                 var imgList = goodData.imagessrc;
14.                 smallPic.onmouseenter = function() {
15.                         var maskDiv = document.createElement('div');
16.                         maskDiv.className = 'mask';
18.                         var bigDiv = document.createElement('div');
19.                         bigDiv.className = 'bigPic';
21.                         var bigImg = document.createElement('img');
22.                         bigImg.src = imgList[bigImgIndex].b;
23.                         bigDiv.appendChild(bigImg);
26.                         leftTop.appendChild(bigDiv);
27.                         smallPic.appendChild(maskDiv);
30.                         smallPic.onmousemove = function(even) {
31.                                 var left = even.clientX - smallPic.getBoundingClientRect().left - maskDiv.offsetWidth / 2;
32.                                 var top = even.clientY - smallPic.getBoundingClientRect().top - maskDiv.offsetHeight / 2;
34.                                 if (left < 0) {
35.                                         left = 0;
36.                                 } else if (left > smallPic.clientWidth - maskDiv.offsetWidth) {
37.                                         left = smallPic.clientWidth - maskDiv.offsetWidth;
38.                                 }
41.                                 if (top < 0) {
42.                                         top = 0;
43.                                 } else if (top > smallPic.clientHeight - maskDiv.offsetHeight) {
44.                                         top = smallPic.clientHeight - maskDiv.offsetHeight
45.                                 }
48.                                 maskDiv.style.left = left + 'px';
49.                                 maskDiv.style.top = top + 'px';
51.                                 var scale = (smallPic.clientWidth - maskDiv.offsetWidth) / (bigImg.offsetWidth - bigDiv
52.                                         .clientWidth)
53.                                 bigImg.style.left = -left / scale + 'px';
54.                                 bigImg.style.top = -top / scale + 'px';
55.                         }
57.                         smallPic.onmouseleave = function() {
58.                                 smallPic.removeChild(maskDiv);
59.                                 leftTop.removeChild(bigDiv);
60.                         }
61.                 }
64.         }

复制代码

演示效果


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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。