首頁 > 開發者 > ASP

ASP.NET 網站開發中常用到的廣告效果代碼

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

用本貼持續記錄一些收集的廣告效果。希望給有需求的朋友們一些支援。也希望朋友們把我未記錄的廣告形式也給予一起回貼。使本貼更加的完善，也讓更多的朋友們分享。
1.翻屏效果
翻屏效果 複製代碼 代碼如下:<html>
<head></head>
<body>
<div style="HEIGHT:85px">
<script LANGUAGE='JavaScript'>
document.ns = navigator.appName == "Microsoft Internet Explorer";
function showStr(str,textWidth,num)
{
if(!document.ns)
{
document.write(str[0]+'<br>')
}
else
{
var wrt="";
wrt+='<table border=0 cellspacing=0 cellpadding=0>';
wrt+='<tr><td>';
wrt+='<div id="icefable1'+num+'">';
wrt+='<table width='+textWidth+' border=0 cellspacing=0 cellpadding=0>';
for (var i in str)
{
wrt+='<tr><td height=20>'+str[i]+'</td></tr>';
} scroll_num=i;
wrt+='</table>';
wrt+='</div>';
wrt+='<div id="icefable2'+num+'" style="position:absolute;z-index:1;visibility:hidden"></div>';
wrt+='</td></tr>';
wrt+='</table>';
document.write(wrt);
}
}
function init_srolltext(num){countnum=0;eval('stopscroll'+num+'=false;');
eval('icefable1'+num+'.scrollTop=0;');
rotatenum=0;
eval('icefable1'+num+'.style.width=0;');
eval('icefable1'+num+'.style.height=marqueesHeight;');
eval('icefable1'+num+'.style.overflowX="visible";');
eval('icefable1'+num+'.style.overflowY="hidden";');
eval('icefable1'+num+'.noWrap=true;');
eval('icefable1'+num+'.onmouseover=new Function("stopscroll=true");');
eval('icefable1'+num+'.onmouseout=new Function("stopscroll=false");');
eval('preTop'+num+'=0; ');
eval('currentTop'+num+'=0;');eval('stoptime'+num+'=0;');
eval('icefable2'+num+'.innerHTML="";');
eval('icefable2'+num+'.innerHTML+=icefable1'+num+'.innerHTML;');
eval('icefable1'+num+'.innerHTML=icefable2'+num+'.innerHTML+icefable2'+num+'.innerHTML;');
eval('setInterval("scrollUp'+num+'()",40);');
}
function scrollUp1()
{
if(stopscroll1==true) return;
currentTop1+=1;
if(currentTop1==marqueesHeight+1)
{
stoptime1+=1;
currentTop1-=1;
if(stoptime1==scrolllen*marqueesHeight)
{
currentTop1=0;
stoptime1=0;
}
}
else
{
preTop1=icefable11.scrollTop;
icefable11.scrollTop+=1;
if(icefable11.scrollTop==scrolllen*marqueesHeight+1)
{
preTop1=0;
currentTop1=0;
stoptime1=0;
icefable11.scrollTop=0;
}}}
var strArray1=new Array();strArray1[0]='<a href=http://www.dearbook.com.cn/book/SearchBook.aspx?keyword=電腦時尚應用系列 target=_blank><img border=0 src=/image/shishang.jpg height=80 width=150></a> <a href=http://www.dearbook.com.cn/book/SearchBook.aspx?keyword=執行個體精講 target=_blank><img border=0 src=/image/button20.gif height=80 width=150></a> <a href=http://www.dearbook.com.cn/book/SearchBook.aspx?keyword=企業級開發案例精解 target=_blank><img border=0 src=/image/button21.gif height=80 width=150></a> <a href=http://www.dearbook.com.cn/subject/top50/ target=_blank><img border=0 src=/image/button15.gif height=80 width=150></a> ';strArray1[1]='<a href=http://www.dearbook.com.cn/2005/c++/ target=_blank><img border=0 src=/image/primer.jpg height=80 width=150></a> <a href=http://www.dearbook.com.cn/subject/VBzh/ target=_blank><img border=0 src=/image/vb-bt.jpg height=80 width=150></a> <a href=http://www.dearbook.com.cn/book/SearchBook.aspx?keyword=開發答疑&searchtype=0&corder=3&page=1&log=0 target=_blank><img border=0 src=/image/hospital.jpg height=80 width=150></a> <a href=http://www.dearbook.com.cn/book/SearchBook.aspx?keyword=國外電腦科學教材系列 target=_blank><img border=0 src=/image/WH.jpg height=80 width=150></a> <a href=http://www.dearbook.com.cn/SUBJECT/c++/index.htm target=_blank><img border=0 src=/image/c++.jpg height=80 width=150></a> ';var scrolllen=strArray1.length;marqueesHeight=82;showStr(strArray1,580,1);init_srolltext(1);</script>
</div>
</body>
</html>

