<!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. (转) 值不能为空。参数名viewinfo(microsoft.sqlserver.management.sqlstudio.explorer)

    打开MSSQL 2008 R2的时候,展开数据库都显示以下的错误提示: 值不能为空.参数名viewinfo(microsoft.sqlserver.management.sqlstudio.explo ...

  2. (转)sql语句中charindex的用法

    假如你写过很多程序,你可能偶尔会碰到要确定字符或字符窜串否包含在一段文字中,在这篇文章中,我将讨论使用CHARINDEX和PATINDEX函数来搜索文字列和字符串.我将告诉你这两个函数是如何运转的,解 ...

  3. memcached session共享

    http://www.baidu.com/s?wd=memcached%20session%E5%85%B1%E4%BA%AB&rsv_spt=1&issp=1&f=8& ...

  4. Asp.net中实现同一用户名同时登陆，注销先前用户(转)

    Web 项目中经常遇到的问题就是同一用户名多次登陆的问题,相应的解决办法也很多,总结起来不外乎这几种解决办法:将登陆后的用户名放到数据库表中:登陆后的用 户名放到Session中:登陆后的用户名放到A ...

  5. CC开发问题一

    CC编译成功,启动失败,debug状态下报错如下,未能加载文件或程序集 这个问题查了一些资料,http://blog.csdn.net/shellching/article/details/82947 ...

  6. hdu2488 dfs

    G - 深搜 基础 Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:65536KB     64bi ...

  7. hdu 1232畅通工程

    Problem Description 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府"畅通工程"的目标是使全省任何两个城镇间都可以实现交通 ...

  8. [Leetcode] Merge Sorted Array (C++)

    我在Github上新建了一个解答Leetcode问题的Project, 大家可以参考, 目前是Java 为主,里面有leetcode上的题目,解答,还有一些基本的单元测试,方便大家起步. 题目: Gi ...

  9. 35个jQuery小技巧(转)

    1. 禁止右键点击$(document).ready(function(){    $(document).bind("contextmenu",function(e){     ...

  10. 高效的jQuery代码编写技巧总结

    最近写了很多的js,虽然效果都实现了,但是总感觉自己写的js在性能上还能有很大的提升.本文我计划总结一些网上找的和我本人的一些建议,来提升你的jQuery和javascript代码.好的代码会带来速度 ...