onclick事件

最新推荐文章于 2023-10-27 15:05:08 发布

一个想做架构师的前端开发学生

最新推荐文章于 2023-10-27 15:05:08 发布

阅读量905

点赞数

分类专栏： javascript事件总结文章标签： javascript html5 css 前端

本文链接：https://blog.csdn.net/M_ik_Z/article/details/117083578

版权

javascript事件总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、鼠标的单击事件：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		button{
			width: 100px;
			height: 50px;
			text-align: center;
			line-height: 50px;
		}
	</style>
<body>
	<button>点击会有惊喜</button>
	<script>
		// 使用onclick（鼠标单击事件）
		document.querySelector('button').onclick = function (){
			alert('关注博主，带你感受不一样的JavaScript！！！')
		}		// 结果是：单击按钮，网页弹出内容。
	</script>
</body>
</html>

二、换肤案例：

简单的换肤案例就是通过单击图片给背景更换背景图，需要采用JavaScript的单击事件。

换肤代码示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			font-size: 0; /*目的是为了取消图片之间的间隔*/
		}
		body{
			transition: all 1s;
		}
		.class{
			width: 1400px;
			background-color: rgba(0, 0, 0, .5);
			margin: 0 auto;
		}
		.class img{
			width: 280px;
			margin-left: 20px;
			cursor: pointer;	/* 鼠标移动到图片上，会变成小手 */
			border-radius: 10px; /* 设置图片的圆角 */
		}
		.class :first-child{
			margin-left: 110px;
		}
		.active{
			/* border: 2px solid blue;	设置一个蓝色实线，2px的边框 */ 
			transition: all 1s;
			transform: scale(1.1);
		}
	</style>
<body>
	<div class="class">
		<img src="images/bg1.jpeg" alt="">
		<img src="images/bg2.jpeg" alt="">
		<img src="images/bg3.jpeg" alt="">
		<img src="images/bg4.jpeg" alt="">
	</div>
	<script>
		// 设置默认的背景是第一张图片。
		document.body.style.backgroundImage = 'url(images/bg1.jpeg)'
        
        // 使背景图覆盖body，以免出现背景不是完整图片的情况。
        document.body.style.backgroundSize = 'cover'
		
        var imgs = document.querySelectorAll('img')	// 获取所有的图片
		
        // 使用for循环为每一个图片注册单击事件。
        for(var i=0;i<imgs.length;i++){
			imgs[i].onclick=function(){
				// 单击图片事件执行的函数代码。
				document.body.style.backgroundImage = `url(${this.src})`	// 实现给更换背景。
                
                reset()	// 函数调用
				// 为img标签添加class属性，值为 active。
                this.className = 'active'	// 效果：点击图片会在图片上产生蓝色边框。
			}
		}
        
        // 排他思想
		function reset(){
			for(var i = 0;i<imgs.length;i++){
				imgs[i].className = ''	// 清除imgs的样式。
			}
		}
	</script>
</body>
</html>

总结知识点：

使用for循环遍历所有的元素，可以同时为每一个元素进行操作，使代码更为简洁。
transform属性用来转换元素的2D和3D，实现元素的旋转，缩放，移动和倾斜。
transition表示检测元素当前的属性，如果发生改变，会在规定时间内完成改变。语法为：
- transition: all 1s; 即检测当前元素的所有属性，如果发生改变，会在1s内完成改变。
- transition: width 1s;即检测当前元素的width值，如果发生改变，会在1s内完成改变。

一个想做架构师的前端开发学生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
onclick事件

一、鼠标的单击事件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
复制链接

扫一扫