1.依赖jquery，主要利用二维数组。

2.原生手写。

代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             input{

                 width: 50px;

                 height: 35px;

                 background: orange;

             }

         </style>

     </head>

     <body>

         <div class="container">

               <div class="row">

                 <input type="button" value="红" />

                 <input type="button" value="黄" />

                 <input type="button" value="蓝"/>

                 <input type="button" value="白"/>

                 <input type="button" value="军绿"/>

             </div>

             <div class="row">

                 <input type="button" value="xl"/>

                 <input type="button" value="xxl"/>

                 <input type="button" value="xxxl"/>

             </div>

             <div class="row">

                 <input type="button" value="纯棉"/>

                 <input type="button" value="牛仔"/>

                 <input type="button" value="针织"/>

             </div>

             <div class="row">

                 <input type="button" value="A"/>

                 <input type="button" value="B"/>

                 <input type="button" value="C"/>

                 <input type="button" value="D"/>

                 <input type="button" value="E"/>

             </div>

           </div>    

         <div class="box">

         </div>

         <script src="jquery-3.2.1.min.js"></script>

         <script type="text/javascript">

             //给按钮添加选中取消标志

             $(".container .row input").attr("data-check",1);

             //获取矩阵按钮

             function getBtn(ele){

                 var arr=[];

                 var contain = $(ele);

                 for(let i=0;i<contain.length;i++){

                     arr.push($.makeArray(contain[i].children));

                 }

                 return arr;

             }

             //生成二维数组

             var data = getBtn(".container .row"); 

             //判断点击的元素是否在二维数组中

             function getIndex(ele,map){

                 var res=[];

                 for(let i=0;i<map.length;i++){

                     for(let j=0;j<map[i].length;j++){

                         if(map[i][j] == ele){

                             res = [i,j];

                         }

                     }

                 }

                 return res;

             }

             //生成默认值

             function init(data){

                 var arr = [];

                 for(let i = 0;i<data.length;i++){

                     arr.push([i,0]);

                     //默认选中的样式

                     $(data[i][0]).attr("data-check",0);

                     $(data[i][0]).css("background","gray");

                 }

                 return arr;

             }

             var defaultVal = init(data);

             //渲染函数

             function myRender(s,data){

                     var str="";

                     for(let i = 0; i<data.length;i++){

                         str+=data[s[i][0]][s[i][1]].value+",";

                     }

                     $(".box").append("<p>"+str+"</p>");

             }

             //绑定点击事件

             $(".container .row input").on("click",function(){

                 var _this=$(this);

                 //判断在哪行那列

                 var res = getIndex(_this[0],data);

                 if(_this.attr("data-check")==1 ){

                     _this.attr("data-check",0);

                     _this.css("background","gray");

                     _this.siblings().css("background","orange")

                     _this.siblings().attr("data-check",1)

                     //插入要渲染的数据

                     defaultVal.splice(res[0],1,res);

                     //渲染数据

                     myRender(defaultVal,data);

                 }else{

                     //点击取消，替换回这一行的默认值

                     defaultVal[res[0]] = [res[0],0];

                     myRender(defaultVal,data);

                     _this.attr("data-check",1);

                     if(res[1]!==0){

                         _this.css("background","orange");

                     }

                 }

         })

         </script>

     </body>

 </html>

事实上这个东西还有无限扩展，包括利用vue或react进行dom操作，还有各种接口，商品数量的操作等，时间有限，先这些。

