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. Linux 系统中进程5中常见状态

    运行.中断.不可终端.僵死.停止 R(运行):正在运行 or 在运行队列中等待: S(中断):处于休眠中,等待接收信号,并脱离改状态: D(不可中断):不响应信号输入,即使kill也不起作用: Z(僵 ...

  2. android图形系统概述

    简介 本文讲解的内容是Android4.1以后的系统机制,将从整体上分析Android图形显示系统的结构,不深入分析每一层内部的代码实现,更多的是使用流程图和结构图来让大家理解Android是如何绘制 ...

  3. jsp ckeditor ckfinder

    我认为对的事情,有可能是完全错的. 这篇教程很好: http://www.cnblogs.com/yuepeng/archive/2013/04/01/2992097.html 只看到9,权限控制还没 ...

  4. linux系统编程之信号（一）：中断与信号

    一,什么是中断? 1．中断的基本概念 中断是指计算机在执行期间,系统内发生任何非寻常的或非预期的急需处理事件,使得CPU暂时中断当前正在执行的程序而转去执行相应的事件处理程序,待处理完毕后又返回原来被 ...

  5. Hibernate与Jpa的关系

    JPA全称Java Persistence API.JPA通过JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. JPA的总体思想和现有Hibernate.T ...

  6. .net core2.0 codefirst 创建数据库的问题!

    appsettings.json和Startup.cs就不记录了,网上很多!! 1.必须在有DbContext类的项目里添加这3个NuGet引用 Microsoft.EntityFrameworkCo ...

  7. .Net Core + DDD基础分层 + 项目基本框架 + 个人总结

    为什么要写这篇文章 1,在大半年前,公司开发任务比较轻松,自己不知道干什么,但是又想要学习技术,比较迷茫,后面我接触到了博客园,看了一个帖子,深有感触,我当时不知道学习什么,于是我信息给他,他居然回复 ...

  8. Redis持久化策略（RDB &AOF）

    redis持久化的几种方式 1.前言 Redis是一种高级key-value数据库.它跟memcached类似,不过数据可以持久化,而且支持的数据类型很丰富.有字符串,链表,集 合和有序集合.支持在服 ...

  9. 1.在html中引入js文件和Jquery框架

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 在html页面添加一个隐藏域,并渲染一个需要保存的数值,在js中需要再获取,而不影响页面结构

    <div style="display:none">可以将需要保存的数值放在文本内容中,也可以放在标签的属性当中, 如果放在文本内容中,注意换行后 \n 的存在< ...