<强> 1。结构:
& lt; div类=" box1 "比;
& lt;输入/比;
& lt; div类=癰ox2”比;
& lt; img/比;
& lt;/div>
& lt;/div>
<强> 2. css里:
1)设置图片的div绝对定位,调整让它与原始输入重合。
2)设置输入的宽高与图片的div一样大,这样精确一点。
3)然后设置输入:位置:相对,再设置它的z - index,让它浮在图片那个div的上面。
4)调整两个的位置,让之重合。
5)设置输入:不透明度:0;
<强> 3.金桥里:
$(函数(){
$("输入").click(函数(){
如果(this.checked) {
(美元).siblings (“.box2”); (img) .attr (“src”、“被选中的图片的src ");
其他}{
(美元).siblings (“.box2”); (img) .attr (“src”、“未被选中的图片的src ");
}
})
})
<强>
无线电修改默认样式也是同样的道理,但是在金桥里就要改一些东西了,
如果想点击第一个无线电之后,再点击同一个名字的广播,它被选中之后,第一个无线电背景变为没选中,而第二个电台背景变为被选中,还用上面的金桥里的代码是不能实现的,会出现第一个选中之后,再点第二个会让两个的背景都是被选中的图片。
所以要在判定是否被选中的时候,加上:
$(函数(){
$("输入").click(函数(){
$("输入"). each(函数(){
如果(this.checked) {
(美元).siblings (“.box2”); (img) .attr (“src”、“被选中的图片的src ");
其他}{
(美元).siblings (“.box2”); (img) .attr (“src”、“未被选中的图片的src ");
}
})
})
})
需要遍历一下输入
,由于项目的需要,需要在登录的时候保存用户名,就需要使用复选框。其中样的复选框式为给定的一张图片,非选中:
,,选中:
开始准备改变复选框的样式以达到目的,结果无终而返。因为复选框的大小,样式很难改变,反正打不到我想要的效果。于是试图通过用图片替换复选框的样式。
<强>主要知识点:
,(1)通过标签元素内点击图片,就会触控发复选框件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的复选框控件上。
& lt;输入类型=案囱】颉崩?" clsCheckBox " ID=" chkRememberPwd "/比;
& lt;标签=" chkRememberPwd "祝辞& lt; img src=" https://www.yisu.com/zixun/$ {ctx}/图片/多/selector_default.png”宽度==?8”/?8”高度祝辞& lt;/label>//复选框通过css设置为隐藏
.clsCheckBox {
显示:没有;
}
(2)点击图片时通过JS进行图片的切换。代码如下:
=true var结果;
函数复选框(){
如果(结果==true)
{
document.images [0]。src=" https://www.yisu.com/zixun/$ {ctx}/图片//selector_focus.png”;
结果=false;
}
else if(结果==false)
{
document.images [0]。src=" https://www.yisu.com/zixun/$ {ctx}/图片//selector_default.png”
结果=true;
}
}
登录页面代码:
& lt; !DOCTYPE html公共”——//W3C XHTML 1.0//DTD过渡//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”的在
& lt; html xmlns=" http://www.w3.org/1999/xhtml " xmlns=" http://www.w3.org/1999/html "比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title>用户登录& lt;/title>
& lt; script> history.forward (); & lt;/script>
& lt;脚本type=" text/javascript祝辞
函数func_key(事件){
如果事件。键码==13){
doLogin ();
}
}
函数清理(o) {
o.valuehttps://www.yisu.com/zixun/=?
o.style.textAlign=白蟆?
}=true var结果;
函数复选框(){
如果(结果==true)
{
document.images [0]。src=" https://www.yisu.com/zixun/$ {ctx}/图片//selector_focus.png”;
结果=false;
}
else if(结果==false)
{
document.images [0]。src=" https://www.yisu.com/zixun/$ {ctx}/图片//selector_default.png”
结果=true;
}
}
& lt;/script>
& lt;风格类型=" text/css "比;
.clsCheckBox {
显示:没有;
}
& lt;/style>
& lt;/head>
& lt;身体比;
& lt; div id="头"比;
& lt; div id=" headInfo "祝辞& lt; span>登录& lt;/span> & lt;/div>
& lt;/div>
& lt; form>
& lt;表类=皃artb”单元格间距=" 0 "单元格边距=" 0 "比;
& lt; tr类=皃artba”比;
& lt; td类=" partbb "在用户名& lt;/td>
& lt; td> & lt;输入name=" userClientNumber " id=皍serClientNumber”类=皃artbc”类型=拔谋尽奔壑?"/祝辞& lt;/td>
& lt;/tr>
& lt; tr类=" partbe "祝辞& lt;/tr>
& lt; tr类=皃artba”比;
& lt; td类=" partbb "祝辞密码& lt;/td>
& lt; td> & lt;输入name=" userPassword " id=皍serPassword”类=皃artbc”类型=懊苈搿奔壑?"/祝辞& lt;/td>
& lt;/tr>
& lt;/table>
& lt;表宽度=" 480 " border=" 0 "比;
& lt; tr> & lt; td> & lt;输入类型=案囱】颉崩?" clsCheckBox " ID=" chkRememberPwd "/比;
& lt;标签=" chkRememberPwd "祝辞& lt; img src=" https://www.yisu.com/zixun/$ {ctx}/图片/多/selector_default.png”宽度==?8”/?8”高度祝辞& lt;/label>
& lt;跨度比记住用户名& lt;/span> & lt;/td>
& lt; td祝辞& lt; a href=" https://www.yisu.com/zixun/modifyPassword ! load.action”祝辞& lt;跨在找回登录密码& lt;/span> & lt;/a> & lt;/td>
& lt;/tr>
& lt;/table>
& lt;表类=" partb " border=" 0 "比;
& lt; tr>
& lt; td宽度=" 240 "对齐=白蟆北?& lt; div类=癰ottondiv祝辞& lt;输入类=癷nputbotton”类型=鞍磁ァ奔壑?" https://www.yisu.com/zixun/登录”/祝辞& lt;/div> & lt;/td>
& lt; td宽度=" 240 "对齐=白蟆北?& lt; div类=癰ottondiv祝辞& lt;输入类=癷nputbotton”类型=鞍磁ァ奔壑?" https://www.yisu.com/zixun/注册”/祝辞& lt;/div> & lt;/td>
& lt;/tr>
& lt;/table>
& lt;/form>
& lt;/body>
& lt;/html>
