Html+Javascript 创建方块加拖动示例

Walnutt

于 2021-04-01 23:42:07 发布

阅读量331

点赞数

分类专栏： html 文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_44849953/article/details/115387562

版权

本文将介绍如何结合HTML、CSS和JavaScript创建一个可拖动的方块示例。通过JavaScript监听鼠标事件，实现方块的动态移动，结合CSS设置样式，打造交互式的网页元素。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<style type="text/css">
		p{
   
			background-color: lightblue;/*背景色*/
			text-align: center;/*居中*/
			font-size:50px;/*字体大小设置*/
			user-select:none;/*无法选中*/
		}
		.box{
   
			background-color:red;
			position:absolute;
			cursor:move;
			opacity: 0.4;
		}
	</style>
	</head>
<body>
	<p>点击左键绘制矩形</p>
</body>
<script type="text/javascript">
	va

最低0.47元/天解锁文章

Walnutt

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html+Javascript 创建方块加拖动示例

<!DOCTYPE html><html><head> <meta charset="utf-8"/> <style type="text/css"> p{ background-color: lightblue;/*背景色*/ text-align: center;/*居中*/ font-size:50px;/*字体大小设置*/ user-select:none;/*无法选中*/ } .box{
复制链接

扫一扫

专栏目录