課程
/前端開發
/JavaScript
/網頁廣告特效
除了少了兩個點以外，可能還有別的問題，請指出
2015-03-27
源自：網頁廣告特效 1-6
正在回答
p{color:red;} /*權值為1*/ p span{color:green;} /*權值為1+1=2*/ .warning{color:white;} /*權值為10*/ p span.warning{color:purple;} /*權值為1+1+10=12*/ #footer .note p{color:yellow;} /*權值為100+10+1=111*/ 權值的問題一個11 一個是10 所以是11 就是?.clickMe a 里面的display:none
closeBtn classname= show 表示顯示 ；等于 hide就是隱藏。我們說的關閉。
上面的代碼還是有點小問題，就是在關了按鈕以后按鈕不消失，所以應該再改一下，? ? $("closeBtn").className="hide";改為 ? ??$("closeBtn").style.display="none";
之所以這樣是為了解決代碼層級問題
<!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>右下角彈窗</title>
<style>
* {
? ? margin: 0;
? padding: 0;
}
.content {
? width: 960px;
? height: 1440px;
? background: #ccc;
? color: #000;
? font-size: 36px;
? text-align: center;
? margin: 0 auto;
? position: relative;
.tipCon {
? position:fixed;right:0px;bottom:0px; ?/*利用css的positiont屬性定位廣告顯示的位置*/
.clickMe {
? height: 24px;
? background: #CCC;
? line-height: 24px;
.clickMe a {
? background: url(http://img1.sycdn.imooc.com//542286f8000186a604300150.jpg) no-repeat -399px -19px;
? width: 16px;
? height: 16px;
? position: absolute;
? display: none;
? top: 5px;
? right: 5px;
.clickMe a:hover {
? background-position: -343px -19px;
? display: block;
.showPic {
? ?display:none; ?/* 初始為隱藏，可以改變初始效果*/
.show{display:block;}
.hide{display:none;}
? ?
</style>
<script>
window.onload = function(){
? //定義傳參控件
? ? var $=function(id){
? ? ? ??
? ? ? ? return document.getElementById(id)
? ? ? ? ?
? ? }
? ??
? $("clickMe").onmouseover= function(){//鼠標移入事件
? ? $("showPic").className="show";
? ? $("closeBtn").style.display="block";
? ? ??
? $("closeBtn").onclick= function(){//鼠標點擊事件
? ? $("showPic").className="hide";
? ? ? ? $("closeBtn").className="hide";
? ? ? ?
? }
</script>
</head>
<body>
<div class="content"><img src="http://img1.sycdn.imooc.com//537d9b860001795a09601700.jpg" /></div>
<div class="tipCon" id="tipCon">
? <div class="clickMe" id="clickMe">猜猜我有啥？<a href="javascrip:void(0);" id="closeBtn"></a></div>
? <div class="showPic" id="showPic"><img src="http://img1.sycdn.imooc.com//537d9ad6000193e904000300.jpg" /></div><!--圖片可以自定義-->
</div>
</body>
</html>
lh的妹妹
暈倒，原來是兩個地方少寫了一個點
舉報
原來這么EASY，從淺到深，逐步優化代碼，讓你深入理解
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2018-05-12
p{color:red;} /*權值為1*/ p span{color:green;} /*權值為1+1=2*/ .warning{color:white;} /*權值為10*/ p span.warning{color:purple;} /*權值為1+1+10=12*/ #footer .note p{color:yellow;} /*權值為100+10+1=111*/ 權值的問題一個11 一個是10 所以是11 就是?.clickMe a 里面的display:none
2015-03-28
closeBtn classname= show 表示顯示 ；等于 hide就是隱藏。我們說的關閉。
2015-03-27
上面的代碼還是有點小問題，就是在關了按鈕以后按鈕不消失，所以應該再改一下，? ? $("closeBtn").className="hide";改為 ? ??$("closeBtn").style.display="none";
之所以這樣是為了解決代碼層級問題
2015-03-27
<!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>右下角彈窗</title>
<style>
* {
? ? margin: 0;
? padding: 0;
}
.content {
? width: 960px;
? height: 1440px;
? background: #ccc;
? color: #000;
? font-size: 36px;
? text-align: center;
? margin: 0 auto;
? position: relative;
}
.tipCon {
? position:fixed;right:0px;bottom:0px; ?/*利用css的positiont屬性定位廣告顯示的位置*/
}
.clickMe {
? height: 24px;
? background: #CCC;
? line-height: 24px;
}
.clickMe a {
? background: url(http://img1.sycdn.imooc.com//542286f8000186a604300150.jpg) no-repeat -399px -19px;
? width: 16px;
? height: 16px;
? position: absolute;
? display: none;
? top: 5px;
? right: 5px;
}
.clickMe a:hover {
? background-position: -343px -19px;
? display: block;
}
.showPic {
? ?display:none; ?/* 初始為隱藏，可以改變初始效果*/
}
.clickMe {
? position: relative;
}
.show{display:block;}
.hide{display:none;}
? ?
</style>
<script>
window.onload = function(){
? //定義傳參控件
? ? var $=function(id){
? ? ? ??
? ? ? ? return document.getElementById(id)
? ? ? ? ?
? ? }
? ??
? $("clickMe").onmouseover= function(){//鼠標移入事件
? ??
? ? $("showPic").className="show";
? ? $("closeBtn").style.display="block";
? ? ??
? ? }
? ? ? ??
? $("closeBtn").onclick= function(){//鼠標點擊事件
? ? $("showPic").className="hide";
? ? ? ? $("closeBtn").className="hide";
? ? ? ?
? }
}
</script>
</head>
<body>
<div class="content"><img src="http://img1.sycdn.imooc.com//537d9b860001795a09601700.jpg" /></div>
<div class="tipCon" id="tipCon">
? <div class="clickMe" id="clickMe">猜猜我有啥？<a href="javascrip:void(0);" id="closeBtn"></a></div>
? <div class="showPic" id="showPic"><img src="http://img1.sycdn.imooc.com//537d9ad6000193e904000300.jpg" /></div><!--圖片可以自定義-->
</div>
</body>
</html>
2015-03-27
暈倒，原來是兩個地方少寫了一個點