html5+css3

2024-07-01 00:45| 来源: 网络整理| 查看: 265

html5+css3-图片切换

html5+css3-图片切换在这里插入图片描述两种方法实现点击切换背图片的一个效果 1、label+input标签可以实现利用inpu type=radio属性和label的for属性结合起来可以实现图片的一个切换

遇到的一些问题： radio默认按钮的隐藏：

溢出隐藏 width:0px; height:0px; overflow:hidden; 修改样式 ``

2、js监听事件实现定义id，获取id，绑定监听器

2 var a1 = document.getElementById('ch1'); a1.onclick =function(){ bgimg.src="img/2.jpg"; }

遇见的问题：

[1] 粗心：把src属性写到div上去了，找了半天发现点击读不出图片，src也是undefined，后来朋友跟我说了一句你怎么把src放div上去了，才突然看见，以后多注意[2] 关于js有了一个基础的了解[3] button的伪类:hover修饰按钮的样式，点击后的样式:focus button:hover{ color: greenyellow; background: rgba(255,255,255,0.1); } button:focus{ outline:0; } [4] backgroud-size一个比较好用的属性cover，等比例裁剪覆盖

相关资源已上传，可自行下载研究

【本文地址】

公司简介

联系我们