百燕之家 / 问答 / 详情

在html中怎么用js实现鼠标指向图片时图片放大的效果?(具体实现)

2023-08-29 10:17:57
TAG: 鼠标
ardim

可以用js事件“onmouseover”和“onmouseout”来实现。

1、新建html文档,在body标签中添加图片标签,为这个标签设置“id”属性,然后设置图片的默认显示大小css属性:

2、添加“onmouseover”js事件,首先使用“document.getElementById”获取到图片标签,然后定义鼠标移动到图片上时发生的事件,这时图片将会放大:

3、添加“onmouseout”js事件,首先获取图片标签,然后定义鼠标移开图片时发生的事件,这时图片将会缩小:

余辉

<img id="img" onmouseover="bigger()" onmouseout="smaller()" src="你的图片路径" style="cursor:pointer;width:100px;height:100px;" />

<script type="text/javascript">

var img = document.getElementById("img");

function bigger(){

img.style.width = "400px";

img.style.height = "400px";

}

function smaller(){

img.style.width = "100px";

img.style.height = "100px";

}

</script>

gitcloud

建议你学习一下jquery,jquery里面好像有这样的功能

怎么用鼠标选择多个图片?

1、首先,打开电脑,回到桌面上。2、然后,电脑键盘上按下“ctrl”键,不放。3、在按下“ctrl”键不放的同时,鼠标点击桌面上需要选中的图标即可。4、也可用鼠标拖动,连续选中桌面上的图标。
2023-08-29 06:50:425

如何将动态图片变成鼠标指针?

鼠标光标通常有两类:一是动画光标(*.ani),二是静态光标(*.cur). 制作软件很多.给你介绍两款: 一是ArtCursors, 一套极佳的鼠标光标编辑工具,支持标准的16x16、32x32及自订尺寸图示,除可观看、绘制、抓取、收集、和管理等功能外,亦有渐层着色功能及齐全的编辑工具。支持格式包括:ico、ani、cur、wmf、emf、bmp、jpg、jpeg、gif、png,它并从图像ICO、JPG等文件中导入。 你可以在以下网址下载到 http://download.pchome.net/design/icon/5898.html 只是该软件是英文界面. 二是值得推荐的: MicroAngelo 5.59C 汉化版. 这是一款功能强大的图标/光标制作和替换套装工具, 可以制作 .ico/.ani/.cur 光标, 还支持替换 Windows系统中的默认图标, 是您的系统更加个性化。还提供 .icl 图标库支持,可以自己建立/编辑/成立图标库文件。还有图标资源浏览器, 可以检测出包括图标资源的文件(比如 .exe/.dll/.cox/.cls/等等), 5.0 最大的优点是, 支持直接修改 .exe文件中的图标资源, 可以改您的应用程序换个图标。 下载地址: http://soft.2118.com.cn/soft/5221.htm参考资料: http://soft.2118.com.cn/soft/5221.htm——来自百度,可参考一下,嘿嘿
2023-08-29 06:51:043

在html中怎么用js实现鼠标指向图片时图片放大到原图那么大?(具体实现)

可以用js事件“onmouseover”和“onmouseout”来实现。1、新建html文档,在body标签中添加图片标签,为这个标签设置“id”属性,然后设置图片的默认显示大小css属性:2、添加“onmouseover”js事件,首先使用“document.getElementById”获取到图片标签,然后定义鼠标移动到图片上时发生的事件,这时图片将会放大:3、添加“onmouseout”js事件,首先获取图片标签,然后定义鼠标移开图片时发生的事件,这时图片将会缩小:
2023-08-29 06:52:281

电脑如何把鼠标放到图片会显示分辩率啥的

电脑查看图片分辨率的操作方法:方法/步骤如下:1、把鼠标放在图片上就会自动弹出窗口,这时便可以看到图像的尺寸。2、可以点击一张图片,这时候在信息栏中会显示图片的尺寸。3、可以在图片上单击鼠标右键,然后选择属性。4、在属性的详细信息中可以看到图片的尺寸。5、可以将视图改为详细信息方式。6、在名称栏上单击鼠标右键,然后勾选尺寸。
2023-08-29 06:52:571

flash 3.0如何自定义鼠标