2.廣告輪顯
輪流顯示 複製代碼 代碼如下:<html>
<head>
<SCRIPT>
var elady_tp=new Array();
var elady_tplink1=new Array();
var elady_tptext=new Array();
var adNumvii=0;
elady_tp[0]="http://pic1.e26.cn/mb/5108/yft/images/1.gif"
elady_tp[1]="http://pic1.e26.cn/mb/5108/yft/images/3.gif"
elady_tp[2]="http://pic1.e26.cn/mb/5108/yft/images/2.gif"
var elady_cimage=new Array();
for (i=1;i<=5;i++){elady_cimage[i]=new Image();
elady_cimage[i].src=elady_tp[i];
}
function set_coelady1(){ if (document.all)
{ elady_tprotator1.filters.revealTrans.Transition=Math.floor(Math.random()*23);
elady_tprotator1.filters.revealTrans.apply(); }
}
function play_coelady1()
{ if (document.all) elady_tprotator1.filters.revealTrans.play()
}function next_elady1(){ if(adNumvii<elady_tp.length-1)adNumvii++ ;
else adNumvii=0;
set_coelady1();
document.images.elady_tprotator1.src=elady_tp[adNumvii];
play_coelady1();
theTimer=setTimeout("next_elady1()", 4000);}
function linkurl1(){ jumpUrl1=elady_tplink1[adNumvii];
jumpTarget1='_blank';
if (jumpUrl1 != ''){ if (jumpTarget1 != '')window.open(jumpUrl1,jumpTarget1);
else location.href=jumpUrl1;
}}
function listMsg1()
{ status=elady_tplink1[adNumvii];
document.returnValue = true;
}
</SCRIPT>
</head>
<body>
<img style="FILTER: revealTrans(duration=2,transition=20)" src="javascript：next_elady1()" border=0 name=elady_tprotator1 width="188" height="150"></a>
</body>
</html>

3.流動廣告
流動廣告 複製代碼 代碼如下:<html>
<head></head>
<body>
<marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount=5 behavior=alternate>
<table cellspacing=0 cellpadding=2 width="100%" border=0>
<tbody>
<tr>
<td><img src="http://pic1.e26.cn/mb/5108/yft/images/gun/1301.gif" width="150" height="150"></td>
<td><img src="http://pic1.e26.cn/mb/5108/yft/images/gun/1306.gif" width="150" height="150"></td>
<td><img src="http://pic1.e26.cn/mb/5108/yft/images/gun/1311.gif" width="150" height="150"></td>
<td><img src="http://pic1.e26.cn/mb/5108/yft/images/gun/1203.gif" width="150" height="150"></td>
<td><img src="http://pic1.e26.cn/mb/5108/yft/images/gun/1208.gif" width="150" height="150"></td>
<td><img src="http://pic1.e26.cn/mb/5108/yft/images/gun/1219.gif" width="150" height="150"></td>
<td><img src="http://pic1.e26.cn/mb/5108/yft/images/gun/1224.gif" width="150" height="150"></td>
<td><img src="http://pic1.e26.cn/mb/5108/yft/images/gun/1234.gif" width="150" height="150"></td>
<td><img src="http://pic1.e26.cn/mb/5108/yft/images/gun/1258.gif" width="150" height="150"></td>
<td><img src="http://pic1.e26.cn/mb/5108/yft/images/gun/1280.gif" width="150" height="150"></td>
<td><img src="http://pic1.e26.cn/mb/5108/yft/images/gun/1356.gif" width="150" height="150"></td>
</tr>
</tbody>
</table>
</marquee>
</body>
</html>

