當(dāng)前位置：首頁(yè) > 人文社科 > 生活经验 >内容正文

生活经验

一个简单的提示效果

發(fā)布時(shí)間：2023/11/27 生活经验 25 豆豆

生活随笔收集整理的這篇文章主要介紹了一个简单的提示效果小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一個(gè)簡(jiǎn)單的效果，修改了三次才能達(dá)到如意的效果。看來(lái)，細(xì)節(jié)真的是決定成敗。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Document</title>
<style>
.b{ width:200px; margin:10px auto; height:200px; border:1px solid #ccc; background:#eee;}
.l{ width:50px; height:50px; border:1px solid #ccc; margin:10px; float:right; display:none;}
</style>
<script>
window.onload = function(){

}
</script>
</head>
<body>
<div class="b" id="b0" onmouseover="c(0)">
春江潮水連海平
<div class="l" id="c0"><a href="#">收藏</a> <a href="#">刪除</a></div>
</div>
<div class="b" id="b1" onmouseover="c(1)">
春江潮水連海平
<div class="l" id="c1"><a href="#">收藏</a> <a href="#">刪除</a></div>
</div>
<div class="b" id="b2" onmouseover="c(2)">
春江潮水連海平
<div class="l" id="c2"><a href="#">收藏</a> <a href="#">刪除</a></div>
</div>
<script>
function $(id) {
return document.getElementById(id);
}
function c(n){
for(var i=0; i<3; i++){
$('b' + i).style.background = "#eee";
$('c' + i).style.display = 'none';
}
$('b' + n).style.background = "#eff";
$('c' + n).style.display = 'block';
}
</script>
</body>
</html>

原理：

先利用for循環(huán)初始化頁(yè)面內(nèi)待隱藏的div，然后根據(jù)循環(huán)外傳來(lái)的參數(shù)對(duì)未隱藏div的進(jìn)行樣式改變。

基本上控制隱藏顯示的靈魂人物是：“display:none | block | inline" 。css 屬性如不多述。

轉(zhuǎn)載于:https://www.cnblogs.com/jikey/archive/2009/12/11/1621677.html

總結(jié)

以上是生活随笔為你收集整理的一个简单的提示效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。