<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>金击子智能终端-交易室</title>

    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>

    <meta name="description" content="">

    <meta name="keywords" content="">

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

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

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

    <link href="css/jys.css" rel="stylesheet"></head>

<body>

    <div class="wrapper">

        <div class="header">交易室</div>

        <div class="notice">

            <div class="left">声明</div>

            <div class="right">

                我们贯彻中立的角色，不倾向于任何金融产品，从客户的利益出发。我们从环球金融市场中挑选优秀的理财产品，构建最适合客户的投资组合方案。我们致力成为亚洲区内其中一间最具规模的独立理财顾问公司。

            </div>

        </div>

        <div class="checkbox">

            <div class="vip1">

                <div class="c-header">

                    <img src="data:images/header2.png" class="header-img">普通会员</div>

                <div class="content">

                    <div class="name">

                        <img src="data:images/icon1.png">

                        <span>交易圈</span>

                        <input type="checkbox" ></div>

                    <div class="name">

                        <img src="data:images/icon1.png">

                        <span>YY同步</span>

                        <input type="checkbox" ></div>

                </div>

                <div class="content">

                    <div class="name">

                        <img src="data:images/icon1.png">

                        <span>牛牛挂单</span>

                        <input type="checkbox" ></div>

                    <div class="name">

                        <img src="data:images/icon1.png">

                        <span>掌上分析师</span>

                        <input type="checkbox" ></div>

                </div>

            </div>

        </div>

        <div class="checkbox">

            <div class="vip1">

                <div class="c-header c-header2">

                    <img src="data:images/header.png" class="header-img">VIP会员</div>

                <div class="content">

                    <div class="name">

                        <img src="data:images/icon1.png">

                        <span>早/晚内参</span>

                        <input type="checkbox" disabled="disabled" ></div>

                    <div class="name">

                        <img src="data:images/icon1.png">

                        <span>金点股</span>

                        <input type="checkbox"  disabled="disabled"></div>

                </div>

                <div class="content">

                    <div class="name">

                        <img src="data:images/icon1.png">

                        <span>蝴蝶指标</span>

                        <input type="checkbox"  disabled="disabled"></div>

                    <div class="name">

                        <img src="data:images/icon8.png">

                        <span>财迷广播</span>

                        <input type="checkbox"  disabled="disabled"></div>

                </div>

                <div class="content">

                    <div class="name">

                        <img src="data:images/icon1.png">

                        <span>大事件</span>

                        <input type="checkbox" disabled="disabled" ></div>

                    <div class="name">

                        <img src="data:images/icon1.png">

                        <span>神算子</span>

                        <input type="checkbox"  disabled="disabled"></div>

                </div>

                <div class="content">

                    <div class="name">

                        <img src="data:images/icon1.png">

                        <span>盈利种子</span>

                        <input type="checkbox"  disabled="disabled" ></div>

                    <div class="name">

                        <img src="data:images/icon1.png">

                        <span>邮币卡</span>

                        <input type="checkbox"  disabled="disabled" ></div>

                </div>

            </div>

        </div>

        <div class="r-more">

            <a href="">确定选择</a>

        </div>

    </div>

</body>

</html>

<script type="text/javascript">

    function more(){

        alert(1);

        this.innerHTML='1';

    }

    $(function () {

        $(".wrapper .record .r-main .r-more a").attr('ontouchstart', 'hover(this)');

        $(".wrapper .record .r-main .r-more a").attr('ontouchend', 'mouseout(this)');

    })

    $('input:checkbox').each(function(){

        var _disable = $(this).attr("disabled");

        if(_disable == 'disabled'){

            $(this).css({'background':'url(images/disable.png) 0px 0px /  0.8rem 0.8rem'})

        }

       $(this).click(function(){

        var _check = $(this).is(':checked')

            if(_check == true){

                $(this).addClass('checked')

            }else if(_check == false){

                $(this).removeClass('checked')

            }

       })

    })

</script>

