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

2024-10-30 02:06:09
推荐回答(5个)
回答1:

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

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

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

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

回答2:

分别写一个onmouseover和onmouseout事件。然后在事件里面加一个function,分别写想要放大的尺寸和缩小或复原的尺寸。

具体代码实现如下:

扩展资料:

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。

参考资料:

JavaScript官方API接口-GlobalEventHandlers.onmouseover

JavaScript官方API接口-GlobalEventHandlers.onmouseout

W3cSchool-JavaScript 事件参考手册

回答3:

  1. 首先是div布局:









2.添加CSS和JS样式:(1)添加CSS样式,就是写静态页面,这个图片怎么在页面上显示;(2)添加JS效果是鼠标经过小盒子, 显示遮罩和大盒子 ,鼠标离开后隐藏。

























3.在开发工具里面的截图:

4.未添加CSS样式和JS效果浏览器的截图:

5.添加CSS和JS效果的浏览器的截图:

回答4:

很简单啊,先把图片用css缩小,再用js滑过的时候放大就好啦,图省事我就把js直接写在图片上了,你可以自己抽出来:


或者更简单的,直接用css控制,连js都不用写了:


回答5:

需要准备两张图,一张是小图,一张是指向的时候显示的大图。
在小图的hover事件中把大图显示出来就行了(可以先隐藏,指向的时候再显示,然后滑出来的时候再隐藏)。用jquery实现大致就是这样子:
$('#xiaotu').hover(
function(){

// 滑进去显示隐藏的大图

},
function(){

// 划出去隐藏已经显示的大图
}
);

相关问答
最新问答