<!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. 让DIV垂直居中的几种办法

    1.使用CSS3 的伸缩盒布局 <!doctype html> <html> <head> <meta charset="utf-8"&g ...

  2. post请求和get请求的区别

    1:如果表单是以post方式发送,那么表单中的数据会放在请求报文体中,发送到服务端.但是如果是以get方式提交表单,那么表单中用户输入的数据都是以URL地址的方式发送到服务端. 2:在服务端接收数据时 ...

  3. QQ在线联系代码

    添加图文模块,标题地址:tencent://message/?uin=你的QQ号&Site=myqq&Menu=yes "你的QQ号"就写您自己的Q号 图片地址写: ...

  4. linux安装rz和sz

    rz命令是用来上传文件 sz命令是用来下载文件 1.系统安装了yum 以root用户登录: yum install lrzsz -y 2.没有安装yum 以下地址中有详解 http://jingyan ...

  5. [Database] Deadlock avoidance protocol

    如何避免Deadlock,如果我们能提前知道各个Process对于资源的需求情况,我们就可以用Banker's algorithm (银行家算法) 来解决问题.可是这在现在中不好实现,因为很难提前知道 ...

  6. redis的特色

    总结一下redis的特点: 1.独特的键值对模型 很多数据库只能处理一种数据结构:     • SQL 数据库 —— 表格     • Memcached —— 键值对数据库,键和值都是字符串     ...

  7. Java系列--第二篇 基于Maven的Android开发HelloAndroidWorld

    曾经写过一篇Android环境配置的随笔,个人感觉特繁琐,既然有Maven,何不尝试用用Maven呢,经网上搜索这篇文章但不限于这些,而做了一个基于Maven的Android版的Hello Andro ...

  8. C语言中关于字符串的一些常用函数

    使用以下时应当在头文件中加入string.h getch()为当你键入任何一个值时,返回但是并不显示,立马编译结束,返回的是asc码  getchar():当你键入回车之后才算是输入结束,并且可以用p ...

  9. angular--bootstrap实例日期控件【datepicker】

    head部分: <!--Bootstrap--> <link rel="stylesheet" href="/supProdom/script/boot ...

  10. 鼠标点击变色 lvha

    a标签有四个"状态"的先后过程是:a:link ->a:hover ->a:active ->a:visited.另外,a:active不能设置有无下划线(总是有 ...