當(dāng)然是引用的外部 .CSS 文件,如果是在當(dāng)頁(yè)面直接寫(xiě)的話,那只能當(dāng)頁(yè)修改。

成都創(chuàng)新互聯(lián)長(zhǎng)期為近千家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開(kāi)放共贏平臺(tái),與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為大余企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司,大余網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。
script language="javascript"
function repos(x,y){ //x、y分別是你廣告框的寬度和高度
layid = document.getElementById("ddiv"); //ddiv的廣告框div的id
layid.style.left = (document.documentElement.scrollLeft + document.documentElement.clientWidth - x)+"px";
layid.style.top = (document.documentElement.scrollTop + document.documentElement.clientHeight - y)+"px";
}
/script
這是廣告框的css:style="position:absolute; z-index:1; width:175px; height:80px"
然后把上面這個(gè)repos(x,y)函數(shù)同時(shí)用到onload、onscroll、onresize的事件中
css只能實(shí)現(xiàn)廣告漂浮在一個(gè)指定的地方,不能動(dòng)的,如果需要移動(dòng)的廣告就必需用js代碼實(shí)現(xiàn)的
css漂浮代碼為:position:absolute;
html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
meta name="Copyright" content="#" /
meta name="description" content="#" /
meta content="#" name="keywords" /
title11/title
/head
BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
div id=duilian01 style="POSITION: absolute; TOP: 100px; HEIGHT: 300px; background-color: #069; width: 100px; left: 6px;"/div
div id=duilian02 style="POSITION: absolute; TOP: 100px; HEIGHT: 300px; background-color: #069; width: 100px; left: 896px;"/div
script language=JavaScript src="js/scrolljs.js" type=text/javascript/script
table width="778" height="1000" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f4f4f4"
tr
td/td
/tr
/table
/BODY/HTML
---------------------------------------下面是JS代碼:命名scrolljs.js------------------------------------------
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
var tmp1= tmp2= tmp3 =0;
tmp1 = document.body.clientHeight;
var isArrayRightBanner = false;
var has2ndScraper = false;
if (typeof(duilian02.length) == "number") isArrayRightBanner = true;
if (typeof(duilian01) == "object") has2ndScraper = true;
function makewing()
{
tmp2 = document.body.clientHeight;
if(tmp1 != tmp2){
tmp3 = tmp2 - tmp1;
tmp1 = tmp2;
if(tmp30){}
}
if(IE)
{
diffY = document.body.scrollTop;
diffX = 0;
}
else if(NS)
{
diffY = self.pageYOffset;
diffX = self.pageXOffset;
}
if(diffY != lastScrollY)
{
percent = .1 * (diffY - lastScrollY);
if(percent 0)
percent = Math.ceil(percent);
else
percent = Math.floor(percent);
if(IE)
{
if (isArrayRightBanner)
{
if (document.all.skyflash != null) {
document.all.skyflash.style.pixelTop += percent;
}
document.all.duilian02[0].style.pixelTop += percent;
document.all.duilian02[1].style.pixelTop += percent;
}
else
{
if (document.all.skyflash != null) {
document.all.skyflash.style.pixelTop += percent;
}
document.all.duilian02.style.pixelTop += percent;
}
if (has2ndScraper) document.all.duilian01.style.pixelTop += percent;
}
else if(NS)
{
if (isArrayRightBanner)
{
document.skyflash.top += percent;
document.duilian02[0].top += percent;
document.duilian02[1].top += percent;
}
else
{
document.skyflash.top += percent;
document.duilian02.top += percent;
}
if (has2ndScraper) document.duilian01.top += percent;
}
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX)
{
percent = .1 * (diffX - lastScrollX);
if(percent 0)
percent = Math.ceil(percent);
else
percent = Math.floor(percent);
if(IE)
{
if (isArrayRightBanner)
{
if (document.all.skyflash != null) {
document.all.skyflash.style.pixelLeft += percent;
}
document.all.duilian02[0].style.pixelLeft += percent;
document.all.duilian02[1].style.pixelLeft += percent;
}
else
{
if (document.all.skyflash != null) {
document.all.skyflash.style.pixelLeft += percent;
}
document.all.duilian02.style.pixelLeft += percent;
}
if (has2ndScraper) document.all.duilian01.style.pixelLeft += percent;
}
else if(NS)
{
if (isArrayRightBanner)
{
document.skyflasy.top += percent;
document.duilian02[0].top += percent;
document.duilian02[1].top += percent;
}
else
{
document.skyflash.top += percent;
document.duilian02.top += percent;
}
if (has2ndScraper) document.duilian01.top += percent;
}
lastScrollY = lastScrollY + percent;
}
}
if(NS || IE) action = window.setInterval("makewing()",1);
單獨(dú)建一個(gè)文件夾命名js,把js文件放入文件夾內(nèi),防止路徑不對(duì)出錯(cuò)。
其實(shí)蠻簡(jiǎn)單的,你理解了他的原理就會(huì)了,簡(jiǎn)單說(shuō)一下吧,首先這個(gè)廣告正常顯示同樣不影響網(wǎng)頁(yè)其他的內(nèi)容的布局,那么他應(yīng)該是突出來(lái)的對(duì)吧?這個(gè)可以用相對(duì)文檔的絕對(duì)定位或者相對(duì)瀏覽窗口的固定定位,這個(gè)會(huì)把?
然后再說(shuō)下彈出效果,這個(gè)廣告本身是display:none;隱藏的,然后通過(guò)js或者jq控制當(dāng)打開(kāi)該網(wǎng)頁(yè)的時(shí)候添加display:block就彈出了(顯示);復(fù)雜點(diǎn)的,有時(shí)候彈出來(lái)之后別人把他關(guān)閉了(或者直接沒(méi)有關(guān)閉按鈕,那么這里直接忽略),但是你又想廣告過(guò)一會(huì)又彈出來(lái),這個(gè)怎么實(shí)現(xiàn)呢?
這里就用到了定時(shí)器setInterval,里面加個(gè)判斷 當(dāng)該廣告的display是none的時(shí)候把他改為block,再設(shè)置個(gè)時(shí)間多久循環(huán)一次,比如兩秒,當(dāng)廣告被關(guān)閉,兩秒之后會(huì)判斷一次,因?yàn)閺V告廣告是關(guān)閉的(display:none)所以他會(huì)給廣告更改樣式(改為display:block),這樣廣告又出來(lái)了
怎么樣這樣說(shuō)能夠理解吧?剩下的代碼就需要你來(lái)寫(xiě)了,只把大概思路和你說(shuō)下
一般來(lái)說(shuō),廣告是選擇當(dāng)前頁(yè)面模擬彈窗的,而它們的代碼一般是加在body標(biāo)簽最后的,所以,我們就有機(jī)會(huì)屏蔽掉它們了。。。。
1.將你自己的所有代碼用一個(gè)div包圍起來(lái);
2.設(shè)置這個(gè)div的定位為position:absolute;
3.再設(shè)置這個(gè)div居中,{...top:0;left:50%;margin-left:/*你頁(yè)面寬度的一半的負(fù)值*/;width:/*頁(yè)面寬度*/}
4.設(shè)置這個(gè)div的z-index,因?yàn)橐话銖棿暗膠-index是用999、9999居多,所以你設(shè)置一個(gè)比這個(gè)大很多的z-index即有機(jī)會(huì)覆蓋廣告。。。。(你可以查看具體的廣告的z-index后再針對(duì)性地設(shè)置)
5.所有代碼,相信你可以搞定的。。。。
文章標(biāo)題:css廣告樣式,廣告樣式圖片
路徑分享:http://chinadenli.net/article23/dsspjcs.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、域名注冊(cè)、企業(yè)網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、App開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)