第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定

Active learning

為什么不把判端加載在for循環(huán)里面。也可以判斷，啊，根據(jù)i+1的值；來判端，分別執(zhí)行不同的語句；

正在回答

1 回答

<!DOCTYPE HTML>

<html>


<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>圖片展示--側(cè)邊顯示詳細信息</title>

<style>

div, ul, li, dl, dt, dd, img, a {

??margin: 0;

??padding: 0;

??}

ul, li, dl, dt, dd {

??list-style: none;

??}

img {

??border: 0;

??width: 300px;

??}

.demo {

??margin: 0 auto;

??overflow: hidden;

??padding: 0 34px;

??}

.orginImg li {

??float: left;

??margin-right: 5px;

??position: relative;

??margin-bottom:10px;

??}

.orginImg li a {

??display: block;

??border: 2px solid #ccc;

??}

.orginImg li div {

??position: absolute;

??top: 0;

??left: 100%;

??z-index: 22;

??background: #ccc;

??width: 305px;

??height: 170px;

??border: 2px solid #F00;

??display: none;

??}

.orginImg li div dl{

??color:#fff;

??font-weight:bold;

??padding:10px;

??}

.orginImg li div dl dt{

??text-align:center;

??}

.orginImg li div dl dd{

??text-indent:2em;

??}

??</style>

</head>


<body>

<div class="demo" >

<ul class="orginImg" id="orginImg">

<li>

<a ><img src="http://img1.sycdn.imooc.com//52fd84630001d22603000170.jpg" /></a>

<div>

<dl>

<dt>學會html5 絕對的屌絲逆襲</dt>

<dd>本課程由淺入深，逐步推進，以示例為主線，詳細完整地介紹HTML5的新功能與新特征</dd>

</dl>

</div>

</li>

<li>

<a ><img src="http://img1.sycdn.imooc.com//52fd84630001d22603000170.jpg" /></a>

<div>

<dl>

<dt>學會html5 絕對的屌絲逆襲</dt>

<dd>本課程由淺入深，逐步推進，以示例為主線，詳細完整地介紹HTML5的新功能與新特征</dd>

</dl>

</div>

</li>

<li>

<a ><img src="http://img1.sycdn.imooc.com//52fd84630001d22603000170.jpg" /></a>

<div>

<dl>

<dt>學會html5 絕對的屌絲逆襲</dt>

<dd>本課程由淺入深，逐步推進，以示例為主線，詳細完整地介紹HTML5的新功能與新特征</dd>

</dl>

</div>

</li>

<li>

<a ><img src="http://img1.sycdn.imooc.com//52fd84630001d22603000170.jpg" /></a>

<div>

<dl>

<dt>學會html5 絕對的屌絲逆襲</dt>

<dd>本課程由淺入深，逐步推進，以示例為主線，詳細完整地介紹HTML5的新功能與新特征</dd>

</dl>

</div>

</li>

<li>

<a ><img src="http://img1.sycdn.imooc.com//52fd848d00017baa03000170.jpg" /></a>

<div>

<dl>

<dt>圓角水晶按鈕制作</dt>

<dd>網(wǎng)頁中的圓角按鈕和寬度自適應(yīng)按鈕就這么輕松制作</dd>

</dl>

</div>

</li>

<li>

<a ><img src="http://img1.sycdn.imooc.com//52fd84b00001e9b803000169.jpg" /></a>

<div>

<dl>

<dt>導航條菜單的制作</dt>

<dd>30分鐘教你輕松制作出各種形式的網(wǎng)站導航條菜單</dd>

</dl>

</div>

</li>

</ul>

</div>

<script type="text/javascript">

var lis = document.getElementById("orginImg").getElementsByTagName("li");

for (var i = 0; i < lis.length; i++) {

lis[i].onmouseover = showDetail;

lis[i].onmouseout = hideDetail;

if(i%3==2)

{

lis[i].getElementsByTagName("div")[0].style.left='auto';

lis[i].getElementsByTagName("div")[0].style.right='100%';

}

}

var lastLi;

lastLi = lis[lis.length - 1];

lastLi.getElementsByTagName("div")[0].style.left = ' auto ';

lastLi.getElementsByTagName("div")[0].style.right = '100%';


function showDetail() {

this.getElementsByTagName("div")[0].style.display = 'block';

}


function hideDetail() {

this.getElementsByTagName("div")[0].style.display = 'none';

}

</script>

</body>


</html>


0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
圖片展示特效
  • 參與學習       29131    人
  • 解答問題       81    個

使用JS技術(shù)實現(xiàn)圖片展示效果效果，讓網(wǎng)頁增彩是否心動，快快加入我們

進入課程
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號