用图片制作radio单选按钮

最新推荐文章于 2022-10-27 11:39:49 发布

fenglin247

最新推荐文章于 2022-10-27 11:39:49 发布

阅读量3.5k

点赞数 1

分类专栏： HTML CSS JavaScript 文章标签： HTML CSS JavaScript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/fenglin247/article/details/94884981

版权

本文介绍如何利用HTML、CSS和JavaScript，通过设置透明背景图片来实现自定义的radio单选按钮效果。通过CSS调整图片位置和大小，JavaScript处理点击事件以切换选中和未选中状态。

摘要由CSDN通过智能技术生成

用图片制作radio单选按钮

找两张背景透明的图片作为“未选中”和“选中”状态的单选按钮：

定义一个单选按钮组：

<div class="rds">
    性别：
    <label><input name="r1" type="radio" value="男">男</label>

最低0.47元/天解锁文章

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

fenglin247 CSDN认证博客专家 CSDN认证企业博客

码龄6年

14: 原创

75万+: 周排名

112万+: 总排名

6万+: 访问

: 等级

778: 积分

20: 粉丝

60: 获赞

23: 评论

209: 收藏

私信

关注

热门文章

分类专栏

JavaScript 10篇
HTML 2篇
CSS 7篇

最新评论

用JS解析LRC格式的歌词
言诚356: niu
用JS实现歌词与播放音乐同步
小白要努力变黑: 调了调拖动播放时，歌词的改变。不知道这样可以吗？还有没有更好的方法？ [code=javascript] audio.onseeked = function() { var curTime = audio.currentTime; //播放器时间 for(i = 0; i < oLRC.ms.length; i++) { if(oLRC.ms[i].t <= curTime) { /*播放器往回拖*/ if(i == oLRC.ms.length - 1) { //歌词已经播放完，只剩音乐，直接跳到最后一句歌词 lineNo = i; //需要高亮的行 break; } if(oLRC.ms[i + 1].t < curTime) { //如果前一个时间也小于播放器时间，就继续循环 continue; } else { if(i < C_pos * 2) { //当前行，小于最初展示的数据，直接跳到展示到开头 ul.style.transform = "translateY(0)"; } lineNo = i; //需要高亮的行 break; } /*播放器往前拖*/ } else { lineNo = i; //需要高亮的行 break; } } document.querySelector("#lyric .lineHigh").removeAttribute("class"); //消除之前的高亮 lineHigh(); //高亮当前行 }; [/code]
用JS实现歌词与播放音乐同步
小白要努力变黑: 我调了调之前的拖拽播放，不知道可以吗？有没有什么更好的方法吗？ [code=javascript] audio.onseeked = function() { var curTime = audio.currentTime; //播放器时间 for(i = 0; i < oLRC.ms.length; i++) { if(oLRC.ms[i].t <= curTime) { /*播放器往回拖*/ if(i == oLRC.ms.length - 1) { //歌词已经播放完，只剩音乐，直接跳到最后一句歌词 lineNo = i; //需要高亮的行 break; } if(oLRC.ms[i + 1].t < curTime) { //如果前一个时间也小于播放器时间，就继续循环 continue; } else { if(i < C_pos * 2) { //当前行，小于最初展示的数据，直接跳到展示到开头 ul.style.transform = "translateY(0)"; } lineNo = i; //需要高亮的行 break; } /*播放器往前拖*/ } else { lineNo = i; //需要高亮的行 break; } } document.querySelector("#lyric .lineHigh").removeAttribute("class"); //消除之前的高亮 lineHigh(); //高亮当前行 }; [/code]
用JS实现歌词与播放音乐同步
菩萨保佑不要报错: b应该放什么
用JS解析LRC格式的歌词
菩萨保佑不要报错: ajax要异步要不然获取的数组长度就为0

大家在看

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。