要在flash中自定议鼠标,需要二步来实现,第一把原鼠标隐藏Mouse.hide();,再用其他自定义的鼠标图片跟随原鼠标就实现了,具体步骤如下:一、新建一个Flash程序,按下Ctrl + F8创建一个新的MovieClip,取名为cursor,如图所示:二、接下来在这个MovieClip中设计一个新的鼠标指针,可以通过绘图工具绘制或者制作好一张好看的图片来当做是鼠标指针外观样式,如下是通过钢笔工具绘制的一个风格,如图所示:三、接着回到主时间轴,把新指针拖到舞台上,同时给这个指针一个名字命名为cursor_mc,如图所示:四、创建一个新图层,加入ActionScript代码五、在ActionScript图层上,按F9打开“动作”窗口,并粘贴以下代码。Mouse.hide();stage.addEventListener(MouseEvent.MOUSE_MOVE,跟进);function follow(E:MouseEvent){cursor_mc.x = mouseX;cursor_mc.y = mouseY的;}六、最后按下Ctrl + Enter进行测试,这时就可以看到移动鼠标指针变成自定义图片了。
2023-08-29 06:53:581

电脑右下方出现了鼠标的图片,怎么去掉?

只要安装了手写板的驱动程序,那么右下角就会有这个鼠标图标(当然也可能是其它样式的图标),通常都是随开机启动的,以保证手写板的正常工作。如果你在使用手写板,那么这个程序是必需的,不建议删除。如果你不使用手写板,那么可打开控制面板--程序和功能,找到这个程序,卸载即可。当然也可以用360禁用这个程序的开机启动项
2023-08-29 06:55:041

如何让鼠标移动时图片自动旋转?

1、首先准备一个HTML文档,文档中准备好两个图片,接下来会对这两个图片进行旋转。2、然后对HTML中的内容定义一些样式,如下图所示,主要是标题以及ul的样式。3、接下来就给图片所在的li定义宽高,如下图所示。4、然后给图片设置过渡效果,过渡使用transition属性,如下图所示。5、当鼠标悬停在图片上时,通过rotate给其设置变形,如下图所示,正数代表的是顺时针,负数代表的是逆时针。6、最后运行程序,会看到如下图所示的效果,鼠标放在图片上会顺时针或者逆时针旋转。
2023-08-29 06:55:111

wps表格插入的图片怎么才能把鼠标放上去后图片会自动放大?

点击图片选着紧密环绕
2023-08-29 06:56:113

PPT中,怎么能点击鼠标出现一张图片?

可以先设置图片中的自定义动画,选一个你希望图片出来的方式。这样就默认是点击鼠标出现一张图片了。
2023-08-29 06:56:262

ppt如何用鼠标一点图片就放大

来来,这个问题,参考如下可以点击一个图片,整个图片就全屏再点又还原
2023-08-29 06:57:003

如何修改鼠标指针样式

很多人在更换了WIN7后,在惊叹WIN7华丽的界面的同时,也在银WIN7过于华丽的页面而晕头转向找不到不以前常用的选项了. 下面给给出的是鼠标选项的选择方式. 鼠标键的选项菜单可以帮助你调节鼠标的按键实现的效果,方便喜欢使用左手的人,双击速度,根据不同的使用喜欢调节点击的效果.是都使用单击锁定功能也在这里 鼠标指针,这个选项可是实现鼠标指针的一些特殊的现实效果和鼠标指针的图标形状 指针选项则可以实现你做不通过工作需要的鼠标的移动的速度和现实效果.比如你喜欢用鼠标做图文工作,需要鼠标慢而精准,或者是做其他的工作需要鼠标移动的较快这都是可以! 滑轮选项内容不多主要是鼠标滚轮的一些效果! 硬件选项则是关于当前鼠标的一些的硬件的数据和参数,一般情况下不需要过多的了解.
2023-08-29 06:57:561

在网页里的图片 如何做到将鼠标放上去后就会变成另一张图片

源码没错啊,看看路径对不对,再不行贴个图什么的
2023-08-29 06:58:304

什么软件可以改变鼠标图案

不用软件,系统本身就可以修改。控制面板的,鼠标设置里
2023-08-29 06:59:473

怎么用ps做鼠标移动图片上下动的gif图片

世界上还没有哪个人可以做出来的。
2023-08-29 07:01:464

怎么改变电脑鼠标的样式

CursorXP 是出品 WindowBlinds 的 Stardock 软件公司推出的一款专门用来改变鼠标指针形态的小程序。它充分利用了 Windows 2000 和 Windows XP 系统的可视化技术,使你的鼠标指针千变万化。同时它还具备用户自定义功能,大家可以自己创造个性化鼠标指针和动画。此款程序完全集成于普通鼠标控制面板中,使你可以很容易的控制它的开关。 华军有1.31免费中文版 http://search.onlinedown.net/search.asp?keyword=CursorXP
2023-08-29 07:02:521

photoshop怎么用鼠标拖动图片来改变大小,把一个图片置入到一个背景中时可以用鼠标拖动改变图片大小,