4.移動廣告框
移動廣告 複製代碼 代碼如下:<div id="img" style="LEFT:27px; visibility=hidden;POSITION:absolute; TOP:1115px">
<a href="www.eyou.com" target="_blank">
<img border=0 src="uploadad/gg.png" width=400 height=50>
</a>
</div>
<script language="javascript">
<!-- Begin
var xPos = 20;
var yPos = document.body.clientHeight;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
}
else {
xPos = xPos - step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset)) {
xon = 0;
xPos = (width - Woffset);
}
}
function start() {
img.style.visibility = "visible";
interval = setInterval('changePos()', delay);
}
start();
// End -->
</script>

5.左右底部廣告 複製代碼 代碼如下:<script type="text/javascript" language="javascript">
var MmyeeAdShow = 3; //1為左側顯示 2為右側顯示 其他為兩側顯示
var MmyeeAdWidth =300; //廣告寬度
var MmyeeAdHeight = 200; //廣告高度
//左邊浮動
var AdLeftContent= "<div><iframe id='iframyee' bordercolor='#000000' frameborder='0' hspace='0' marginheight='0' marginwidth='0' scrolling='no' src='http://a311300.cnblogs.com' width='"+MmyeeAdWidth+"' height='"+MmyeeAdHeight+"'></iframe></div>";
//右邊浮動
var AdRightContent = "<div><iframe id=iframyee frameborder=0 marginwidth=0 marginheight=0 bordercolor='#000000' hspace='0' scrolling=no src='http://a311300.cnblogs.com' width='"+MmyeeAdWidth+"' height='"+MmyeeAdHeight+"'></iframe></div>"
//漂浮據頁面底部設定框值，為了美觀請不要修改次參數
var marginTop = 10
//漂浮據邊框的距離
var marginLeft = 5
var navUserAgent = navigator.userAgent
function load()
{
judge();
move();
}
function move() {
judge();
setTimeout("move();",80)
}
function judge(){
if (navUserAgent.indexOf("Firefox") >= 0 || navUserAgent.indexOf("Opera") >= 0) {
if (MmyeeAdShow != "2") {
document.getElementById("adLeftFloat").style.top = (document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop) + ((document.body.clientHeight > document.documentElement.clientHeight)?document.documentElement.clientHeight:document.body.clientHeight) - (MmyeeAdHeight) - marginTop + 'px';
}
if (MmyeeAdShow != "1") {
document.getElementById("adRightFloat").style.top = (document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop) + ((document.body.clientHeight > document.documentElement.clientHeight)?document.documentElement.clientHeight:document.body.clientHeight) - (MmyeeAdHeight) - marginTop + 'px';
document.getElementById("adRightFloat").style.left = ((document.body.clientWidth > document.documentElement.clientWidth)?document.body.clientWidth:document.documentElement.clientWidth) - MmyeeAdWidth - marginLeft + 'px';
}
}
else{
if (MmyeeAdShow != "2") {
document.getElementById("adLeftFloat").style.top = (document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop) + ((document.documentElement.clientHeight == 0)?document.body.clientHeight:document.documentElement.clientHeight) - (MmyeeAdHeight) - marginTop + 'px';
}
if (MmyeeAdShow != "1") {
document.getElementById("adRightFloat").style.top = (document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop) + ((document.documentElement.clientHeight == 0)?document.body.clientHeight:document.documentElement.clientHeight) - (MmyeeAdHeight) - marginTop + 'px';
document.getElementById("adRightFloat").style.left = ((document.documentElement.clientWidth == 0)?document.body.clientWidth:document.documentElement.clientWidth) - MmyeeAdWidth - marginLeft + 'px';
}
}
if (MmyeeAdShow != "2") {
document.getElementById("adLeftFloat").style.left = marginLeft + 'px';
}
}
if (MmyeeAdShow != "2") {
document.write("<div id=\"adLeftFloat\" style=\"position: absolute;width:" + MmyeeAdWidth + ";\"><table border=0 cellpadding=0 cellspacing=0><tr><td>"+AdLeftContent+"</td></tr></table></div>");
}
if (MmyeeAdShow != "1") {
document.write("<div id=\"adRightFloat\" style=\"position: absolute;width:" + MmyeeAdWidth + ";\"><table border=0 cellpadding=0 cellspacing=0><tr><td>"+AdRightContent+"</td></tr></table></div>");
}
load();
</script>

