<marquee width=358>欢迎来到月影社区,希望这里可以成为您美丽的梦幻花园,如果你觉得这里好请分享给您的朋友!- wf66.com</marquee> 将月影社区设置为您的首页将月影社区地址加入到您的收藏栏
月影社区时尚音乐音乐查询IP手机许愿之瓶最新更新文件加密访客留言爱音乐
欢迎您,首页 >> 信息中心 >> 灵活实用的页面广告实例

请输入您关键字:


灵活实用的页面广告实例

推荐查看本文HTML版本


灵活实用的页面广告实例
目前,许多主页上流行放置一个浮动层的广告图像(通常位于页面右下方),显示在文字层之上,当页面上下滚动时,广告图像并不随页面滚动,它总能在窗口中保持一个固定位置。本程序就是这种广告效果的一个实例,并在原有的基础上增加了拖动功能,如果在浏览页面时需要观察的内容正好被广告图像遮挡,可将广告图像拖到其它位置。并解决了图像拖动中鼠标按键的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">
<!--
/*设定一个ID样式,名称中要包含DRAG字串,供程序识别可拖动元件用。*/
  #elDRAGone { 
    position: absolute;
    left: 600; top: 300;
    color: red;
    width: 120;
    height:60;
    z-index:3;
  }
-->
</STYLE>
</HEAD>
</head>
<body bgcolor="#FFFFFF" style="font-size:9pt;color:'#555500';">
<!-- 在DIV标记的属性中指定前面设定的ID样式。-->
<!-- 注意<a>标记中的onclick="return if_link();"事件语句, -->
<!-- 由它调用是否执行链接动作的判别函数,如果返回值为“假”, -->
<!-- 则不执行链接动作,反之则执行链接动作。-->
<DIV ID="elDRAGone"><a href="http://www.sohu.com" onclick="return if_link();"> <img src="myimage.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;
  //计算拖动时新的文档坐标的位置。 [月影读书频道 http://wf66.com/]
  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;   [月影社区 http://wf66.com/]
}
//onmouseup函数调用的图像放置函数。
//表明拖动过程结束。 [月影读书频道 http://wf66.com/]
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);
//////////外部脚本控制程序结束//////////////////

灵活实用的页面广告实例 2006-9-8
转到本主题第:[ 1 ]
相关评论

暂无评论

总计0页 [ ]上一页 下一页
发表评论(揪错)
呢称: * 您尚未登陆,请登录
来自: *
内容:
 

(为防止非法信息,您的言论提交后需要审核才能正常显示)

文学
精品文萃 情感天地 言情小说
网络小说 玄幻小说 悬疑恐怖
武侠小说 古典品谈 外国名著
儿童文学 会员原创 学习园地
杂谈其它
娱乐
爆笑网文 星座占卜 影音动漫
娱乐新闻 影视剧情
诗词
青竹诗歌 个人诗集 宋词雅赏
全唐诗录
新闻
国际新闻 国内新闻 科技新闻
体育新闻
图片
图文专区 艺术长廊 桌面壁纸
精品素材 像素图片
漫画
单幅漫画 爆笑四格 连环漫画
电脑
电脑入门 图形图像 编程开发
游戏
我爱Q宠 最新攻略 最新秘籍
游戏新闻 技巧心得
经济
帕格节电 财经资讯 股市证券
生活
百科知识 外语学院 潮流时尚
健康医疗 宠物花卉 汽车地带
行走天下
美食
面食甜点 家常菜品 药膳食疗
美食天下 烹饪技巧 松辽风味
燕京风味 巴蜀风味 滇黔风味
赣江风味 徽皖风味 闽台风味
齐鲁风味 中州风味 岭南风味
荆楚风味 三晋风味 淞沪风味
苏扬风味 潇湘风味 钱塘风味
民族风味 素斋仿荤
营销
管理杂谈 谈经论道 培训激励
经营战略 职场生涯 公关交际
关于我们版权声明本站导航友情连结作品演示 TOP↑
本论坛言论纯属发表者个人意见,与£月影社区£立场无关。 皖ICP备16024038号-1
禁止发布任何色情/政治/反动相关信息让我们共同来营造一个属于我们的梦幻家园
Copyright ©2001-2006 MoonShadow. All rights reserved.  Version 4.0  Licence 2006.4.2
建站天数:7216天 本站基于ASP+JS构建,完全自主开发,版权归属月影社区 管理员QQ:23165062 Time:15125ms