ctrl+T
2023-08-29 07:03:393

鼠标放在一张图片上怎么让它放大?

需要放大显示吗?滚动鼠标滚轮。
2023-08-29 07:04:152

怎样把自己的照片直接p到另一张风景图片上

百度有教程
2023-08-29 07:05:004

如何实现鼠标放在图片上显示一个播放图标?

什么意思,听不懂
2023-08-29 07:07:312

为什么我鼠标右击一张图片后出现很多选项

把360卸了就好了
2023-08-29 07:07:513

笔记本电脑屏幕右下方有个鼠标的图片,不知如何出来的,是什么东西?如何拿掉?

您好,我也出现了这个问题,不知道您解决了没有?怎么解决的?
2023-08-29 07:08:026

鼠标经过图片在固定的位置出现一张大图

<scriptlanguage="JavaScript"><!--varsmallX=200;//缩略图宽度varbigX=600;//预览窗大小,可以任意设置varbigY=450;varsrcX=-1;//原图大小,可以任意设置.如都为-1将使用图片原始大小varsrcY=-1;varborder=5;//边框varsmallY,viewX,viewY,bl,isIE,vX,vY;
2023-08-29 07:08:187

鼠标右键编辑图片无效?

右键图片时报错“该文件没有程序与之关联.........创建关联”解决方法:右键菜单中的编辑选项把注册表HKEY_CLASSES_ROOTSystemFileAssociationsimageshelledit默认值改为 : C:WINDOWSsystem32mspaint.exe 就好了还有HKEY_CLASSES_ROOTSystemFileAssociationsimageshellprint这个是打印 可以删除,最好,删除前先导出一份备份一下***************************************************************上面的方法有时不可行最好还是 把上面注册表中 edit 项全部删除 这时右键就没有“ 编辑(e)”了然后 文件夹选项 文件类型 找到 jpg 高级 新建右键名输入 编& 辑(随便填) 用于执行操作的应用程序输入 c:windowssystem32mspaint.exe "%1" 就ok了对于 bmp gif 等格式甚至MP3、rmvb等 一样设置 mspaint.exe 就是自带的图片编辑器,虽然功能低,但用来格式转换图片裁剪还是很方便的
2023-08-29 07:09:042

在PPT中,如何实现点击文字时出现一幅图片,然后点击下鼠标该图片消失?

用链接
2023-08-29 07:09:147

PPT如何通过鼠标移动控制图片的变换

点一下:变成下一张滚鼠标上的轮子也行,往上滚上一张,往下滚下一张
2023-08-29 07:11:313

C#,用鼠标拖动图片的程序,拖动时图片一直闪烁。

建议将C#窗体有个叫双缓冲的属性设置为true试试
2023-08-29 07:12:111

Windows7,鼠标右键点击图片,打开方式中有两个Windows照片查看器,两个都能用.怎么删去一个.

卸载以后重安
2023-08-29 07:12:205

网页制作鼠标移动图片怎么设置弹出小提示?

这个只是一个图片文字说明。<img src="a.jpg" alt="图片说明" title="你要显示的文字" /> (美设之家)
2023-08-29 07:12:381

css如何实现鼠标移至图片上显示遮罩层及文字

方法一:鼠标移至图片上显示遮罩层及文字1、先看下html,一个img图片控件,和一个有mask样式的div,里面有文字,这个就是遮罩层。2、然后看下样式定义,先看下图片容器和图片的样式,如图,其中要注意的是img_container样式里定义了position:relative;这个主要是为了让我们的遮罩层做绝对定位做准备的。3、再看下遮罩层的样式定义,代码如图,其中需要注意的是他的定位样式,我们设置了absolute的绝对定位,另外还有半透明的background样式设置:background:rgba(0,0,0,0.7);可以通过修改后面的0.7这个数字来改变透明度。1为完全不透明,0为完全透明。4、接着添加鼠标移动上去显示遮罩层的脚本代码。这个js代码用jquery来写,方便,简单一点,所以我们先引入jquery脚本库。5、添加mouseover,mouseout事件,主要就是当鼠标移动到图片容器上时,显示遮罩层,移出时,隐藏遮罩层。6、刷新页面,可以看到现在页面上是正常显示的图片。7、当我们把鼠标放上去时,就显示了遮罩层了。方法二:鼠标移动至图片,图片慢慢放大显示遮罩层及文字1、创建外层div和商品图片。2、设置其样式,这里都是一些基本简单的属性。*{}里面的margin和padding都设置为0,是因为浏览器对元素之间有默认的属性,如果不消除,将影响我们后面css部分属性的设定。3、运行,查看效果。可以看到,图片在div的上面,并且于div一样大。4、为图片增加,鼠标移入时就放大的动画。这里运用到的是css3的transform属性,设置动画的一种方式,也比较方便快捷。对于scale缩放属性,代码上有详细注释。5、运行,查看动画效果。可以看到,此时的图片是以图片中心放大,而超出了div的范围。那么我们接下来解决这一问题。6、为外层div设置overflow属性,使超出的部分全都隐藏。7、运行,查看动画效果。可以看到当鼠标移上去时,图片慢慢放大,但大小始终不变,就是div的大小,那么此时外层的div就起到了相框的效果。8、接下来增加遮罩和文字。注意全部都放到div里面,图片、遮罩、文字都为同级元素,外层div为它们的父元素。9、为外层div添加作为父元素的相对定位属性。为遮罩设置样式及动画。为文字设置样式及动画。如图,部分属性有注释,并解释了动画效果。10、运行,查看最终效果。图片逐渐变大,黑色半透明遮罩逐渐显现,文字逐渐从下方移到图片中间位置,严格来说是移动到外层div的中间位置。
2023-08-29 07:12:482

