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

html-css025

在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>