这
是
成
品
这是成品
这是成品
核 心 的 话 就 是 设 置 一 个 d i v , 里 面 装 10 张 图 片 核心的话就是设置一个div,里面装10张图片 核心的话就是设置一个div,里面装10张图片
用 c s s 设 置 一 下 边 框 ， 初 始 透 明 度 o p a c i t y = 0.2 ( 模 糊 ) 用css设置一下边框，初始透明度opacity=0.2(模糊) 用css设置一下边框，初始透明度opacity=0.2(模糊)
然 后 用 J S 遍 历 所 有 i m g 标 签 然后用JS遍历所有img标签 然后用JS遍历所有img标签
设 置 o n m o u s e o v e r 事 件 ( 鼠 标 悬 浮 ) 设置onmouseover事件(鼠标悬浮) 设置onmouseover事件(鼠标悬浮)
设 置 o n m o u s e o u t 事 件 ( 鼠 标 移 出 ) 设置onmouseout事件(鼠标移出) 设置onmouseout事件(鼠标移出)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#img-list{
margin:0 auto;
width:1100px;height:550px;
border:5px solid blue;
}
#img-list img{
width:190px;height:240px;
border:5px solid #eec;
padding:5px;
opacity:0.2;
}
#img-list img:hover{
cursor:crosshair;
}
</style>
<script>
window.onload=function()
{
var list=document.getElementsByTagName("img");
for(var i=0;i<list.length;i++)
{
list[i].onmouseover=function()
{
this.style.opacity=1.0;
}
list[i].onmouseout=function()
{
this.removeAttribute("style");
}
}
}
</script>
</head>
<body>
<div id="img-list">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpeg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
<img src="7.jpeg">
<img src="8.jpg">
<img src="9.png">
<img src="10.jpg">
</div>
</body>
</html>
