用js写出一个漂亮的单选框选中效果
一般的input框比较简单,我们可以用JavaScript配合css背景图片定位让我们模拟写出一个点击选中效果
首先需要有个图片素材,当页面加载的时候是背景图片定位到左图,当我们点击图片的时候,背景图片定位到右图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css"> .check_box{
height: 20px;
width: 20px;
display: block; background: url("images/shop-icon.png") no-repeat;
background-size: 50px 100px;
}
/*属性选择器*/
.check_box[checked]{
background-position: -25px 0;
}
</style>
</head>
<body>
<span class="check_box"></span> <script type="text/javascript">
var checkBtn = document.getElementsByClassName('check_box');
for(var j = 0 ; j < checkBtn.length; j++){
checkBtn[j].onclick = function(){
var hasChecked = this.getAttribute('checked');
if(hasChecked !== null){
this.removeAttribute('checked');
}else{
this.setAttribute('checked',' ');
}
}
}
</script> </body>
</html>
用js写出一个漂亮的单选框选中效果的更多相关文章
- JS函数 编程练习 使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数。
编程练习 使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数. 任务 第一步: 编写代码完成一个函数的定义吧. 第二步: 我们来补充函数体中的控制语句,完成函数功能吧. 提示: ...
- 输入一个数字n 如果n为偶数则除以2,若为奇数则加1或者减1,直到n为1,求最少次数 写出一个函数
题目: 输入一个数字n 如果n为偶数则除以2,若为奇数则加1或者减1,直到n为1,求最少次数 写出一个函数 首先,这道题肯定可以用动态规划来解, n为整数时,n的解为 n/2 的解加1 n为奇数时 ...
- java————数组 简单写出一个管理系统
数组的特点 1, 数组是一块连续的空间,下标描述空间的位置. 2, 下标从0开始,最大下标为数组长度—1.(*.length-1) 3, 数组元素都是变量.(就是每个下标对应的内容).变量的类型 ...
- 如何写出一个让人很难发现的bug?
程序员的日常三件事:写bug.改bug.背锅.连程序员都自我调侃道,为什么每天都在加班?因为我的眼里常含bug. 那么如何写出一个让(坑)人(王)很(之)难(王)发现的bug呢? - 1 -新手开发+ ...
- 浅谈如何写出一个让(坑)人(王)很(之)难(王)发现的bug
该文章内容来自脚本之家,原文链接:https://www.jb51.net/news/598404.html 程序员的日常三件事:写bug.改bug.背锅.连程序员都自我调侃道,为什么每天都在加班?因 ...
- 请写出一个超链接,点击链接后可以向zhangsan@d-heaven.com发送电子邮件。
请写出一个超链接,点击链接后可以向zhangsan@d-heaven.com发送电子邮件. <a href=”mailto: zhangsan@d-heaven.com”>发邮件</ ...
- 用vue.js写的一个瀑布流的组件
用vue.js写的一个瀑布流的组件:https://segmentfault.com/a/1190000010741319 https://www.jianshu.com/p/db3cadc03402
- 2019-8-31-C#-如何写出一个不能被其他程序集继承的抽象类
title author date CreateTime categories C# 如何写出一个不能被其他程序集继承的抽象类 lindexi 2019-08-31 16:55:58 +0800 20 ...
- C# 如何写出一个不能被其他程序集继承的抽象类
我需要限定某个抽象类只能在我程序集类实现,而不支持其他程序集实现,也就是我需要一个不能被继承的抽象类 在 C# 里面有抽象类和接口,这两个都是期望被继承才能被使用,而抽象类是可以做到只能在自己程序集和 ...
随机推荐
- MODIS系列之NDVI(MOD13Q1)四:MRT单次及批次处理数据
前言: 本篇文章的出发点是因为之前接触过相关研究,困囧于该系列资料匮乏,想做一个系列.个人道行太浅,不足之处还请见谅.愿与诸君共勉. 数据准备: MODIS数据产品MOD13Q1—以2010年河南省3 ...
- Codeup 25594 Problem H 例题5-8 Fibonacci数列
题目描述 输入一个正整数n,求Fibonacci数列的第n个数.Fibonacci数列的特点:第1,2个数为1,1.从第3个数开始,概述是前面两个数之和.即: 1,1,2,3,5,8,13,21 - ...
- Python财经数据接口包TuShare的使用
安装TuShare 方式1:pip install tushare 方式2:访问https://pypi.python.org/pypi/tushare/下载安装 方式3:将源代码下载到本地pytho ...
- 跨域cookies 共享
这是由于,本地调试.涉及到cookies的问题 想要跨域使用的问题 vue 中的mian.js中放入下面代码 import axios from 'axios' axios.defaults.with ...
- AJ学IOS 之CoreLocation基本使用
猫猫分享,必须精品AJ 一:CoreLocation的基本使用 使用步骤: 首先导入头文件#import <CoreLocation/CoreLocation.h> 1.创建CoreLoc ...
- 第十三节:telnetlib、redis、threading模块
telnetlib模块案例: import telnetlib,re class TelnetInfo(): def telnetdo(self, host, port, command): tn = ...
- 如何让一张图片变成二值图像?python+opencv图像处理
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:张熹熹 PS:如有需要Python学习资料的小伙伴可以加点击下方链接自 ...
- E1. Send Boxes to Alice (Easy Version)
题解: 保存每个1的位置.然后记录1的总个数cnt,如果存在一个k使得这个k是每个集合的倍数,那么为了使操作次数最小,这个k应该是cnt的质因子.(因为都是每个集合的数目1,使每个集合的数目变为2需要 ...
- jdk动态代理:由浅入深理解mybatis底层
什么是代理 代理模式,目的就是为其他对象提供一个代理以控制对某个对象的访问,代理类为被代理者处理过滤消息,说白了就是对被代理者的方法进行增强. 看到这里,有没有感觉很熟悉?AOP,我们熟知的面向切面编 ...
- shift后门
shift快捷 Windows的粘滞键------C:\windows\system32\sethc.exe,它本是为不方便按组合键的人设计的 Windows系统按5下shift后,Windows就执 ...