由于工作需要,最主要的是为方便代码的管理,最近参考了一些专家的贴子,做了一个漂浮对联广告的JAVASCRIPT类.功能是基本实现了,但在增加一个关闭按钮时,onclick事件不生效,在网上找了好多资料,都找不到合适的。因为网上的对联广告很少是封装成JAVASCRIPT类的。最终还是解决了。写下文章,给有需要的人参考。
说下我的方法吧
事件方法
//关闭对联广告(colinmok修改20080426)
SmileAdver_Class.onClick=function()
{
document.getElementById('smilediv1').style.visibility='hidden';
document.getElementById('smilediv2').style.visibility="hidden";
}
调用事件:
document.write(" <br/> <a href='#' onClick='SmileAdver_Class.onClick();' alt='关闭对联广告'>关闭 </a>");
最后测试通过的漂浮对联广告JAVASCRIPT类的代码如下(有需要的同仁直接复制,也奉劝一句,别人有困难时请尽自己的最大能力去帮助,而不是以老卖老,去打击别人的信心):
<Script Language=Javascript>
<!--
漂浮对联广告JS封装类(Author:colinmok Time:2008-04-26日修正)
function SmileAdver_Class(){
var leftImageArray = new Array(); //保存左边的广告图片数组
var rightImageArray = new Array(); //保存右边的广告图片数组
var leftPos,rightPos; //leftPos = 左边广告的距左边栏位置(px) rightPos = 右边广告的距右边栏位置(px)
var leftTop,rightTop; //leftTop = 左边广告的距顶边栏位置(px) rightTop = 右边广告的距顶边栏位置(px)
var lastScrollY=0;
leftPos = rightPos = 1; //默认为10
leftTop = rightTop = 1; //默认为150
this.setLeftPos = function(value){
if(isNaN(value)){value = 10;} //非数字则默认为10
leftPos = value;
}
this.setRightPos = function(value){
if(isNaN(value)){value = 10;} //非数字则默认为10
rightPos = value;
}
this.setLeftTop = function(value){
if(isNaN(value)){value = 15} //非数字则默认为15
leftTop = value;
}
this.setRightTop = function(value){
if(isNaN(value)){value = 15;} //非数字则默认为15
rightTop = value;
}
//添加左边的图片广告 addLeftImage(链接,图片地址,链接目标,图片提示,图片宽度,图片高度)
this.addLeftImage = function(href,image,target,title,width,height){
var imageArray = getImageArray(href,image,target,title,width,height);
if(imageArray != null){
leftImageArray[leftImageArray.length] = imageArray;
}
}
//添加右边的图片广告 addRightImage(链接,图片地址,链接目标,图片提示,图片宽度,图片高度)
this.addRightImage = function(href,image,target,title,width,height){
var imageArray = getImageArray(href,image,target,title,width,height);
if(imageArray != null){
rightImageArray[rightImageArray.length] = imageArray;
}
}
//内部添加广告图片使用,如果没有图片地址,则返回一个null值,否则返回一个数组
function getImageArray(href,image,target,title,width,height){
if(image == undefined){return null;} //没有图片地址,不添加
if(target == undefined ¦ ¦ target == ""){target = "_blank"}; //默认为_blank打开方式
target = " target=/"" + target + "/"";
if(title == undefined){ //广告图片title提示
title = "" ;
}else{
title = " title=/"" + title + "/"";
}
//链接以www.开头则自动加上http:// (否则链接时会链接错误)
if(href.toLowerCase().substring(0,4) == "www."){
href = "http://" + href;
}
if(image.toLowerCase().substring(0,4) == "www."){
image = "http://" + image;
}
return new Array(href,image,target,title,width,height);
}
//内部显示图片横幅所用 showImageDiv(div的名称,div的摆放方向(left,right),div的摆放位置,div层距顶部的位置,显示的图片数组变量)
function showImageDiv(div,pos,posPX,topPx,imageArray){
var i;
var extendname;
document.write(" <div id=/"" + div + "/" style=/"" + pos + ":" + posPX + "px;POSITION:absolute;TOP:" + topPx + "px;/">");
for(i=0; i < imageArray.length; i++){
//20080424日colinmok修改
extendname=getExtendName(imageArray[i][1]);
if(extendname=='swf' ¦ ¦extendname=='SWF'){
document.write(
' <button style="width:'+imageArray[i][4]+'px;height:'+imageArray[i][5]+
'px;background:transparent;border:0px;padding:0px;cursor:hand;margin:0px;" οnfοcus="this.blur();" οnclick="window.open(/''+imageArray[i][0]+'/');">' +
' <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'+
'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"'+
'width="'+ imageArray[i][4] +'"'+
'height="'+ imageArray[i][5] +'">'+
' <param name="movie" value="'+ imageArray[i][1] +'">'+
' <param name="quality" value="high">'+
' <param name="wmode" value="opaque" />'+
' <embed src="'+ imageArray[i][1] +'" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="'+ imageArray[i][4] +'" height="'+ imageArray[i][5] +'">'+
' </embed>'+
' </object>'+
' </button>');
}else{
document.write(" <a href=/"" + imageArray[i][0] + "/" "+ imageArray[i][2]+ imageArray[i][3] + "> <img src=/""+ imageArray[i][1] + "/" border=/"0/" "+ imageArray[i][3] + "> </a>");
}
document.write(" <br/> <a href='#' onClick='SmileAdver_Class.onClick();' alt='关闭对联广告'>关闭 </a>");//单击事件调用
if(i != imageArray.length-1){
document.write(" <table border=/"0/" cellpadding=/"0/" cellspacing=/"0/"> <tr> <td height=10> </td> </tr> </table>");
}
}
document.write(" </div>");
}
//滚动广告对联图片
this.scroll = function(){
showImageDiv("smilediv1","left",leftPos,leftTop,leftImageArray);
showImageDiv("smilediv2","right",rightPos,rightTop,rightImageArray);
window.setInterval(scrollImage,1);//滚动
}
this.scrollImg= function(){
scrollImage();
}
//内部使用用来滚动广告图片
function scrollImage(){
var diffY,percent;
diffY=document.body.scrollTop;
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.all.smilediv1.style.pixelTop+=percent;
document.all.smilediv2.style.pixelTop+=percent;
lastScrollY=lastScrollY+percent;
}
//采用正则表达式,来去除两边的空格,只需以下代码(colinmok增加20080424)
String.prototype.trim = function(){
return this.replace(/(^/s*) ¦(/s*$)/g,"");
}
//外部使用:赋值时,截取广告的图片或动画的扩展名(colinmok增加20080424)
this.setExtendName=function(value){
var strUrl;
strUrl=value.trim();
var pointNum=strUrl.lastIndexOf(".");
var tempstr=strUrl.substr(pointNum+1,strUrl.length);
extendName=tempstr;
}
//内部使用:截取广告的图片或动画的扩展名(colinmok增加20080424)
function getExtendName(value){
var strUrl;
strUrl=value.trim();
var pointNum=strUrl.lastIndexOf(".");
var tempstr=strUrl.substr(pointNum+1,strUrl.length);
return tempstr;
}
//关闭对联广告(colinmok修改20080425)
SmileAdver_Class.onClick=function()
{
document.getElementById('smilediv1').style.visibility='hidden';
document.getElementById('smilediv2').style.visibility="hidden";
}
}
///类结束
/类的使用示例代码(测试用)
var SmileAdver = new SmileAdver_Class();
SmileAdver.setLeftPos(5);
SmileAdver.setRightPos(5);
SmileAdver.setLeftTop(400);
SmileAdver.setRightTop(400);
SmileAdver.addLeftImage("http://www.baidu.com","flash.swf","","测试","100","200");
SmileAdver.addRightImage("http://www.baidu.com","logo.gif","","测试","100","200");
SmileAdver.scroll();
-->
</Script>