仿制淘宝sku点击效果的更多相关文章

  1. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  2. 淘宝SKU组合查询算法实现

    淘宝SKU组合查询算法实现 2015-11-14 16:18 1140人阅读 评论(0) 收藏 举报  分类: JavaScript(14)    目录(?)[+]   前端有多少事情可以做,能做到多 ...

  3. Android：实现仿 美团/淘宝 多级分类菜单效果

    本例要实现的是诸如美团/淘宝/百度糯米 多级分类菜单效果.当分类数量许多时能够考虑採用两级分类.而诸如美团这样的表现方式是一个不错的选择. 首先上效果图:      主要代码: 1. PopupWin ...

  4. C#编写Windows服务程序 (服务端),client使用 消息队列 实现淘宝 订单全链路效果

    需求: 针对 淘宝提出的 订单全链路 产品接入 .http://open.taobao.com/doc/detail.htm?id=102423&qq-pf-to=pcqq.group oms ...

  5. 模仿原生淘宝app点击搜索时的页面滑动效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. js原生淘宝京东宝贝放大镜效果

    js实现商城放大镜效果 效果: 鼠标放上去会有半透明遮罩.右边会有大图片局部图. 鼠标移动时右边的大图片也会局部移动. 技术点: Event Event 是一个事件对象,当一个事件发生后,和当前事件发 ...

  7. Android之淘宝商品列表长按遮罩效果

    先来看看淘宝.唯品会长按商品的效果,以及简单Demo的效果:        首先分析一下场景: 长按条目时,弹出遮罩的效果遮挡在原来的条目布局上: 页面滑动或点击其他的条目,上一个正在遮罩的条目遮罩消 ...

  8. 仿淘宝分页按钮效果简单美观易使用的JS分页控件

    分页按钮思想:  1.少于9页,全部显示  2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码  附件中有完整例子的压缩包下载.已更新到最新版本  先看效果图:  01输入框焦点效果  ...

  9. “四核”驱动的“三维”导航 -- 淘宝新UI（需求分析篇）

    前言 孔子说:"软件是对客观世界的抽象". 首先声明,这里的"三维导航"和地图没一毛钱关系,"四核驱动"和硬件也没关系,而是为了复杂的应用而 ...

随机推荐

  1. Swift要点：从Objective-C开发者的角度看Swift

    代码环境是Xcode6.3-Beta3. Swift已经极大的改变了开发iOS应用的方式.本文中,我会列出Swift的几个重点,并且和Objective-C一一做出对比. 注意,本文不是Swift的入 ...

  2. Oracle sql 优化の常用方式

    1.不要用 '*' 代替所有列名,特别是字段比较多的情况下 使用select * 可以列出某个表的所有列名,但是这样的写法对于Oracle来说会存在动态解析问题.Oracle系统通过查询数据字典将 ' ...

  3. 用于sql代码实现用户的创建，以及不同用户之间登陆的切换

    --1.准备工作.创建两个登录名Create Login Login1 with Password='123456';Create Login Login2 with Password='123456 ...

  4. NotMapped属性特性

    NotMapped特性可以应用到领域类的属性中,Code-First默认的约定,是为所有带有get,和set属性选择器的属性创建数据列.. NotManpped特性打破了这个约定,你可以使用NotMa ...

  5. [Openwrt 项目开发笔记]：DDNS设置（五）

    [Openwrt项目开发笔记]系列文章传送门:http://www.cnblogs.com/double-win/p/3888399.html 正文: 在上一节中,我主要讲述了如何在Openwrt上安 ...

  6. 实现EventHandler的监测

    的监测", "category":"", "tags":"", "publish":&qu ...

  7. NETSDK1061错误解决

    NETSDK1061错误解决 在vs生成和运行都正常,发布的时候报错 .netcore控制台项目引用另一个类库 错误信息 NETSDK1061: 项目是使用 Microsoft.NETCore.App ...

  8. WPF点滴（1） Main 函数

    应用程序的入口函数是main函数,在Console程序和Winform程序main函数都有清晰的定义,可以很容易找到,但是WPF的工程文件中却找不到main函数的定义,是WPF不需要main函数吗?N ...

  9. The rapid development platform upgrade, leave the time to yourself, the work is lost to the soft platform

    Bring me back to your home. Please leave your work behind! Soft agile development framework V7.0 new ...

  10. Flask 视图，模板，蓝图.

    https://www.cnblogs.com/wupeiqi/articles/7552008.html 1. 配置文件 from flask import Flask app =Flask(__n ...