|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
缺点:正版成本价格贵(盗版就不说了)、不够安全,大多数服务器用windows系统,没有linux安全天真有用的页面告白实例
今朝,很多主页下流行安排一个浮动层的告白图象(一般位于页面右下方),显现在笔墨层之上,当页面高低转动时,告白图象其实不随页面转动,它总能在窗口中坚持一个流动地位。本程序就是这类告白效果的一个实例,并在原本的基本上增添了拖动功效,假如在扫瞄页面时必要察看的内容恰好被告白图象遮挡,可将告白图象拖到别的地位。并办理了图象拖动中鼠标按键的Click举措与实行告白图象链接的Click举措之间的抵触。间接点击告白图象便可实行图象链接,而在图象拖动过程当中的鼠标按下和开释的举措不会触发告白链接。如许改善后,用户在扫瞄你的页面时会感应加倍便利、天然。
程序是由JavaScript剧本言语编写的,其实不庞大,为了节俭文章篇幅起见,就不在此处对程序道理作过量的申明了,而是在前面的程叙文档中给出详确的正文语句。读者经由过程浏览正文申明就会了然完成的道理,并可从中懂得到怎样在屏幕上定位图象,拖动图象等很多静态HTML语句的编程办法。假如想间接利用这个程序,只需将演示页面的响应内容复制到本人页面内的对应地位就能够利用了。
程叙文档分为二个部分,dragtest.htm是演示用的主页面程序,mydrag.js是由主页面挪用的内部剧本程叙文件,还利用了一个演示用的图象文件:http://edu.cnzz.cn/NewsInfo/myimage.gif。将主页面文件、剧本文件和图象文件安排在不异目次下,便可一般利用。详细的程叙文档内容以下:
(一)・简化的主页面演示程叙文档:dragtest.htm
<html>
<head>
<title>可拖动的告白图象演示页面</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<STYLETYPE="text/CSS">
<!--
/*设定一个ID款式,称号中要包括DRAG字串,供程序辨认可拖动元件用。*/
#elDRAGone{
position:absolute;
left:600;top:300;
color:red;
width:120;
height:60;
z-index:3;
}
-->
</STYLE>
</HEAD>
</head>
<bodybgcolor="#FFFFFF"style="font-size:9pt;color:#555500;">
<!--在DIV标志的属性中指定后面设定的ID款式。-->
<!--注重<a>标志中的事务语句,-->
<!--由它挪用是不是实行链接举措的辨别函数,假如前往值为“假”,-->
<!--则不实行链接举措,反之则实行链接举措。-->
<DIVID="elDRAGone"><ahref="http://www.sohu.com">
/*挪用图象拖动把持程序的内部剧本文件*/
/*注重此剧本的挪用要安排在body地区的下部*/
</SCRIPT>
</body>
</html>
(二)・由主页面挪用的内部剧本程叙文档:mydrag.js
///////内部剧本把持程序入手下手///////
///////程序名:mydrag.js///////
//纪录页面的垂直转动地位的变量。
lastScrollY=0;
//在程序中校准图象在页面中的地位。
with(document.all.elDRAGone){
style.pixelTop=offsetTop;
style.pixelLeft=offsetLeft;
}
//在页面上定位图象的函数。
functionposition_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事务挪用的图象抓取函数。
functiongrabEl(){
//只同意用鼠标左键拖动!
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事务挪用的图象挪动函数。
functionmoveEl(){
//假如没有抓取拖动的工具,则前往。
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函数挪用的图象安排函数。
//标明拖动历程停止。
functiondropEl(){
whichEl=null;
}
//依据图象是不是被拖动过去决意是不是实行
//与图象有关的链接。
functionif_link(){
if(offset_pixel>0)
//假如图象被拖动过,则此函数前往假,
//不实行与图象有关的链接。
returnfalse;
else
//不然前往真值,实行图象的链接。
returntrue;
}
//改动可拖动工具为十字光标的句柄函数。
functioncurEl(){
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.onmou搜索引擎优化ver=curEl;
//准时挪用图象挪动函数,此时为1秒。
action=window.setInterval("position_img()",1000);
//////////内部剧本把持程序停止//////////////////
本程序在IE4.0以上版本的扫瞄器下利用经由过程。
文章签名:一帆
作者姓名:赵莉丽.
电子邮件:cnyf@21cn.com
【本文版权回作者与奥索网配合具有,如需转载,请说明作者及出处】只要你想学,就没什么优缺点,上面那位大哥已经把网上的评论说了,但我认为想学哪个都一样,不然它就不可能在当今时代数字艺术方面存活到今天 |
|