办公室里整天都听到同事们嚷嚷着用鼠标太久手痛啊,听说垂直鼠标可以预防鼠标手,是真的吗?

什么鼠标是垂直的
2023-08-29 07:15:332

div+css 鼠标移到图片上显示文字内容?

当鼠标经过图片时,图片下边弹出一个半透明文字提示框样式demo www.100sucai.com/demos.php?id=1413207110
2023-08-29 07:15:532

鼠标移动到文字上显示图片

设置图片的的a:hover属性为一张图片,也可以添加链接
2023-08-29 07:17:272

电脑怎么用鼠标截图 就是用鼠标拖一个框

右键
2023-08-29 07:17:367

在html中怎么用js实现鼠标指向图片时图片放大到原图那么大?(具体实现)

需要准备两张图,一张是小图,一张是指向的时候显示的大图。在小图<img>的hover事件中把大图显示出来就行了(可以先隐藏,指向的时候再显示,然后滑出来的时候再隐藏)。用jquery实现大致就是这样子:$("#xiaotu").hover( function(){ // 滑进去显示隐藏的大图 }, function(){ // 划出去隐藏已经显示的大图 });
2023-08-29 07:18:173

鼠标悬停特效代码怎么写,鼠标放在小图片上旁边显示一张大图片?

图片中鼠标悬停特效代码:<img src="~/images/jalendar-wood-bg.png" id="smallimg" width="10px" height="20px" onmouseout="hoverHiddendiv()"onmouseup="hoverShowDiv()" />。鼠标悬停的意思是指,当你的鼠标在网页的部分图标、文字或者图片上停留的时候,会有部分内容弹出,档从这个图标、文字或者图片上移开鼠标后,弹出的内容自动缩回。举例:鼠标悬停在百度首页(http://zhidao.baidu.com/)的文字栏,即可有下拉菜单弹出,移开鼠标,即可隐藏,这就是鼠标悬停。
2023-08-29 07:19:361

如何在图片上加鼠标移动上去出方框和说明文字

我记得QQ截图就有很强大的辅助功能,可以实现你的这个要求
2023-08-29 07:19:585

js+css鼠标移动图片放大

D: 朋友, 不管代码咋样,这个效果100%是度娘抄google的。山中无google,百度称霸王。
2023-08-29 07:20:492

Photoshop 按住空格键鼠标拖拽移动图片后,图片还会自动向移动方向滑行一段距离,怎么关

CTRL+K 弹出框 然后把最后一个选项勾掉
2023-08-29 07:20:564

ppt中如何通过单击鼠标依次分别出现一张图片?

分别对两张图片设置自定义动画即可,调整好顺序
2023-08-29 07:21:256

【求救】用VB怎么做出鼠标拖动图片?

说详细点
2023-08-29 07:22:595

变成pdf后,鼠标移到图片那就会出现图片来源目录,如何去掉

换一种插入图片的方法:1、直接复制图片粘贴到word中2、直接拖拽图片到word中再试试看效果。
2023-08-29 07:23:212

CSS鼠标经过图片变亮,移开变变暗效果代码怎么写

加hover的CSS即可。img {opacity:0.8;;filter(alpha=80)}img:hover {opacity:1;filter(alpha=100)}
2023-08-29 07:23:302

用dreamweaver如何做到鼠标滑过图片出现文字介绍

。。。。。。。。。。<img src="" alt="">后面alt="写在这里面的问题就是你要的了"
2023-08-29 07:24:393

CSS+DIV鼠标放到文字上,原本带箭头的鼠标变成手状的形状,求代码,我 的文字套了DIV

div{cursor: point;}
2023-08-29 07:25:227

电脑开机的状态下,鼠标长时间不动,电脑会产生图片,这个图片怎么修改

是不是屏幕保护程序,你在桌面上右击,选择属性。选中屏幕保护程序一栏。就可以改了。
2023-08-29 07:27:373

怎样把许多张图片一起复制到文件夹中

按住键盘上的CTRL键,用鼠标点选你需要放到文件夹里的照片,全部选完后,松开CTRL键 鼠标拖动点选的所有图片到你选定的那个文件夹就好了!
2023-08-29 07:27:564

css如何实现鼠标移至图片上显示遮罩层及文字

1.首先看看HTML、一个img图像控件和一个带掩码样式的div,其中包含文本。这是蒙版层。2.然后,查看样式定义。首先,查看图像容器和图像的样式,如图所示。这主要是准备我们的绝对定位口罩。3.看看蒙版层的样式定义。代码如图所示。背景:rgba(0,0,0,0.7);透明度可以通过修改后面的0.7号来改变。1是完全不透明的,0是完全透明的。4.然后添加用于鼠标移动的脚本代码来显示蒙版层。这段js代码是用jquery编写的,既方便又简单,所以我们首先介绍jquery脚本库。5.添加mouseover和mouseout事件,主要是当鼠标移动到图像容器上时显示蒙版层,当鼠标移出时隐藏蒙版层。6.刷新页面,您可以看到页面上显示的正常图片。7.当我们把鼠标放在蒙版层上时,蒙版层就会显示出来。
2023-08-29 07:29:021

css如何实现鼠标移至图片上显示遮罩层及文字

方法一:鼠标移至图片上显示遮罩层及文字1、先看下html,一个img图片控件,和一个有mask样式的div,里面有文字,这个就是遮罩层。2、然后看下样式定义,先看下图片容器和图片的样式,如图,其中要注意的是img_container样式里定义了position:relative;这个主要是为了让我们的遮罩层做绝对定位做准备的。3、再看下遮罩层的样式定义,代码如图,其中需要注意的是他的定位样式,我们设置了absolute的绝对定位,另外还有半透明的background样式设置:background:rgba(0,0,0,0.7);可以通过修改后面的0.7这个数字来改变透明度。1为完全不透明,0为完全透明。4、接着添加鼠标移动上去显示遮罩层的脚本代码。这个js代码用jquery来写,方便,简单一点,所以我们先引入jquery脚本库。5、添加mouseover,mouseout事件,主要就是当鼠标移动到图片容器上时,显示遮罩层,移出时,隐藏遮罩层。6、刷新页面,可以看到现在页面上是正常显示的图片。7、当我们把鼠标放上去时,就显示了遮罩层了。方法二:鼠标移动至图片,图片慢慢放大显示遮罩层及文字1、创建外层div和商品图片。2、设置其样式,这里都是一些基本简单的属性。*{}里面的margin和padding都设置为0,是因为浏览器对元素之间有默认的属性,如果不消除,将影响我们后面css部分属性的设定。3、运行,查看效果。可以看到,图片在div的上面,并且于div一样大。4、为图片增加,鼠标移入时就放大的动画。这里运用到的是css3的transform属性,设置动画的一种方式,也比较方便快捷。对于scale缩放属性,代码上有详细注释。5、运行,查看动画效果。可以看到,此时的图片是以图片中心放大,而超出了div的范围。那么我们接下来解决这一问题。6、为外层div设置overflow属性,使超出的部分全都隐藏。7、运行,查看动画效果。可以看到当鼠标移上去时,图片慢慢放大,但大小始终不变,就是div的大小,那么此时外层的div就起到了相框的效果。8、接下来增加遮罩和文字。注意全部都放到div里面,图片、遮罩、文字都为同级元素,外层div为它们的父元素。9、为外层div添加作为父元素的相对定位属性。为遮罩设置样式及动画。为文字设置样式及动画。如图,部分属性有注释,并解释了动画效果。10、运行,查看最终效果。图片逐渐变大,黑色半透明遮罩逐渐显现,文字逐渐从下方移到图片中间位置,严格来说是移动到外层div的中间位置。
2023-08-29 07:29:561

笔记本电脑没鼠标如何拖动图片

触控板可以啊
2023-08-29 07:31:565

鼠标右键失效,在photoshop软件中,如何选中魔术橡皮擦工具?快捷键是什么

朋友,橡皮擦的快捷键.(E),像皮擦、背景擦除、魔术像皮擦 是一个,
2023-08-29 07:32:214