收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 14950|回复: 15

[教程] 用图片模拟checkbox,简简单单。

[复制链接]
发表于 2007-5-19 10:04:34 | 显示全部楼层 |阅读模式
相信大家一下就能看明白,还是书签的应用,这里IE表现比较笨,要用到onclick。。

另一种CSS的方法。(需要CSS2、3的部分支持)


例子:(FF下代码另存为查看)

 提示:您可以先修改部分代码再运行




将 checkbox 拿出来,大家看着直观点。

 提示:您可以先修改部分代码再运行


[[i] 本帖最后由 snwebsite 于 2007-5-19 10:12 编辑 ]
bg1.gif
bg2.gif
bg3.gif

评分

参与人数 1威望 +2 收起 理由
jxdawei + 2 好创意!

查看全部评分

发表于 2007-5-19 10:29:02 | 显示全部楼层
妙哉妙哉~
真是创意无限,大赞
回复 支持 反对

使用道具 举报

发表于 2007-5-19 11:32:52 | 显示全部楼层
不错,不过禁用JS后就郁闷了。。
回复 支持 反对

使用道具 举报

发表于 2007-5-19 16:20:49 | 显示全部楼层
我以前也模拟过radio

[[i] 本帖最后由 huerreson 于 2007-5-19 16:28 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2007-5-19 16:33:05 | 显示全部楼层

早期我的版本

 提示:您可以先修改部分代码再运行


[[i] 本帖最后由 huerreson 于 2007-5-19 16:35 编辑 ]
checked.gif
unchecked.gif
回复 支持 反对

使用道具 举报

发表于 2007-5-19 23:20:03 | 显示全部楼层
局限性:

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2007-5-21 10:02:47 | 显示全部楼层
没必要,何必呢!
回复 支持 反对

使用道具 举报

发表于 2007-5-21 10:34:12 | 显示全部楼层
创意是蛮好的,呵呵实用性上还需要想想办法,正如6楼举的那个例子,由于利用锚点的原因,只要锚点不处于浏览器可视区域的最顶端,而锚点后面的内容大于一屏高度,那么就会出现跳跃现象。
回复 支持 反对

使用道具 举报

发表于 2007-5-21 14:38:52 | 显示全部楼层
第一次使用总是慢慢的,不真实!
回复 支持 反对

使用道具 举报

发表于 2007-7-8 14:33:13 | 显示全部楼层
怎么不能兼容两个或以上的checkbox 啊?
回复 支持 反对

使用道具 举报

发表于 2007-7-8 14:36:06 | 显示全部楼层
学习中,收藏研究
回复 支持 反对

使用道具 举报

发表于 2008-11-28 10:19:19 | 显示全部楼层
多个checkbox呢 怎么弄啊
回复 支持 反对

使用道具 举报

发表于 2010-4-19 11:09:50 | 显示全部楼层
这个实用性不强,当连续快速的点击时,会出现显示的图标与checkbox input状态不同步现象
回复 支持 反对

使用道具 举报

发表于 2010-4-19 11:37:00 | 显示全部楼层
网上有JS的插件。
回复 支持 反对

使用道具 举报

发表于 2010-4-19 11:43:28 | 显示全部楼层
是个不错的创意想法我感觉不是很实用再说可能在兼容上海有些问题,那样就划不来了。
回复 支持 反对

使用道具 举报

发表于 2010-4-19 14:42:20 | 显示全部楼层
这跟以前有个帖子的创意一样,记得是个很早的帖子,不过实用性不强。ls也说了,多个怎么办呢???
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-8-23 02:33 , Processed in 0.203584 second(s), 12 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表