灵活实用的页面广告实例---广告-为中国网络技术提供点滴动力-iyit.net-易特网络技术！

　　通行证: 用户密码

域名空间　下载中心　 社区论坛　信息公告 MY小屋

联系我们
设为首页
加入收藏

QQ,ASP,PHP,JSP,XML,SQL,.Net,编程程序网页图象建站经验私服




	当前位置：首页>>编程开发>>asp专区>>正文	新版上线！[旧版]

注:打开慢时请稍等

灵活实用的页面广告实例

http://www.iyit.net 日期：2006-6-7 10:55:39 来源：不详点击：

【参加讨论】灵活实用的页面广告实例

目前，许多主页上流行放置一个浮动层的广告图像（通常位于页面右下方），显示在文字层之上，当页面上下滚动时，广告图像并不随页面滚动，它总能在窗口中保持一个固定位置。本程序就是这种广告效果的一个实例，并在原有的基础上增加了拖动功能，如果在浏览页面时需要观察的内容正好被广告图像遮挡，可将广告图像拖到其它位置。并解决了图像拖动中鼠标按键的Click动作与执行广告图像链接的Click动作之间的冲突。直接点击广告图像即可执行图像链接，而在图像拖动过程中的鼠标按下和释放的动作不会触发广告链接。这样改进后，用户在浏览你的页面时会感到更加方便、自然。
程序是由JavaScript脚本语言编写的，并不复杂，为了节省文章篇幅起见，就不在此处对程序原理作过多的说明了，而是在后面的程序文档中给出详实的注释语句。读者通过阅读注释说明就会明了实现的原理，并可从中了解到如何在屏幕上定位图像，拖动图像等许多动态HTML语句的编程方法。如果想直接使用这个程序，只要将演示页面的相应内容复制到自己页面内的对应位置就可以使用了。
程序文档分为二个部分，dragtest.htm是演示用的主页面程序，mydrag.js是由主页面调用的外部脚本程序文件，还使用了一个演示用的图像文件：myimage.gif 。将主页面文件、脚本文件和图像文件放置在相同目录下，就可正常使用。具体的程序文档内容如下：
（一）·简化的主页面演示程序文档：dragtest.htm
<html>
<head>
<title>可拖动的广告图像演示页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
</head>
<body bgcolor="#FFFFFF" style="font-size:9pt;color:'#555500';">




