<!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. unison实时双向数据同步

    软件下载 ocamlopt下载地址:http://caml.inria.fr Unison下载地址:http://www.seas.upenn.edu/~bcpierce/unison 1.安装uni ...

  2. vi 快捷键【转】【weber整理必出精品】

    光标的移动 命令 光标移动 h或^h 向左移一个字符 j或^j或^n 向下移一行 k或^p 向上移一行 l或空格 向右移一个字符 G 移到文件的最后一行 nG 移到文件的第n行 w 移到下一个字的开头 ...

  3. html5新特性--音频视频，拖放

    1.音频 <audio controls> <source src="aaa.ogg" type="audio/ogg"> <so ...

  4. cocos2dx 音效 粒子 数据存储

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

  5. xampp集成安装的mysql修改密码(Window)

    把mysql安装目录bin文件夹加入环境变量 path:mysqlPath\bin; 或者进入mysql安装目录bin文件夹下,按住shift键盘鼠标右击进入命令行 键入命令 mysqladmin - ...

  6. javascript作用域和作用域链

    1.作用域 作用域,它是指对某一变量和方法具有访问权限的代码空间.当我们在定义变量的时候,会定义两种变量,一种是在全局环境下定义的变量,叫全局变量,一种是在函数中定义的变量叫局部变量.全局变量的作用域 ...

  7. EL表达式复习

    EL表达式格式: 格式1:${objName.attribute} 执行的过程为:从pageContext.request.session.application中依次查找绑定名为“user”的对象, ...

  8. sql 数据库备份还原脚本

    /**功能:数据库备份*dbname:数据库名称*bakname:备份名称,包含完整路径*/use master BACKUP DATABASE dbname TO disk='c:\bakName' ...

  9. Broadcom网卡linux系统下无法连接到网络问题（某种情况- -||）的解决办法

    国际惯例,先闲扯: 其实我是个电脑白痴,至于为什么一个电脑白痴会来做开发呢?原因非常匪夷所思且简单--“因为做开发看起来很酷!”,那为什么要一把年纪了才来做开发呢?原因更简单,“当我回过神,就发现我已 ...

  10. [CSAPP]并发与并行

    学了这么久的计算机,并发与并行的概念理解的一直不够透彻.考研复习那会儿,以为自己懂了,然而直到看了CSAPP才算是真正明白了这俩个概念. 并发(concurrency) 流X和流Y并发运行是指,流X在 ...