在html中怎么用js实现鼠标指向图片时图片放大到原图那么大？（具体实现）

html-css014

在html中怎么用js实现鼠标指向图片时图片放大到原图那么大？（具体实现）,第1张

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

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

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

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

h5代码：

<div id=“wrap”><ul id=“list”><li>10</li><li>9</li><li>8</li><li>7</li><li>6</li><li>5</li><li>4</li><li>3</li><li>2</li><li>1</ul></div>

css代码：

<style type="text/css">@-webkit-keyframes move{0%{left:-500px}100%{left:0}}#wrap{width:600pxheight:130pxborder:1px solid #000position:relativemargin:100px autooverflow:

hidden}#list{position:absoluteleft:0top:0padding:0margin:0-webkit-animation:5s move infinite linearwidth:200%}#list li{list-style:nonewidth:120pxheight:130pxborder:1px solid redbackground: pinkcolor:#ffftext-align: centerfloat:leftfont:normal 50px/2.5em '微软雅黑'}#wrap:hover #list{-webkit-animation-play-state:paused}</style>

扩展资料：

轮播图是网站介绍其主要产品或重要信息的一种方式。简单的一点是，在网页的某一部分，会依次呈现几个带有重要信息的图片，这样访问者就可以快速了解网站想要表达的主要信息。各种新闻网站的头版头条也是以这种方式呈现的重要信息。

轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px，高度为512px。那么旋转的窗口大小应该是一张图片的大小，即1024×512，然后，将五张0px的图片水平连接，形成一张5120px宽、512px高的图片，最后，通过每次向左移动1024px，可以旋转大的合成图像。

参考资料来源：

百度百科-轮播

网页中插入点视频开始显示图片,可以利用js代码来实现点击图片显示视频。具体代码如下:

<style>

.pic{clear:bothwidth:410pxheight:240px}/*图片区域*/

.pic img{width:410pxheight:240px}/*图片宽度和高度，可自行修改*/

.play{clear:bothwidth:410pxheight:240pxdisplay:none}/*视频区域-最初先设为隐藏*/

</style>

<div id="pic"><a href="JavaScript:vide()"><img src="图片.jpg"</a></div>

<div id="play"><embed src="视频文件.mp4" width="410" height="240" autostart="false"></embed></div>

<script>

function $(v){return document.getElementById(v)}

function view(id){$(id).style.display = "block"}

function hide(id){$(id).style.display = "none"}

function vide(){//点击图片显示视频

hide("pic")view("play")

}

</script>