6.左側浮動廣告
複製代碼 代碼如下:<script event="onload" for="window" language="javascript">
init_Ad_Left();//載入頁面後，調用函數init_Ad_Left().
</script>
<script language="javascript">
<!--
function init_Ad_Left() {
document.all.AdLeftLayer.style.posTop = -200;
//設定onLoad事件激發以後，廣告層相對於固定後的y方向位置
document.all.AdLeftLayer.style.visibility = 'visible'//設定層為可見
MoveLeftLayer('AdLeftLayer');//調用函數MoveLayer()
}
function MoveLeftLayer(layerName)
{
var x = 20;//浮動廣告層固定於瀏覽器的x方向位置
var y = 200;//浮動廣告層固定於瀏覽器的y方向位置
var diff = (document.documentElement.scrollTop + y - document.all.AdLeftLayer.style.posTop)*.90;
var y = document.documentElement.scrollTop + y - diff;
eval("document.all." + layerName + ".style.posTop = y");
eval("document.all." + layerName + ".style.posright = x");//移動廣告層
setTimeout("MoveLeftLayer('AdLeftLayer');", 0);//設定20毫秒後再調用函數MoveLayer()
}
//-->
</script>
<div id="AdLeftLayer" style='position: absolute; width: 100px; height: 200px; z-index: 20;visibility: visible; left: 20px; top: 100px'>
加入你要放置的內容
<!--嵌入子頁-->
<iframe id="iframyee11" allowtransparency='true' bordercolor='#000000' frameborder="0" height='20' hspace='0' marginheight="0" marginwidth="0" scrolling="no" src='Detail.aspx' width='120'></iframe>
dsfsfqqq qqqqqqqq qqqqqqqq qqqqqqqq qqqqqqqq qqqqqqqq qqqqqqqq qqqqqqqq qqqqqqqq
qqqqq qqqqqqqq qqqqqqqq qqqqqqq
</div>

7.右側浮動廣告 複製代碼 代碼如下:<script event="onload" for="window" language="javascript">
init_Ad_Right();//載入頁面後，調用函數init_Ad_Right()
</script>
<script language="javascript">
<!--
function init_Ad_Right()
{
document.all.AdRightLayer.style.posTop = -300; //設定onLoad事件激發以後，廣告層相對於固定後的y方向位置
document.all.AdRightLayer.style.visibility = 'visible'; //設定層為可見
MoveRightLayer('AdRightLayer'); //調用函數MoveRightLayer()
}
function MoveRightLayer(layerName)
{
var x = 20; //浮動廣告層固定於瀏覽器的x方向位置
var y = 200;//浮動廣告層固定於瀏覽器的y方向位置
var diff = (document.documentElement.scrollTop + y - document.all.AdRightLayer.style.posTop)*.90;
var y = document.documentElement.scrollTop + y - diff;
eval("document.all." + layerName + ".style.posTop = y");
eval("document.all." + layerName + ".style.posright = x");//移動廣告層
setTimeout("MoveRightLayer('AdRightLayer');", 0);//設定20毫秒後再調用函數MoveRightLayer()
}
//-->
</script>
<div id="AdRightLayer" style='position: absolute; width: 100px; height: 200px; z-index: 20;visibility: hidden; right: 30px; top: 600px'>
加入你要放置的內容
<!--嵌入子頁-->
<iframe id="iframyee2" allowtransparency='true' bordercolor='#000000' frameborder="0" height='20' hspace='0' marginheight="0" marginwidth="0" scrolling="no" src='Detail.aspx' width='120'></iframe>
hhhhhh hhhhhh hh hhhhhh hhhhhh hhhhhh h hhhhhh hhhhhh hhhhhh hhhhhh hh
</div>

8.左右浮動廣告
以下各層不變，在event="onload"中同時載入init_Ad_Left()和 init_Ad_Right()方法
左右浮動廣告 複製代碼 代碼如下:<script event="onload" for="window" language="javascript">
init_Ad_Left();//載入頁面後，調用函數init_Ad_Left()
init_Ad_Right();//載入頁面後，調用函數init_Ad_Right()
</script>

9.falsh廣告輪顯
Flash廣告輪顯Demo
感謝好友位綽提供此廣告展現樣式
有興趣的朋友還可以封裝成ASP.NET裡的自訂控制項。這樣使用更為方便。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關文章
ASP學習總結：錯誤碼
反爬蟲：利用ASP.NET MVC的Filter和緩衝（入坑出坑）
ASP.NET Core 2.0利用MassTransit整合RabbitMQ
實戰中的asp.net core結合Consul叢集&Docker實現服務治理
asp DateDiff實現文字在特定時間後消失
設定和讀取ASP.Net全域變數的方法

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More