<DIV ID="elDRAGone"><a href="http://www.sohu.com" onclick="return if_link();"> <img src="http://www.iyit.net/Files/BeyondPic/2006-6/7/066710553991109.gif"" border="0" alt="可拖动到任意位置！"><a></DIV>
<SCRIPT LANGUAGE="JavaScript">
/*连续输出多个文字串，供页面演示用。*/
for(i=0;i<50;i++){
document.write("这是一个“可拖动的广告图像”演示程序。<br><br>");
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" src=mydrag.js>
/*调用图像拖动控制程序的外部脚本文件*/
/*注意此脚本的调用要放置在body区域的下部*/
</SCRIPT>
</body>
</html>

（二）·由主页面调用的外部脚本程序文档：mydrag.js
///////外部脚本控制程序开始///////
///////程序名：mydrag.js ///////
//记录页面的垂直滚动位置的变量。
lastScrollY=0;
//在程序中校准图像在页面中的位置。
with (document.all.elDRAGone) {
style.pixelTop=offsetTop;
style.pixelLeft=offsetLeft;
}
//在页面上定位图像的函数。
function position_img() {
//计算出页面垂直滚动的偏移量。
diffY = document.body.scrollTop-lastScrollY;
//保存本次页面滚动位置。
lastScrollY=document.body.scrollTop;
//移动图像到原来的窗口位置。
document.all.elDRAGone.style.pixelTop += diffY;
}
//建立记录图像初始位置的变量，用于计算图像是否被拖动过。
originX=originY=0;
//如果图像被拖动过，则offset_pixel变量的值大于0。
offset_pixel=0;
//记录图像在文档中的现行坐标值。
currentX = currentY = 0;
//保存被拖动对象的变量。
whichEl = null;
//onmousedown事件调用的图像抓取函数。
function grabEl() {
  //只允许用鼠标左键拖动！
  if (event.button !=1) {return;}
  //将鼠标点击的对象存入whichEl变量。
  whichEl=event.srcElement;
  //判断是否为可拖动的对象。
  while(whichEl.id.indexOf("DRAG")==-1){
   whichEl=whichEl.parentElement;
   if (whichEl==null){return;}
  }
  //记录图像抓取时的初始窗口位置。
  originX=event.clientX;
  originY=event.clientY;
  //将拖动判别变量设为0值。
  offset_pixel=0;
  //校准图像在文档上的位置。
  whichEl.style.pixelLeft=whichEl.offsetLeft;
  whichEl.style.pixelTop=whichEl.offsetTop;
  //记录图像相对于文档的现行位置坐标。
  currentX=event.clientX+document.body.scrollLeft;
  currentY=event.clientY+document.body.scrollTop;
}
//onmousemove事件调用的图像移动函数。
function moveEl() {
  //如果没有抓取拖动的对象，则返回。
  if (whichEl==null){return;}
  //如果拖动了图像，则将变量offset_pixel
  //赋予大于0的值，以标记图像已被拖动。
  //从而使图像在拖动完成后不执行链接功能。
  offset_X=Math.abs(event.clientX-originX);
  offset_Y=Math.abs(event.clientY-originY);
  offset_pixel=offset_X+offset_Y;
  //计算拖动时新的文档坐标的位置。
  newX=event.clientX+document.body.scrollLeft;
  newY=event.clientY+document.body.scrollTop;
  //计算出现行位置与拖动前初始位置的偏差。
  distanceX=newX-currentX;
  distanceY=newY-currentY;
  //用现行位置更新初始位置变量。
  currentX=newX;
  currentY=newY;
  //实际移动图像的位置。
  whichEl.style.pixelLeft +=distanceX;
  whichEl.style.pixelTop +=distanceY;
  event.returnValue=false;
}
//onmouseup函数调用的图像放置函数。
//表明拖动过程结束。
function dropEl() {
  whichEl=null;
}
//根据图像是否被拖动过来决定是否执行
//与图像有关的链接。
function if_link(){
if(offset_pixel>0)
    //如果图像被拖动过，则此函数返回假，
    //不执行与图像有关的链接。
  return false;
else
    //否则返回真值，执行图像的链接。
  return true;
}
//改变可拖动对象为十字光标的句柄函数。
function curEl(){
Over_Element=event.srcElement;
  while(Over_Element.id.indexOf("DRAG")==-1){
   Over_Element=Over_Element.parentElement;
   if (Over_Element==null){return;}
  }
  event.srcElement.style.cursor = "move";
}

  //以下是在文档中设定的鼠标事件句柄。
  document.onmousedown = grabEl;
  document.onmousemove = moveEl;
  document.onmouseup = dropEl;
  document.onmouseover = curEl;
  //定时调用图像移动函数，此时为1秒。
  action = window.setInterval("position_img()",1000);
//////////外部脚本控制程序结束//////////////////

本程序在IE 4.0以上版本的浏览器下使用通过。

文章署名：一帆
作者姓名：赵莉丽．
电子邮件：cnyf@21cn.com

【本文版权归作者与奥索网共同拥有，如需转载，请注明作者及出处】

编辑：黑鹰　[发送给好友] [打印本页] [关闭窗口] [返回顶部]
上一篇：如何用javascript识别Netscape 6 浏览器
下一篇：避免表单的重复提交又一方法（js）
转载请注明来源：www.iyit.net
特别声明： 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。

　相关文章

用php实现广告轮播	随机广告显示(PHP函数)	用PHP实现小型站点广告管理
一个广告轮播系统的例子（内含文件上传	动态显示图片的函数（显示广告条）	动态显示图片的函数（显示广告条）
建立一个广告交换及跟踪系统	广告播放和跟踪系统的制作	动态广告管理程序制作例子
一个基于ASP的标题广告管理系统（一）	一个基于ASP的标题广告管理系统（二）	一个基于ASP的标题广告管理系统（三）
DW MX实例：动态广告管理	打击广告防毒部分QQ号码需重新激活	教你清除QQ空间右上方广告
用AJAX跟踪Google Adsense广告点击	动态显示图片的函数（显示广告条）	广告轮播
摆脱广告骚扰还我清静网络世界	什么是广告软件Adware	什么是广告软件Adware
狙击疯狂的 Windows 信使广告	网站广告怎样做效果最好？	各类个人网站有效地赚广告费体会谈