仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 443|回复: 9
打印 上一主题 下一主题

[学习教程] ASP网页设计天真有用的页面告白实例

[复制链接]
海妖 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 22:33:22 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

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


【本文版权回作者与奥索网配合具有,如需转载,请说明作者及出处】只要你想学,就没什么优缺点,上面那位大哥已经把网上的评论说了,但我认为想学哪个都一样,不然它就不可能在当今时代数字艺术方面存活到今天
莫相离 该用户已被删除
沙发
发表于 2015-1-17 05:22:17 | 只看该作者
Application:这个存储服务端的数据,如果不清除,会直到web应用程序结束才清除(例如重启站点)
变相怪杰 该用户已被删除
板凳
发表于 2015-1-20 12:34:37 | 只看该作者
我想问如何掌握学习节奏(先学什么再学什么)最好详细点?
兰色精灵 该用户已被删除
地板
发表于 2015-1-29 07:09:23 | 只看该作者
我就感觉到ASP和一些常用的数据库编程以及软件工程方面的思想是非常重要的。我现在也在尝试自己做网页,这其中就用到了ASP,我想它的作用是可想而知的。
柔情似水 该用户已被删除
5#
发表于 2015-2-5 23:56:39 | 只看该作者
在平时的学习过程中要注意现学现用,注重运用,在掌握了一定的基础知识后,我们可以尝试做一些网页,也许在开始的时候我们可能会遇到很多问题,比如说如何很好的构建基本框架。
深爱那片海 该用户已被删除
6#
发表于 2015-2-14 09:28:24 | 只看该作者
掌握asp的特性而且一定要知道为什么。
乐观 该用户已被删除
7#
发表于 2015-3-4 05:20:11 | 只看该作者
ASP.Net和ASP的最大区别在于编程思维的转换,而不仅仅在于功能的增强。ASP使用VBS/JS这样的脚本语言混合html来编程,而那些脚本语言属于弱类型、面向结构的编程语言,而非面向对象,这就明显产生以下几个问题:
愤怒的大鸟 该用户已被删除
8#
发表于 2015-3-11 17:30:22 | 只看该作者
以HTML语言整合(HTML负责界面上,ASP则负责功能上)形成一个B/S(浏览器/服务器)模式的网页程序。
小女巫 该用户已被删除
9#
发表于 2015-3-19 03:51:06 | 只看该作者
接下来就不能纸上谈兵了,最好的方法其实是实践。实践,只能算是让你掌握语言特性用的。而提倡做实际的Project也不是太好,因为你还没有熟练的能力去综合各种技术,这样只能使你自己越来越迷糊。
谁可相欹 该用户已被删除
10#
发表于 2015-3-27 07:10:27 | 只看该作者
先学习用frontpage熟悉html编辑然后学习asp和vbscript建议买书进行系统学习
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-30 13:52

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表