jquery实现鼠标移动上去之后图片呈墙移动影藏

来源：互联网 2023-03-16 23:54:46 235

工具/原料

adobe dreamweaver

方法/步骤

准备好需要用到的图标。

jquery实现鼠标移动上去之后图片呈墙移动影藏

新建html文档。

jquery实现鼠标移动上去之后图片呈墙移动影藏

书写hmtl代码。

div class="content">

h1>jquery实现鼠标移动上去之后图片呈墙移动影藏/h1>

div id="hs_container" class="hs_container">

div class="hs_area hs_area1"> img class="hs_visible" src="images/area1/1.jpg" /> img src="images/area1/2.jpg" /> img src="images/area1/3.jpg" /> /div>

div class="hs_area hs_area2"> img class="hs_visible" src="images/area2/1.jpg" /> img src="images/area2/2.jpg" /> img src="images/area2/3.jpg" /> /div>

div class="hs_area hs_area3"> img class="hs_visible" src="images/area3/1.jpg" /> img src="images/area3/2.jpg" /> img src="images/area3/3.jpg" /> /div>

div class="hs_area hs_area4"> img class="hs_visible" src="images/area4/1.jpg" /> img src="images/area4/2.jpg" /> img src="images/area4/3.jpg" /> /div>

div class="hs_area hs_area5"> img class="hs_visible" src="images/area5/1.jpg" /> img src="images/area5/2.jpg" /> img src="images/area5/3.jpg" /> /div>

/div>

div>

h2>jquery实现鼠标移动上去之后图片呈墙移动影藏/h2>

/div>

jquery实现鼠标移动上去之后图片呈墙移动影藏

初始化css代码。

style>

* { margin: 0; padding: 0; }

body { background: #FFF url(bg.gif) repeat top left; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }

h1, h2 { font-weight: normal; }

h2 { float: right; margin-top: 35px; color: #999; }

h1 { color: #777; font-size: 45px; float: left; margin: 10px; }

h3 { color: #777; display: block; clear: both; font-weight: normal; font-size: 16px; margin: 10px; font-style: italic; text-align: center; }

.content { width: 900px; position: relative; margin: 20px auto 0px auto; }

span.reference { font-family: Arial; text-align: center; font-size: 12px; display: block; margin-top: 20px; }

span.reference a { color: #999; text-transform: uppercase; text-decoration: none; margin-right: 20px; }

/style>

jquery实现鼠标移动上去之后图片呈墙移动影藏

书写css代码。

.hs_container { position: relative; width: 902px; height: 471px; overflow: hidden; clear: both; border: 2px solid #fff; cursor: pointer; -moz-box-shadow: 1px 1px 3px #222; -webkit-box-shadow: 1px 1px 3px #222; box-shadow: 1px 1px 3px #222; }

.hs_container .hs_area { position: absolute; overflow: hidden; }

.hs_area img { position: absolute; top: 0px; left: 0px; display: none; }

.hs_area img.hs_visible { display: block; z-index: 9999; }

.hs_area1 { border-right: 2px solid #fff; }

.hs_area4, .hs_area5 { border-top: 2px solid #fff; }

.hs_area4 { border-right: 2px solid #fff; }

.hs_area3 { border-top: 2px solid #fff; }

.hs_area1 { width: 449px; height: 334px; top: 0px; left: 0px; }

.hs_area2 { width: 451px; height: 165px; top: 0px; left: 451px; }

.hs_area3 { width: 451px; height: 167px; top: 165px; left: 451px; }

.hs_area4 { width: 192px; height: 135px; top: 334px; left: 0px; }

.hs_area5 { width: 708px; height: 135px; top: 334px; left: 194px; }