jquery

<script type="text/javascript">

    function more(){

        alert(1);

        this.innerHTML='1';

    }

    $(function () {

        $(".wrapper .record .r-main .r-more a").attr('ontouchstart', 'hover(this)');

        $(".wrapper .record .r-main .r-more a").attr('ontouchend', 'mouseout(this)');

    })

    $('input:checkbox').each(function(){

        var _disable = $(this).attr("disabled");

        if(_disable == 'disabled'){

            $(this).css({'background':'url(images/disable.png) 0px 0px /  0.8rem 0.8rem'})

        }

       $(this).click(function(){

        var _check = $(this).is(':checked')

            if(_check == true){

                $(this).addClass('checked')

            }else if(_check == false){

                $(this).removeClass('checked')

            }

       })

    })

</script>

　　

jquery模拟checkbox效果，以及background-size在jquery中的使用。的更多相关文章

  1. 利用jquery模拟select效果

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

  2. C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  3. 基于jquery横向手风琴效果

    基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash&quo ...

  4. jQuery实现模拟滚动条效果；

    滚动条在web开发中,很常见,原生的HTML滚动条很难看,因此很多网站借助JS来模拟实现滚动条效果: 滚动条的实现原理其实比较简单,拿垂直滚动条来说: 1),最外层容器需要设置overflow:hid ...

  5. Jquery模拟多选框(checkbox)

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  6. jquery模拟下拉框单选框复选Select，Checkbox，Radio

    在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们:如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&qu ...

  7. jQuery效果之封装模拟placeholder效果，让低版本浏览器也支持

    页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...

  8. 手机端touch事件 jquery模拟

    ontouchstart实现手机触屏中的hover效果 ontouchstart实现手机触屏中的hover效果 最近一直都在做手机网站的项目,会经常遇到手机屏幕触摸无交互效果,今天在一篇文章中看到模拟 ...

  9. jQuery模拟原生态App上拉刷新下拉加载

    jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...

随机推荐

  1. css3 content画出各种图形

    原链接:http://www.phpjz.cn/web/201311/1700.html 之前看到一些网站用户content这个词,觉得很奇怪,原来是css3新增的一个样式,发现还挺好用的,特别是用移 ...

  2. .net 调用Oracle.Data.Access 组件提供的用于批量操作的方法—获取数据库表结构方法和跟参数赋值方法

    1./// <summary> /// 获取当前目标表结构 /// </summary> /// <param name="tableName"> ...

  3. cocos2dx 音效 粒子 数据存储

    1.音效 引入头文件 #include "simpleAudioEngine.h" 命名空间 using namespace CocosDenshion; //创建一个背景 Siz ...

  4. MYSQL 磁盘临时表和文件排序

    因为Memory引擎不支持BOLB和TEXT类型,所以,如果查询使用了BLOB或TEXT列并且需要使用隐式临时表,将不得不使用MyISAM磁盘临时表,即使只有几行数据也是如此. 这会导致严重的性能开销 ...

  5. xml解析，练习

    <collection shelf="New Arrivals"><movie title="Enemy Behind">   < ...

  6. 关于jquery-easyUI中主键属性data-options的了解

    data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性.通过这个属性,我们可以对easyui组件的实例化可以完全写入到html中,例如: <div class=& ...

  7. uva201 Squares

     Squares  A children's board game consists of a square array of dots that contains lines connecting ...

  8. 灯塔(LightHouse)

    Description As shown in the following figure, If another lighthouse is in gray area, they can beacon ...

  9. /users/products.:format 这种写法的其对应解析字符写法

    “products.:format" 这种写法可以有对应的下面两种路由形式 /products.json /products.xml "products.:format?" ...

  10. OC和C语言的混编注意点和好处

    苹果的Objective-C编译器批准用户在统一个源文件里自由地混杂利用C++和Objective-C,混编后的语言叫Objective-C++.有了它,你就能够在Objective-C利用过程中利用 ...