js控制鼠标经过修改div层的样式

最新推荐文章于 2024-06-20 19:52:08 发布
最新推荐文章于 2024-06-20 19:52:08 发布
阅读量2.5k 收藏 5
点赞数 2
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37241934/article/details/82933366
版权 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>js控制鼠标经过移除div层的样式</title>
<style>
#div1 {
	width:200px;
	height:200px;
	background:red;
}
</style>
<script type="text/javascript">
	function xx () {	
	var a= document.getElementById('div1');
	a.style.cssText="width:500px;height:300px;background:green";
	}
	function yy () {	
	var a= document.getElementById('div1');
	a.style.cssText="";
	}
	
<!--定义函数实现鼠标经过图层的时候修改样式（比如变宽，变高，变绿），鼠标移出的时候恢复，将函数应用在div标签的onmouseover和onmouseout事件上-->


</script>
</head>

<body>
<div id="div1" onmouseover="xx()" onmouseout="yy()">
</div>
</body>
<html>

 

那就可爱多一点点
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
鼠标经过样式js实现
04-20
鼠标经过样式js实现，方格下拉样式。纯学习目的、
JS+CSS实现感应鼠标渐变显示DIV层的方法
10-24
在HTML中，我们首先需要定义一个DIV层，该层将通过JavaScript控制其显示和隐藏。DIV层的初始状态是隐藏的，通过设置其宽度和高度为0像素，颜色透明度为0（通过filter属性的Alpha函数设置，以及opacity属性），并确保...
JS改变鼠标样式
温故知新
03-31 5883
在HTML（源码）状态下，加入如下代码（其中的鼠标代码部分可替换成自己喜欢的鼠标样式  手型  代码：手型  十字型  代码：十字型  文本型  代码：文本型  等待效果  代码：等待效果  默认效果  代码：默认效果  问号效果  代码：问号效果  向右箭头效果  代码：向右箭头效果  向右上箭头效果  代码：向右上箭头效果  向上箭头效果  代码：向
Javascript：鼠标经过、鼠标离开事件
最新发布
听海边涛声
06-20 239
Javascript：鼠标经过、鼠标离开事件
js 鼠标样式
☆ lijun ☆
08-25 1038
[code="html"] hand:是大家所熟悉的手型。 crosshair:是十字型，就是小乌龟首页所用的样式。 text:是平时鼠标移动到文本上的样式。 wait:是等待的效果。 default:是默认的那种效果。 help:是带问号的鼠标样式。 e-resize:是向右的箭头。 ne-resize:是...
JS 改变鼠标样式
weixin_30284355的博客
02-11 326
此片记录如何改变鼠标样式： document.body.style.cursor = "url(resource/pic/icons/magnifier3.cur) 12 12,crosshair";/* */ 可常用于地图上点击某个按钮后，鼠标样式设置 转载于:https://www.cnblogs.com/ostrich-sunshine/p/8027020.htm...
js改变鼠标的形状和样式的方法
10-26
常用的改变鼠标样式的方法：如果你想鼠标移动到某个元素上改变鼠标样式 就在这个元素的样式里加上 cursor:(你想改的样式)
JS实现的简单鼠标跟随DiV层效果完整实例
10-23
JavaScript实现的简单鼠标跟随DiV层效果是利用了JavaScript和CSS来实现的交互式网页特效。在这个实例中，通过编写JavaScript代码，使得页面上的多个DIV元素能够跟随鼠标指针移动。这种效果常常被应用在网页设计中，...
div css移动鼠标改变样式弹出div层
10-24
本话题主要探讨如何利用 `div` 和 `css` 实现一个动态效果：当鼠标移动到特定`div`上时，能够改变样式并弹出一个相关信息的`div`层。 首先，我们需要创建两个`div`元素：一个作为主内容区域，另一个作为弹出层。在...
javascript DIV跟随鼠标移动
10-22
JavaScript中的DIV跟随鼠标移动是一种常见的动态效果，常用于创建交互式网页。这个效果可以通过监听鼠标的移动事件并更新DIV的位置来实现。以下是对这个技术的详细解析： 首先，我们需要一个HTML结构，包含一个或者...
js实现鼠标拖拽缩放div实例代码
10-17
综上所述，本篇文章详细介绍了如何使用JavaScript和jQuery来实现鼠标拖拽和缩放DIV的交互效果。通过分析代码实现，我们可以了解到在现代Web开发中，通过JavaScript捕捉和处理鼠标事件是一项非常基础且重要的技能。在...
js 实现 鼠标形状定义大全
03-31
js 实现 鼠标形状定义大全! 值得下载看看!资源免费,大家分享!!
鼠标移动到div上显示制定信息或者div（自适应显示位置）
10-11
鼠标移动到div上弹出div或者信息，并且自适应显示位置；每一步代码都有详细的解释；简单，通俗易懂
【html+css3+js】 鼠标悬停控件改变鼠标样式
qq_46057971的博客
10-31 1037
常用的鼠标指针样式及cursor对应的属性。1.单引用 直接在控件的style里写。
在JavaScript中改变鼠标指针样式的方法
热门推荐
fate_flower的博客
03-09 1万+
在JavaScript中改变鼠标指针样式的方法 在js中我们可以通过cursor属性来设置鼠标指针的样式，例 var body = document.querySelector("body") body.style.cursor= "move" 以上代码就实现了页面打开后，鼠标的指针就被替换成一个十字架样式，其实还有很多样式，如下图所示 通过cursor属性我们还可以将指针替换为自定义图片...
使用 JavaScript 更改鼠标指针
weixin_50251467的博客
07-18 911
文档对象模型 (DOM) 是标记语言文档（HTML 和 XML）的编程接口。它定义了文档的逻辑结构以及如何访问和修改文档。DOM 以结构化和分层的方式呈现网页，使开发人员和用户更容易浏览文档。使用 DOM，我们可以使用Document对象提供的方法或命令轻松访问和操作标签、id、类、属性或元素。今天的文章将教授如何使用 JavaScript 更改鼠标指针。有两种方法可以使用查询选择器更改鼠标指针或通过标签访问特定元素。
html div 鼠标左右拖动,js实现鼠标拖动div改变其位置的教程
weixin_34049168的博客
06-04 720
无意中在墨初博客看到这个文章，很喜欢就分享给大家学习一下，虽然说要求看着很简单，但实现起来还是比较难一点的，下面就说说实现的方法！js实现鼠标拖动div改变其位置的方法先上个图示，大家看一下效果！js实现鼠标拖动的div的代码html完整代码html>Documentdiv{width:100px;height:100px;text-align:center;line-height:...
【js自定义鼠标样式】【js自定义鼠标动画】
Min_Fox的博客
12-29 1483
自定义鼠标形状，自定义鼠标的动画，可以让我们的页面更加有设计感。当前需求：吧鼠标自定义成一个正方形，鼠标的效果有：和页面的颜色做色差处理，例如当鼠标指到的颜色是白色，在鼠标的这块区域中显示的是黑色，另外，当鼠标指向特定区域时，正方形的鼠标放大三倍，并且以中心为圆点旋转。代码如下（示例）：
html如何改变鼠标指针形状,如何改变鼠标指针样式，并且可交互？
weixin_42363154的博客
06-04 374
这个需要用js控制啦，我写了个demo，你可以看看Documenthtml {height: 100%;}body {height: 100%;margin: 0;}function creatDom() {var div = document.createElement('div');var body = document.getElementsByTagName('body')[0];cons...
鼠标控制图片放大缩小div带滚动条效果
06-12
可以通过以下步骤实现鼠标控制图片放大缩小div带滚动条效果： 1. 在HTML文件中创建一个div元素，并设置其样式为具有固定高度和宽度且具有滚动条的容器。 ``` <div id="container" style="width: 500px; height: 500px; overflow: auto;"> <img id="image" src="path/to/image.jpg" alt="image" style="width: 100%; height: auto;"> </div> ``` 2. 在JavaScript文件中获取容器和图像元素，并设置图像元素的初始缩放级别。 ``` const container = document.getElementById('container'); const image = document.getElementById('image'); let scale = 1; ``` 3. 监听鼠标滚轮事件，并根据滚轮滚动方向调整图像的缩放级别和滚动条位置。 ``` container.addEventListener('wheel', (event) => { event.preventDefault(); const delta = Math.sign(event.deltaY); scale += delta * 0.1; if (scale < 1) scale = 1; if (scale > 3) scale = 3; image.style.transform = `scale(${scale})`; const containerWidth = container.clientWidth; const containerHeight = container.clientHeight; const imageWidth = image.width * scale; const imageHeight = image.height * scale; container.scrollLeft = (imageWidth - containerWidth) / 2; container.scrollTop = (imageHeight - containerHeight) / 2; }); ``` 这样就可以通过鼠标滚轮控制图片的放大和缩小，并且在容器中显示滚动条以便用户查看整个图片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

那就可爱多一点点

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值