仿制淘宝sku点击效果
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点击效果的更多相关文章
- jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
- 淘宝SKU组合查询算法实现
淘宝SKU组合查询算法实现 2015-11-14 16:18 1140人阅读 评论(0) 收藏 举报 分类: JavaScript(14) 目录(?)[+] 前端有多少事情可以做,能做到多 ...
- Android:实现仿 美团/淘宝 多级分类菜单效果
本例要实现的是诸如美团/淘宝/百度糯米 多级分类菜单效果.当分类数量许多时能够考虑採用两级分类.而诸如美团这样的表现方式是一个不错的选择. 首先上效果图: 主要代码: 1. PopupWin ...
- C#编写Windows服务程序 (服务端),client使用 消息队列 实现淘宝 订单全链路效果
需求: 针对 淘宝提出的 订单全链路 产品接入 .http://open.taobao.com/doc/detail.htm?id=102423&qq-pf-to=pcqq.group oms ...
- 模仿原生淘宝app点击搜索时的页面滑动效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js原生淘宝京东宝贝放大镜效果
js实现商城放大镜效果 效果: 鼠标放上去会有半透明遮罩.右边会有大图片局部图. 鼠标移动时右边的大图片也会局部移动. 技术点: Event Event 是一个事件对象,当一个事件发生后,和当前事件发 ...
- Android之淘宝商品列表长按遮罩效果
先来看看淘宝.唯品会长按商品的效果,以及简单Demo的效果: 首先分析一下场景: 长按条目时,弹出遮罩的效果遮挡在原来的条目布局上: 页面滑动或点击其他的条目,上一个正在遮罩的条目遮罩消 ...
- 仿淘宝分页按钮效果简单美观易使用的JS分页控件
分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 ...
- “四核”驱动的“三维”导航 -- 淘宝新UI(需求分析篇)
前言 孔子说:"软件是对客观世界的抽象". 首先声明,这里的"三维导航"和地图没一毛钱关系,"四核驱动"和硬件也没关系,而是为了复杂的应用而 ...
随机推荐
- string转换成char*
string 是c++标准库里面其中一个,封装了对字符串的操作 把string转换为char* 有3中方法: 1.data 如: string str="abc"; char *p ...
- Hdu2952 Counting Sheep 2017-01-18 14:56 44人阅读 评论(0) 收藏
Counting Sheep Time Limit : 2000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Tota ...
- C++中的关键字用法---typename
1. typename 关键字 "typename"是一个C++程序设计语言中的关键字.当用于泛型编程时是另一术语"class"的同义词.这个关键字用于指出模板 ...
- shell中的重定向(输入输出)
注意:不同版本的Linux会有所区别,不过大同小异 Linux 命令默认从标准输入设备(stdin)获取输入,将结果输出到标准输出设备(stdout)显示.一般情况下,标准输入设备就是键盘,标准输出设 ...
- nodejs express hi-cms
今天看一下hi-cm是怎么写的,理解一下流程,看一些亮点 它使用express3.x写的 1.app.set, app.get app.set('port', 3000); app.get('port ...
- js 面向对象 继承机制
根据w3cschool上的描述:共有3种继承方法(对象冒充,原型链,混合) 1.对象冒充:构造函数ClassA使用this关键字给所有属性和方法赋值,使ClassA构造函数成为ClassB的方法,调用 ...
- php连接微软MSSQL(sql server)完全攻略
http://www.jb51.net/article/98364.htm php连接微软MSSQL(sql server)完全攻略 作者:吵吵 字体:[增加 减小] 类型:转载 时间:2016-11 ...
- easyui-combobox url绑定后台json数据问题
<input id="line" name="line" style="max-width:120px;" class="e ...
- C#计算机性能参数
Process proc = Process.GetCurrentProcess(); //string info = "内存:" + (Environment.WorkingSe ...
- Hessian——轻量级远程调用方案
Hessian是caucho公司开发的一种基于二进制RPC协议(Remote Procedure Call protocol)的轻量级远程调用框架.具有多种语言的实现,但用的最多的当然是Java实现 ...