论坛 › 物联网 › HTML 底子，尚优选网站计划开辟(二)

干翻全岛蛙蛙 发表于 2024-9-10 18:53:53

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

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


尚优选网站计划开辟

页面分析

https://i-blog.csdnimg.cn/direct/878805ea007c411ab49d22a65a92e843.png
less的使用

https://i-blog.csdnimg.cn/direct/c9208be089f341b0b1a07eaef020e71f.png
页面交互功能实现



[*]选项卡的点击切换
[*]价格动态切换
[*]商品信息动态加载
[*]点击商品参数添加效果
[*]点击侧边栏关闭开启效果
[*]商品动态加入效果
[*]公用函数封装
[*]放大镜效果
部门代码
/*
       *
       *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.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);
                        }
                }


        }
演示效果


   商城demo

需要代码工程的同砚 ，工程已经打包好了↓↓↓↓
扫描下方QCode，或者关注GZH： 码猿趣事，复兴关键字：shopping开辟, 即可持续更新中~。
https://i-blog.csdnimg.cn/direct/fa4762a977054040908c4b3430db7ec0.png

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

查看完整版本: HTML 底子，尚优选网站计划开辟(二)