js 技巧 (十)广告JS代码效果大全 【3】
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代码效果大全 【3】的更多相关文章
- js 技巧 (十)广告JS代码效果大全 【1】
广告JS代码效果大全 1.[普通效果] 现在很多网站广告做的如火如荼,现在我就来介绍一下常见的对联浮动广告效果的代码使用方法,介绍的这种效果,在1024*768分辨率下正常显示,在800*60 ...
- js 技巧 (十)广告JS代码效果大全 【2】
2.[鼠标感应] 与前面一个代码不同的是,当鼠标移动到广告图片上是可以感应显示另外设置好的广告大图效果,下面就是实现效果所需代码: function bigshow(){ docume ...
- Eclipse用法和技巧十:显示代码outline
在一个文件中快速找到某一个方法或者某一个作用域,可以使用 Ctrl+O或者Ctrl+F3,快速显示当前代码的outline,进行快速查找.效果如下: 这里主要是补充一些后续操作,能更加方 ...
- 常用JS技巧[转]
作者:72妃 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); even ...
- js 表单验证控制代码大全
js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Js弹性漂浮广告代码
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- JS实现简单的运行代码 & 侧边广告
/* JS实现简单的运行代码功能 */<!doctype html> <html> <head> <meta charset="utf-8" ...
- js页面跳转参考代码大全
整理一下JS页面跳转参考代码 第一种: <script language=/"javascript/" type=/"text/javascript/&qu ...
随机推荐
- jquery datatable无数据提示不居中显示
原文地址:https://www.jianshu.com/p/fc4784d11722 昨天遇到一个问题,datatable生成的表格没有数据,但是“No data found”没有居中,根本原因是c ...
- 3198: [Sdoi2013]spring【容斥原理+hash】
容斥是ans= 至少k位置相等对数C(k,k)-至少k+1位置相等对数C(k+1,k)+至少k+2位置相等对数*C(k+2,k) -- 然后对数的话2^6枚举状态然后用hash表统计即可 至于为什么要 ...
- bzoj 1017: [JSOI2008]魔兽地图DotR【树形dp+背包】
bzoj上是一个森林啊--? dp还是太弱了 设f[i][j][k]为到点i,合成j个i并且花费k金币能获得的最大力量值,a[i]为数量上限,b[i]为价格,p[i]为装备力量值 其实这个状态设计出来 ...
- bzoj 4276: [ONTAK2015]Bajtman i Okrągły Robin【线段树+最大费用最大流】
--因为T点忘记还要+n所以选小了所以WA了一次 注意!题目中所给的时间是一边闭一边开的区间,所以读进来之后先l++(或者r--也行) 线段树优化建图,很神.(我记得还有个主席树优化建树的?)首先考虑 ...
- 洛谷 P4009 汽车加油行驶问题 【最小费用最大流】
分层图,建k层,设(i,j,0)为点(i,j)的满油状态,全图的流量都是1,因为重复走到一个点没有意义.如果当前点是加油站,那么它向它上左的点连费用为a的边,向下右连费用为a+b的边: 否则,这个点的 ...
- 洛谷 P2763 试题库问题【最大流】
s向所有类别属性连流量为当前类别属性需要的个数的边,所有题目向t连流量为1的边(表示只能选一次),所有属性向含有它的题连容量为1的边.跑一变dinic,结果小于m则无解,否则看每一个类别属性连出去的题 ...
- SPOJ GSS3 线段树系列1
SPOJ GSS系列真是有毒啊! 立志刷完,把线段树搞完! 来自lydrainbowcat线段树上的一道例题.(所以解法参考了lyd老师) 题意翻译 n 个数, q 次操作 操作0 x y把 Ax 修 ...
- POJ3320 Jessica's Reading Problem
Bryce1010模板 #include <stdio.h> #include <string.h> #include <stdlib.h> #include &l ...
- 转-Mac下Apache Tomcat安装配置
ava Web如果稍微知道一点,一般对Tomcat都不会陌生,Apache是普通服务器,本身只支持html即普通网页,可以通过插件支持PHP,还可以与Tomcat连通(单向Apache连接Tomcat ...
- [转]Asp.net MVC中Html.Partial, RenderPartial, Action,RenderAction 区别和用法
本文转自:http://www.cnblogs.com/gesenkof99/archive/2013/06/03/3115052.html Partial 和RenderPartial:这两个的性质 ...