html+css+js实现网页中广告块代码

新建html文档。

书写hmtl代码。

<div id = “wrap”>

<ul>

<li class = “liA”>

<div class = “divA”></div>

<a href=””>11111111111111<br>11111111111111</a>

<div class = “divA1”></div>

</li>

<li  class = “liA”>

<div class = “divA”></div>

<a href=””>11111111111111<br>11111111111111</a>

<div class = “divA2”></div>

</li>

<li  class = “liB”>

<div class = “divA”></div>

<a href=””>11111111111111</a>

<div class = “divA1”></div>

</li>

<li class = “liB”>

<div class = “divA”></div>

<a href=”” class = “aa” >11111111111111</a>

<div class = “divA1”></div>

</li>

<li class = “liB”>

<div class = “divA”></div>

<a href=””>11111111111111<br>

11111111111111</a>

<div class = “divA2”></div>

</li>

<li class = “liB”>

<div class = “divA”></div>

<a href=”” class = “aa”>11111111111111</a>

<div class = “divA1”></div>

</li>

<li class = “liB”>

<div class = “divA”></div>

<a href=”” class = “aa”>11111111111111</a>

<div class = “divA2”></div>

</li>

<li class = “liB”>

<div class = “divA”></div>

<a href=””>11111111111111</a>

<div class = “divA1”></div>

</li>

<li class = “liB”>

<div class = “divA”></div>

<a href=””>1111111111111<br>

G20</a>

<div class = “divA1”></div>

</li>

<li class = “liB”>

<div class = “divA”></div>

<a href=””>1111111111111<br>

1111111111111</a>

<div class = “divA2”></div>

</li>

</ul>

</div>

书写css代码。

<style>

* { margin: 0; padding: 0; }

a { text-decoration: none; }

#wrap { width: 570px; height: 190px;margin: 100px auto; }

ul li { list-style: none; }

ul .liA { width: 188px; height: 88px; background: rgb(40,100,187); ; float: left; margin: 1px; position: relative; z-index: 5; overflow: hidden; }

ul .liB { width: 93px; height: 88px; background: rgb(40,100,187); ; float: left; margin: 1px; position: relative; z-index: 5; overflow: hidden; }

ul .liA a { font-family: arial, ‘Hiragino Sans GB’, ‘Microsoft Yahei’, 微软雅黑, 宋体, Tahoma, Arial, Helvetica, STHeiti; display: inline-block; width: 170px; height: 38px; text-align: center; color: white; position: absolute; top: 17px; left: 5px; }

ul .liB a { font-family: arial, ‘Hiragino Sans GB’, ‘Microsoft Yahei’, 微软雅黑, 宋体, Tahoma, Arial, Helvetica, STHeiti; font-size: 12px; display: inline-block; width: 93px; height: 30px; text-align: center; color: white; position: absolute; top: 25px; left: 2px; }

ul .liB .aa, ul .liA .aa { top: 35px }

.divA { position: absolute; width: 100%; height: 100%; top: -100%; left: 0; background: #85a9e8; z-index: 0; }

.divA1 { position: absolute; width: 100%; height: 100%; top: 100%; left: 0; background: #3046bb; opacity: 0.2; z-index: 0; }

.divA2 { position: absolute; width: 100%; height: 100%; top: 0%; left: 0; background: white; opacity: 0.4; }

</style>

书写并添加js代码。

<script src=”jquery/jquery-2.2.4.min.js”></script>

<script>

$(document).ready(function(){

$(‘.divA1′).eq($(this).index()).animate({top:’0’},5)

})

$(‘li’).mouseenter(function(){

$(this).css(‘background-color’,’rgb(24,68,142)’)

$(‘.divA’).eq($(this).index()).animate({top:’0′},300)

$(‘.divA’).eq($(this).index()).animate({top:’100%’},150)

$(‘.divA1′).eq($(this).index()).animate({top:’100%’},150)

$(this).find(‘.divA2′).animate({top:’100%’},300)

})

$(‘li’).mouseleave(function(){

$(‘.divA1′).eq($(this).index()).animate({top:’0’},150)

$(‘.divA’).eq($(this).index()).animate({top:’-100%’},10)

$(this).find(‘.divA2′).animate({top:’0’},150)

$(this).css(‘background’,’rgb(40,100,187)’)

})

 

</script>

代码整体结构。

查看效果。