js 技巧 广告JS代码效果大全

Posted 2020-09-25

3.[允许关闭] 
    与前面两个代码不同的是，广告图下方增加了一个图片按纽，允许访客点击关闭广告图片，下面文本框中就是实现效果所需代码： 

var delta=0.015; 
    var collection; 
    var closeB=false; 
    function floaters() { 
    this.items = []; 
    this.addItem = function(id,x,y,content) 
    { 
    document.write(‘<DIV id=‘+id+‘ >‘+content+‘</DIV>‘); 
   
    var newItem = {}; 
    newItem.object = document.getElementById(id); 
    newItem.x = x; 
    newItem.y = y; 
   
    this.items[this.items.length] = newItem; 
    } 
    this.play = function() 
    { 
    collection = this.items 
    setInterval(‘play()‘,30); 
    } 
    } 
    function play() 
    { 
    if(screen.width<=800 || closeB) 
    { 
    for(var i=0;i<collection.length;i++) 
    { 
    collection.object.style.display = ‘none‘; 
    } 
    return; 
    } 
    for(var i=0;i<collection.length;i++) 
    { 
    var followObj = collection.object; 
    var followObj_x = (typeof(collection.x)==‘string‘?eval(collection.x):collection.x); 
    var followObj_y = (typeof(collection.y)==‘string‘?eval(collection.y):collection.y); 
   
    if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x)) { 
    var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta; 
    dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx)); 
    followObj.style.left=followObj.offsetLeft+dx; 
    } 
   
    if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) { 
    var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta; 
    dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy)); 
    followObj.style.top=followObj.offsetTop+dy; 
    } 
    followObj.style.display = ‘‘; 
    } 
    } 
    function closeBanner() 
    { 
    closeB=true; 
    return; 
    } 
   
    var theFloaters = new floaters(); 
    // 
    theFloaters.addItem(‘followDiv1‘,‘document.body.clientWidth-100‘,0,‘<a  href=http://www.dfeng.net target=_blank><img src=ad/doublead/right.gif width=100 height=554 border=0></a><br><br><img src=ad/doublead/close.gif >‘); 
    theFloaters.addItem(‘followDiv2‘,0,0,‘<a  href=http://www.dfeng.net target=_blank><img src=ad/doublead/ad_ad.gif width=100 height=400 border=0 ></a><br><br><img src=ad/doublead/close.gif >‘); 
    theFloaters.play(); 


   把上面的代码分别另存为两个JS文件，然后在想实现此效果的页面用 
    
    <script type="text/javascript" language="javascript1.2" src="*.js"></SCRIPT> 
    
    调用即可，*代表你另存的文件名！注意修改广告图片地址和连接地址！ 

广告JS代码效果大全 ~~~~~~~~~~

4.[浮动对联广告---之左侧代码] 
   
    如果您想只有一侧显示的话,下面是实现左侧效果所需代码： 

  var ad_float_left_src ="图片地址"; 
    var ad_float_left_url ="地址"; 
    var ad_float_left_type = ""; 
    document.ns = navigator.appName == "Microsoft Internet Explorer" 
   
    var imgheight_close 
    var imgleft 
    window.screen.width>800 ? imgheight_close=120:imgheight_close=120 
    window.screen.width>800 ? imgleft=8:imgleft=122 
    function myload() 
    { 
    myleft.style.top=document.body.scrollTop+document.body.offsetHeigh 
    t-imgheight_close; 
    myleft.style.left=imgleft; 
    leftmove(); 
    } 
    function leftmove() 
    { 
    myleft.style.top=document.body.scrollTop+document.body.offsetHeigh 
    t-imgheight_close; 
    myleft.style.left=imgleft; 
    setTimeout("leftmove();",50) 
    } 
   
    function MM_reloadPage(init) { //reloads the window if Nav4 
    resized 
    if (init==true) with (navigator) {if ((appName=="Netscape")&& 
    (parseInt(appVersion)==4)) { 
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; 
    onresize=MM_reloadPage; }} 
    else if (innerWidth!=document.MM_pgW || innerHeight! 
    =document.MM_pgH) location.reload(); 
    } 
    MM_reloadPage(true) 
   
    function close_float_left(){ 
    myleft.style.visibility=‘hidden‘; 
    } 
   
    document.write("<div id=myleft style=‘position: 
    absolute;width:80;top:300;left:5;visibility: visible;z-index: 1‘>" 
    +"<style>" 
    +"A.closefloat:link,A.refloat:visited {text- 
    decoration:none;color:#000000;font-size:12px}" 
    +"A.closefloat:active,A.refloat:hover {text-decoration:underline;color:#0000FF;font-size:12px}" 
    +"</style>" 
    +"<table border=0 cellpadding=0 cellspacing=0><tr><td>"); 
   
    if(document.ns){ 
    if(ad_float_left_type!="swf") 
    document.write("<a href=‘" + ad_float_left_url + "‘ target 
    = ‘_blank‘><img src=‘" + ad_float_left_src + "‘ WIDTH=88 
    height=31 border=0></a>"); 
    else 
    document.write("<EMBED src=‘" + ad_float_left_src + "‘ 
    quality=high WIDTH=80 HEIGHT=80 TYPE=‘application/x-shockwave- 
    flash‘ id=changhongout ></EMBED>"); 
   
    document.write("</td></tr><tr><td width=80 height=20 
    align=right><a href=‘javascript:close_float_left( target=_blank);void(0);‘ 
    class="closefloat"><b><font color=#ff0000>关闭</font></b></a></td></tr>" 
    +"</table>" 
    +"</div>"); 
   
    myload()} 



  
　　[ 5.背投广告] 

<script language="javascript"> 
    <!-- 
    var sohu=window.open(‘http://www.sohu.com‘); 
    var ads=window.open(‘about:blank‘,‘ads‘,‘width=700,height=400‘); 
    sohu.focus(); 
    ads.document.open(); 
    ads.document.write ("<html><head><title>ads</title></head><body>This is background ads</body></html>"); 
    ads.document.close(); 
    //--> 
    </script> 
   


[ 6.收缩广告] 
   
    <script language="javascript"> 
    <!-- 
    var bwidth=800; 
    var bheight=400; 
    function go() { 
    bwidth = bwidth - 10; 
    bheight = bheight - 5; 
    if(bwidth <= 10) 
    { ads.style.display=‘none‘;clearTimeout("my"); } 
    else 
    { ads.outerHTML=‘<span id="ads" ></span>‘;} 
    var my=setTimeout("go()",50); 
    } 
    setTimeout("go()",6000); 
    //--> 
    </script> 
    <body topmargin="0" leftmargin="0"> 
    <div align="center"><span id="ads" ></span></div> 
    </body> 

****************************************************************************** 
    把上面的代码另存为三个*.JS文件，然后在想实现此效果的页面用 
     
    CODE: 
    <script src="*.js"></SCRIPT> 
    
    调用即可，*代表你另存的文件名！注意修改广告图片地址和连接地址！相应的参数可以根据页面自行调整 
js幻灯片播放器~~~~~~~~~~
var _c = 0; 
var _i = 0; 
var _v = 0; 
var _l = 0; 
var _sf = 3000; 
var _html = null; 
var _image = null; 
var _mycars= new Array(); 
var _w = new Array(); 
var _h = new Array(); 

function adRotator() {} 

function adRotator.add(p,w,h) 
{ 
   _mycars[_c] = p; 
   _w[_c] = w; 
   _h[_c] = h; 
   _c = _c + 1; 
}

/* 播放设置 */ 
function  adRotator.loads() 
{ 
   if (_i < _mycars.length && _l < 1) 
   { 
     _html = ‘<img src="‘ + _mycars[_i] + ‘" width="‘ + _w[_i] + ‘" height="‘ + _h[_i] + ‘" >‘ 
     if (_v < 1) 
     { 
        document.getElementById(‘image‘).value = _html + ‘,‘ + _i; 
        document.getElementById(‘rotatorPlayer‘).innerHTML = _html; 
        _i = _i + 1; 
  document.getElementById(‘backs‘).disabled=‘‘; 
        window.setTimeout("adRotator.loads("+_i+")",_sf); 
     } 
   } 
   else 
   { 
     _html = ‘<img src="‘ + _mycars[_i] + ‘" width="‘ + _w[_i] + ‘" height="‘ + _h[_i] + ‘" >‘ 
  document.getElementById(‘image‘).value = _html + ‘,‘ + _i; 
     document.getElementById(‘rotatorPlayer‘).innerHTML = _html; 
   } 
   if (_i+1 > _mycars.length) 
   { 
      document.getElementById(‘stops‘).disabled=‘True‘; 
   document.getElementById(‘play‘).disabled=‘‘; 
   document.getElementById(‘backs‘).disabled=‘‘; 
   document.getElementById(‘next‘).disabled=‘True‘; 
   _i = 0; 
   _v = 1; 
   } 
} 

/* 播放 */ 
function  adRotator.play() 
{ 
   _v = 0; 
   _l = 0; 
   adRotator.loads(); 
} 

/* 下一张 */ 
function adRotator.next() 
{ 
   _l = 1; 
   if(_i+1 < _mycars.length) 
   { 
      _i = _i + 1; 
   document.getElementById(‘play‘).disabled=‘‘; 
   document.getElementById(‘stops‘).disabled=‘True‘; 
   document.getElementById(‘backs‘).disabled=‘‘; 
   adRotator.loads(); 
   } 
   else 
   { 
      document.getElementById(‘next‘).disabled=‘True‘; 
   } 
}
/* 上一张 */ 
function adRotator.backs() 
{ 
   _l = 1; 
   if(_i-1 < 0) 
   { 
      document.getElementById(‘backs‘).disabled=‘True‘; 
   } 
   else 
   { 
      _i = _i - 1; 
   document.getElementById(‘play‘).disabled=‘‘; 
   document.getElementById(‘stops‘).disabled=‘True‘; 
   document.getElementById(‘next‘).disabled=‘‘; 
   adRotator.loads(); 
   } 
} 

/* 间隔时间 */ 
function adRotator.set() 
{ 
   var _sfc = document.getElementById(‘second‘).value; 
   if (isInteger(_sfc)) 
   { 
     _sf = _sfc * 1000; 
   } 
   else 
   { 
     alert(‘提示：只能输入数字！‘); 
     document.getElementById(‘second‘).value=1; 
     document.getElementById(‘second‘).select(); 
   } 
} 

/* 字符检测 */ 
function isInteger(str) 
{  
  var regu = /^[-]{0,1}[0-9]{1,}$/; 
  return regu.test(str); 
} 

/* 暂停 */ 
function adRotator.stops() 
{ 
   _v = 1; 
} 

/* 添加图片,还要加的话注意图片名字就好了,后面400,300是大小 */ 
adRotator.add("1.jpg",400,300); 
adRotator.add("2.jpg",400,300); 
adRotator.add("3.jpg",400,300); 


把以上文件存为一个JS文件 

在下面文件中引用即可 

<style type="text/css"> 
<!-- 
body { font-size:12px; 
} 
input { 
    border-right: #7b9ebd 1px solid; 
padding-right: 2px; 
border-top: #7b9ebd 1px solid; 
padding-left: 2px; 
font-size: 12px; 
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); 
border-left: #7b9ebd 1px solid; 
cursor: hand; 
color: black; 
padding-top: 2px; 
border-bottom: #7b9ebd 1px solid; 
} 
button { 
    border-right: #7b9ebd 1px solid; 
padding-right: 2px; 
border-top: #7b9ebd 1px solid; 
padding-left: 2px; 
font-size: 12px; 
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); 
border-left: #7b9ebd 1px solid; 
cursor: hand; 
color: black; 
padding-top: 2px; 
border-bottom: #7b9ebd 1px solid; 
} 
--> 
</style> 
<script language="javascript" src="test.js"> 
</script> 

     
<body > 
<div id="rotatorPlayer"></div> 



<input type="button" name="play" value="开始播放"  disabled="True"/> 
<input type="button" name="stops" value="暂停" /> 
<input type="button" name="backs" value="上一张"  disabled="true"/> 
<input type="button" name="next" value="下一张" />   
<input type="text" id="second" value="3" size="3" maxlength="2"> 
秒 
<input type="button" value="设置时间"  /> 



<input name="image" type="text" size="65"/> 


一个非常棒的播放器,可惜如果图片是非常大的话,那结果有点惨!

　　出处至：http://xiaobingandxiaoer.iteye.com/blog/1917696

 

以上是关于js 技巧 广告JS代码效果大全 的主要内容，如果未能解决你的问题，请参考以下文章

js 技巧 广告JS代码效果大全

倒计时广告关闭案例实现 js js小技巧

JS页面跳转大全

JS使用cookie实现只出现一次的广告代码效果

JS实现弹性漂浮广告代码

苹果CMS怎么添加广告，js怎么调用？