js的案例任意实现两个

最新推荐文章于 2024-07-20 23:54:17 发布

米奇giaogiao屋

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量328

点赞数 7

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Fithck/article/details/135514114

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.点亮星星：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			document.body.style.backgroundColor ="#000"
			document.onclick = function(event) {
				let img = document.createElement("img")
				img.src ="0.gif"
				img.style.position = "absolute"
			document.body.appendChild(img)
			img.onload = function() {
			const img_w = parseInt(getComputedStyle(img).width)
			const img_h = parseInt(getComputedStyle(img).height)
			
			w = getRandom(20,200)
			h=img_h / img_w * w
			img.style.width = w + "px"
			img.style.height = h + "px"
			img.style.left = (event.pageX - w / 2) +"px"
			img.style.top = (event.pageY - h / 2) +"px"
			}
		}
		function getRandom(min, max) {
			return min + Math.ceil((max - min) * Math.random())
			}
		</script>
	</body>
</html>

效果：

2.div移动

代码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			div {
				width: 100px;
				height: 60px;
				background-color: skyblue;
				border-radius: 50%;
				text-align: center;
				padding-top: 40px;
			}
		</style>
	</head>
	<body>
		<div><a href="">篮球</a></div>

		<script>
			let div = document.querySelector("div")
			div.style.position = "absolute"
			w = parseInt(getComputedStyle(div).width)
			h = parseInt(getComputedStyle(div).height)
			div.onmousedown = function(event) {

				div.onmousemove = function(ev) {
					console.log(ev.offsetX)
					console.log(ev.offsetY)

					div.style.left = (ev.pageX - w / 2) + "px"
					div.style.top = (ev.pageY - h / 2) + "px"
				}
			}

			div.onmouseup = function() {
				div.onmousemove = null
			}
		</script>
	</body>
</html>