模仿淘宝商品选择颜色和尺寸的效果，即选择商品颜色和尺寸的时候，把选择的颜色和尺寸放到一个页面容器里面，不足之处，还望指教。

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

<style type="text/css">

.ibWrapper{font-size:0;letter-spacing:-1px;}

.ib{font: 12px/18px arial;display:inline-block;}

.selectedcolor span{display:block;width:10px;height:10px;}

</style>

    <script type="text/javascript" src="jquery_v1.7.2.js"></script>

<script type="text/javascript">

$(document).ready(function (){//注意修改jquery的路径

    var sRGBToHex  = function (str){

        if (str.search(/rgb/i) === -1){//兼容ie6-8，它们的颜色值本身就是16进制的

            return str;

        }

        var result = "#";

        str = str.replace(/rgba?\((.*)\)/gi,"$1");

        aStr = str.split(",");

        for (var i=0; i<3; i++){//这里直接写了3，是因为标准浏览器的色彩值可能包含透明度信息，例如RGBA(0,255,30,0.5)

            var iColorAlpha = +aStr[i];

            if (iColorAlpha < 16){

                result += "0" + iColorAlpha.toString(16);

            }else{

            result += iColorAlpha.toString(16);

            }

        }

        return result;

    }

    $("#colorList input").click(function (){

        var _this = $(this);

        if ($(this).is(":checked")){

            var oSelectedElement = $("<div class='selectedcolor ib' ></div>");

            oSelectedElement.text($(this).parent().text());

            $("<span>").appendTo(oSelectedElement).end().css("backgroundColor",function (){

                return _this.attr("value");

            });

            oSelectedElement.appendTo($("#selectedColorList"));

        }else{

            $(".selectedcolor span").each(function (i){

                if (sRGBToHex($(this).css("backgroundColor")) === _this.attr("value")){

                    $(this).parent().remove();

                }

            })

        }

    })

})

</script>

</head>

<body>

    <div id="colorList">

        <form action="#" method="post">

            <label ><input type="checkbox" name="temp_color" id="color1" value="#ff0000"/>红色</label>

            <label ><input type="checkbox" name="temp_color" id="color2" value="#ffff00"/>黄色</label>

            <label ><input type="checkbox" name="temp_color" id="color3" value="#00ff00"/>绿色</label>

            <label ><input type="checkbox" name="temp_color" id="color4" value="#0000ff"/>蓝色</label>

        </form>

    </div>

    <div id="selectedColorList" class="ibWrapper">        

    </div>

</body>

</html>

仿淘宝颜色属性选择展示代码（jQuery）的更多相关文章

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

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

  2. Vue实现仿淘宝商品详情属性选择的功能

    Vue实现仿淘宝商品详情属性选择的功能 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下:   attrA ...

  3. 原生js仿淘宝手机购买选项代码

    这是一款基于原生js实现仿淘宝手机信息购买选项效果源码,界面整体效果仿照淘宝购物选项设计,点击不同选项还可实时显示不同的价格计算结果,界面简洁大方.美观实用.可兼容目前最新的各类主流浏览器. 在线演示 ...

  4. JS仿淘宝详情页菜单条智能定位效果

    类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...

  5. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...

  6. 高仿淘宝和聚美优品商城详情页实现《IT蓝豹》

    高仿淘宝和聚美优品商城详情页实现 android-vertical-slide-view高仿淘宝和聚美优品商城详情页实现,在商品详情页,向上拖动时,可以加载下一页. 使用ViewDragHelper, ...

  7. android版高仿淘宝客户端源码V2.3

    android版高仿淘宝客户端源码V2.3,这个版本我已经更新到2.3了,源码也上传到源码天堂那里了,大家可以看一下吧,该应用实现了我们常用的购物功能了,也就是在手机上进行网购的流程的,如查看产品(浏 ...

  8. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

  9. 仿淘宝左侧菜单导航栏纯Html + css 写的

    这俩天闲来没事淘宝逛了一圈看到淘宝的左侧导航菜单做的是真心的棒啊,一时兴起,查了点资料抓了几个图片仿淘宝写了个css,时间紧写的不太好,大神勿喷,给小白做个参考 废话不多说先来个效果图 接下来直接上代 ...

随机推荐

  1. selenium启动firefox、ie、chrome各浏览器方法

    1.启动firefox浏览器 a.如果你的本地firefox是默认路径安装的话,如下方式即可启动浏览器 WebDriver driver = new FirefoxDriver(); driver.g ...

  2. springmvc笔记(来自慕课网)

    1.准备工作:springmvc相关的jar包. 2.这里我们先用eclipse来操作. 首先看一个接口编程,后面的所有知识点都是通过这个接口编程引出的. OneInterface.java pack ...

  3. nginx 反向代理（Reverse Proxy）与耗时记录

    反向代理服务器位于实际的服务器之前,他能够缓存服务器响应,加速访问,同时也启到了负载均衡服务器的效果.反向代理服务器解析客户端请求,根据负载均衡算法转发到不同的后台服务器上.用户和后台服务器之间不再有 ...

  4. Mingyang.net：注解配置Hibernate时报错Unknown Entity

    注解配置时报错:org.hibernate.MappingException: Unknown entity: net.mingyang.cms.bean.User org.hibernate.Map ...

  5. python 赋值,交换值理解

    python里的赋值都是引用,第一次赋值就是定义. 看下面两个交换值的例子: 1. >>> a,b,c = 1,2,3 >>> a = b >>> ...

  6. windows 测试数据库的连接状况-udl方法

    udl是windows系统上,用于测试数据库的连接状态的测试软件. 使用方法: 1.建立一个空白文本 2.将文件的后缀名更改为*.udl 即可     文件内容一定为空 3.选择windows的“提供 ...

  7. [转]整理索引碎片，提升SQL Server速度

    数据库表A有十万条记录,查询速度本来还可以,但导入一千条数据后,问题出现了.当选择的数据在原十万条记录之间时,速度还是挺快的:但当选择的数据在这一千条数据之间时,速度变得奇慢. 凭经验,这是索引碎片问 ...

  8. SDUT 3311 数据结构实验之串三：KMP应用

    数据结构实验之串三:KMP应用 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 有n个小朋友 ...

  9. 反向生成hbm.xml

    选择数据库透视图 打开数据连接 打开刚刚创建的连接,然后打开用户名下的表 这个就是she用户下的表,我们选中要反向生成的表,可以多选,然后点击右键 点击Hibernate Reverse Engine ...

  10. MVC session过期如何处理跳转

    以前我们总是会写一个基类也叫父类来判断session是否已过期然后跳转到指定的错误页面或者登陆界面,然后让所有的页面都继承这个基类,但是当我们应用到MVC项目中时,发现该方法并不会起作用.这时我们可以 ...