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.itemssetInterval('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_closevar imgleftwindow.screen.width>800 ? imgheight_close=120:imgheight_close=120window.screen.width>800 ? imgleft=8:imgleft=122function myload(){myleft.style.top=document.body.scrollTop+document.body.offsetHeight-imgheight_close;myleft.style.left=imgleft;leftmove();}function leftmove(){myleft.style.top=document.body.scrollTop+document.body.offsetHeight-imgheight_close;myleft.style.left=imgleft;setTimeout("leftmove();",50)}function MM_reloadPage(init) { //reloads the window if Nav4resizedif (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;οnresize=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=88height=31 border=0></a>");elsedocument.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=20align=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

转载于:https://www.cnblogs.com/bcphp/p/7080361.html

js 技巧 (十)广告JS代码效果大全 【3】相关推荐

  1. php5分钟倒计时代码,JS实现十分钟倒计时代码实例

    编写JS倒计时代码需要用到很多JavaScript知识,比如:if函数,Math.floor,定时器setInterval等等,如有不清楚的小伙伴可以参考PHP中文网的相关文章,或者访问 JavaSc ...

  2. html倒计时代码执行操作,JS实现十分钟倒计时代码实例

    编写JS倒计时代码需要用到很多JavaScript知识,比如:if函数,Math.floor,定时器setInterval等等,如有不清楚的小伙伴可以参考PHP中文网的相关文章,或者访问 JavaSc ...

  3. 自学js第十天:JS对象和this和执行上下文

    复习数组基础方法 作用域 函数 小测试: <!DOCTYPE html> <html lang="en"><head><meta char ...

  4. JS常用脚本+html代码大全+对联广告代码效果大全

    JS常用脚本 1. on_contextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border on_co ...

  5. Eclipse用法和技巧十:显示代码outline

    在一个文件中快速找到某一个方法或者某一个作用域,可以使用 Ctrl+O或者Ctrl+F3,快速显示当前代码的outline,进行快速查找.效果如下:        这里主要是补充一些后续操作,能更加方 ...

  6. (转载)js技巧 .

    http://blog.csdn.net/yinshuhai/article/details/1002047 如果你找的javascript的东西的话,建议你 ctrl+F 直接在这个页上找,因为这里 ...

  7. 网页JS弹出广告代码,头部,右下角,网页中漂浮,对联广告代码等大全

    01.借鉴:网页JS弹出广告代码,头部,右下角,网页中漂浮,对联广告代码等大全02.网页头部弹出广告:03.<!--首页头部广告--> 04.<script src="ht ...

  8. html广告倒计时代码,js实现倒计时广告效果

    页面上经常弹出一些广告,过了几秒之后才出现关闭广告按钮(或者关闭按钮才可点)或者剩余指定时间才给你跳过广告(其实从用户的角度看,这个效果挺烦人的哈哈哈),效果大概如下图: js实现倒计时广告效果.gi ...

  9. js随机飘动的广告图片代码demo效果示例(整理)

    <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content=& ...

  10. sohu广告js代码调研

    目前我迫切需要关注一种sohu弹窗广告(它们叫做背投广告)的实现方法,为此对其源码做了研究. 目前打开搜狐新闻主页 http://news.sohu.com 就会自动弹出一个背投广告. 这种背投广告的 ...

最新文章

  1. 中国挪动批改KPI查核制度将器重客户满意度
  2. Android学习笔记-Service
  3. 【SQL】SQL语句多表联合查询
  4. Spring实战1:Spring初探
  5. linux mint 硬件配置,安装 - 硬件设置 - 《Linux Mint 学习笔记》 - 书栈网 · BookStack...
  6. 魔域几点服务器重置,服务器维护后第一轮BOSS时间以及每张地图的BOSS点!
  7. cmake的使用--从零建立一个小cmake工程
  8. Boost:使用行列式函数和transform()算法计算许多4x4矩阵的行列式
  9. mysql数据库的分离_数据库分离和附加 (SQL Server)
  10. php带参数跳转页面,如何带参数跳转php界面_后端开发
  11. 工作 10 年,月薪过万者不足三成,程序员却笑了!
  12. 常见问题_轴承零件加工常见问题?
  13. vip forum.php,DZ论坛突破VIP回复查看内容
  14. gsp计算机系统测试题答案,新版GSP计算机系统专业知识培训测试题
  15. 用EasySysprep封装Win7系统
  16. 三国杀服务器维修,三国杀云服务器
  17. 支付宝个人支付接口(蚂蚁金服官方接口)
  18. 吐血整理 python最全习题100道(含答案)持续更新题目,建议收藏!
  19. 天平应什么放置_天平的使用规程
  20. 【Storm】【二】Storm和流处理简介

热门文章

  1. phpstudy集成安装环境所需运行库vc9-vc14(32+64位)下载集合
  2. 二叉树遍历的一些非递归算法
  3. KITTI立体匹配数据集解析
  4. 电脑屏幕变色了怎么调回来,电脑屏幕颜色怎么改
  5. 二级java考什么_计算机二级Java考试考什么内容?
  6. talib python文档_talib 中文文档(一):快速开始
  7. 计算机组成原理课程设计:复杂模型机
  8. cs231n作业——softmax
  9. 离散数学 计算机应用,计算机应用融入离散数学的思考
  10. 机器学习与数学基础知识(二)