楼主: keaide

[参考文档] JavaScript动态网页制作宝库

[复制链接]
论坛徽章:
456
ITPUB年度最佳版主
日期:2011-12-28 15:24:18马上有对象
日期:2014-02-19 11:55:14马上有钱
日期:2014-02-19 11:55:14马上有房
日期:2014-02-19 11:55:14马上有车
日期:2014-02-19 11:55:14ITPUB年度最佳版主
日期:2014-02-19 10:05:27优秀写手
日期:2013-12-18 09:29:09ITPUB社区千里马徽章
日期:2013-06-09 10:15:34ITPUB年度最佳版主
日期:2013-01-30 17:30:25版主9段
日期:2012-07-03 02:21:03
31#
 楼主| 发表于 2006-5-25 22:54 | 只看该作者
在引用本文程序制作表单是要注意的是各复选框的名称,程序默认的是:c1、c2、c3......c9。如果改用其它名称时,要把这句程序:var checkboxname = "c"中的“c”换成你的实际名称前缀,但后面的序号一定要从1开始且要连续,否则程序将要修改。
  3、在每一个复选框的标记中加上一个:onclick="mycheck(this)"来调用这段Javascript程序,使其每次点击复选框时都用程序检测一遍已被选择的复选框数量并判断是否超过限制的数量。完成后的复选框代码如下(了限于篇幅,仅取三个作示范):
<input type="checkbox" name="c1" value="300" onclick="mycheck(this)">信息
<input type="checkbox" name="c2" value="400" onclick="mycheck(this)">咨询
<input type="checkbox" name="c3" value="800" onclick="mycheck(this)">投资
  至此制作完成,在浏览器中就可以看到预期的效果了。若是我们要求用户必须选择三个网站才能提交,那又怎么办?其实很简单,在程序中再增加下面这个检测函数:cnasubmit(),代码如下:
function cansubmit(){ //选择网站数量是否符合要求检测函数。
if (Num<MaxSelected) //如果已选择的网站数量没有满足要求,则弹出提示框。
alert("你只选了"+Num+"个网站,还需再选"+(MaxSelected-Num)+"个网站才能提交,谢谢合作!";
}
  然后在提交选单按钮的标记中加上一个事件:onclick="cnasubmit()"来调用检测程序,若不满足要求的选择数量,则弹出一个提示框,并在提示框中显示已选择的网站数和还增加的选择网站数,你看,这样是不是更贴近用户一些。

使用道具 举报

回复
论坛徽章:
456
ITPUB年度最佳版主
日期:2011-12-28 15:24:18马上有对象
日期:2014-02-19 11:55:14马上有钱
日期:2014-02-19 11:55:14马上有房
日期:2014-02-19 11:55:14马上有车
日期:2014-02-19 11:55:14ITPUB年度最佳版主
日期:2014-02-19 10:05:27优秀写手
日期:2013-12-18 09:29:09ITPUB社区千里马徽章
日期:2013-06-09 10:15:34ITPUB年度最佳版主
日期:2013-01-30 17:30:25版主9段
日期:2012-07-03 02:21:03
32#
 楼主| 发表于 2006-5-25 22:54 | 只看该作者
你见过这样的导航菜单吗?导航菜单围绕着网站Logo不停地旋转,而一旦你把鼠标移到菜单上,旋转立即停止,在显示网站logo的地方显示出这个菜单链接的内容简介,点击链接将链接到指定的网页。一旦你的鼠标离开菜单,导航菜单又继续不停地旋转。你看这种导航菜单是不是既吸引人又贴近用户。本文例子如下图所示。是不是想在自已的网页上也放上一个,其实制作起来也不太难。


  制作思路:要使页面的内容旋转起来,用图层和Javascript程序是肯定的了,要使图层的运动轨迹是一个圆,这要用到圆的参数方程,这是一个数学问题,不懂也没关系,程序我已写好,你只要复制就行了。关于鼠标指到某个链接就显示该链接的内容简介,这是图层的visible属性控制,用Dreamweaver的网友,用Behaviors很容易实现,不过在本文中我自编了一个小程序来控制图层的visible属性,以便不用Dreamweaver的网友也能很容易地做出本文的效果。

使用道具 举报

回复
论坛徽章:
456
ITPUB年度最佳版主
日期:2011-12-28 15:24:18马上有对象
日期:2014-02-19 11:55:14马上有钱
日期:2014-02-19 11:55:14马上有房
日期:2014-02-19 11:55:14马上有车
日期:2014-02-19 11:55:14ITPUB年度最佳版主
日期:2014-02-19 10:05:27优秀写手
日期:2013-12-18 09:29:09ITPUB社区千里马徽章
日期:2013-06-09 10:15:34ITPUB年度最佳版主
日期:2013-01-30 17:30:25版主9段
日期:2012-07-03 02:21:03
33#
 楼主| 发表于 2006-5-25 22:55 | 只看该作者
制作方法:
  1、把下面这段程序插入到网页源代码的<head>与</head>之间:
<style> //这是一个CSS样式表,用于定义图层的外观属性
<!--
.rotatediv {position:absolute;z-index:2;}
.nrjj {text-align: center;position:absolute;top:160px;left: 230px;width:200px;height:30px;background-color:#ffffff; visibility:hidden; z-index:1;}
.logo {text-align: center;position:absolute;top:160px;left: 230px;width:200px;z-index:0;}
-->
</style>
<script language="JavaScript">//程序开始
<!--
ns4 = (document.layers)? true:false //检测浏览器。
ie4 = (document.all)? true:false
function showobject(obj) { //显示指定的图层。
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}
function hideobject(obj) { //隐藏指定的图层。
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}
function rotateobj(ctrl) { //使菜单图层旋转还是停止旋转的函数。
if (ctrl) { //如果“ctrl”为真,则开始计算图层的移动坐标,开始旋转。
for (var i = 0; i < pos.length; i++) {
pos += inc;
objects.left = (r * Math.cos(pos)) + xoff
objects.top = (r * Math.sin(pos)) + yoff;}
rotateTimer = setTimeout("rotateobj(true)", 50); //每50祚秒刷新一次。
}
else //如果“ctrl”不为真,则停止旋转。
clearTimeout(rotateTimer);
}
function initobj() { //初始化函数,为图层的旋转准备基本数据
objects = new Array(rotatediv1, rotatediv2, rotatediv3, rotatediv4); //菜单图层对象数组
pos = new Array(); //菜单图层位置数组,存放初始位置的圆心角(弧度)。
pos[0] = 0;
for (var i = 1; i < objects.length; i++) {
pos = parseFloat(pos[i - 1] + ((2 * pi) / objects.length));
}
rotateobj(true);
}
var objects;
var pos;
var r = 100; //旋转半径,可根据需要修改。
var xoff = 280; //旋转中心X坐标
var yoff = 170; //旋转中心Y坐标
var pi = Math.PI;
var inc = pi / 180; //旋转步长,把分母改小,则旋转加快。
-->
</script>
  引用本程序时,注意以下几点:
  1)可通过修改旋转半径来调整旋转范围的大小;
  2)修改旋转中心的X、Y坐标,可以把旋转效果移到页面的任何地方。

使用道具 举报

回复
论坛徽章:
456
ITPUB年度最佳版主
日期:2011-12-28 15:24:18马上有对象
日期:2014-02-19 11:55:14马上有钱
日期:2014-02-19 11:55:14马上有房
日期:2014-02-19 11:55:14马上有车
日期:2014-02-19 11:55:14ITPUB年度最佳版主
日期:2014-02-19 10:05:27优秀写手
日期:2013-12-18 09:29:09ITPUB社区千里马徽章
日期:2013-06-09 10:15:34ITPUB年度最佳版主
日期:2013-01-30 17:30:25版主9段
日期:2012-07-03 02:21:03
34#
 楼主| 发表于 2006-5-25 22:55 | 只看该作者
2、在网页源代码的<body>与</body>之间插入下面的代码以制作导航菜单等图层:
<div ID="rotatediv1" CLASS="rotatediv" onMouseOver="showobject(nrjj1); rotateobj(false)" onMouseOut="hideobject(nrjj1);rotateobj(true)"> <p><a href="#" ><img src="image/dot.gif" width="11" height="8">链接 1</a><br></p></div>
<div ID="rotatediv2" CLASS="rotatediv" onMouseOver="showobject(nrjj2); rotateobj(false)" onMouseOut="hideobject(nrjj2); rotateobj(true)"><p><img src="image/dot.gif" width="11" height="8"><a href="#" >链接 2</a><br></p>
</div>
<div ID="rotatediv3" CLASS="rotatediv" onMouseOver="showobject(nrjj3); rotateobj(false)" onMouseOut="hideobject(nrjj3); rotateobj(true)"><p><a href="#"><img src="image/dot.gif" width="11" height="8">链接 3</a><br></p>
</div>
<div ID="rotatediv4" CLASS="rotatediv" onMouseOver="showobject(nrjj4); rotateobj(false)" onMouseOut="hideobject(nrjj4); rotateobj(true)"><p><img src="image/dot.gif" width="11" height="8"><a href="#" >链接 4</a><br></p>
</div>
<div ID="nrjj0" CLASS="logo"><p>黄山村夫站<br>http://fym888.go.163.com</p></div>
<div ID="nrjj1" CLASS="nrjj"><p><img src="image/a6ball.gif" width="18" height="18">链接1内容简介 </p></div>
<div ID="nrjj2" CLASS="nrjj"><p>链接2内容简介 </p></div>
<div ID="nrjj3" CLASS="nrjj"><p>链接3内容简介 </p></div>
<div ID="nrjj4" CLASS="nrjj"><p>链接4内容简介</p></div>
<script LANGUAGE="JavaScript">
/* 下面是准备一些变量的初值,为事件调用程序作基础*/
var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);
var rotatediv1 = (isNS) ? document.rotatediv1 : document.all.rotatediv1.style;
var rotatediv2 = (isNS) ? document.rotatediv2 : document.all.rotatediv2.style;
var rotatediv3 = (isNS) ? document.rotatediv3 : document.all.rotatediv3.style;
var rotatediv4 = (isNS) ? document.rotatediv4 : document.all.rotatediv4.style;
var nrjj1 = (isNS) ? document.nrjj1 : document.all.nrjj1.style;
var nrjj2 = (isNS) ? document.nrjj2 : document.all.nrjj2.style;
var nrjj3 = (isNS) ? document.nrjj3 : document.all.nrjj3.style;
var nrjj4 = (isNS) ? document.nrjj4 : document.all.nrjj4.style;
initobj();
</script>
  上面的代码看起来有点复杂,你若对HTML不熟悉的话,可以不要管它,只要把其中的文本、图片和超级链接换成你所需要的就行了。

  至此,制作结束,一个美观实用的旋转导航菜单就做好了。在实际制作过程中,由菜单内容简介的图层是设置成隐藏的,若是用DW或FP的网友可能无法编辑,解决的办法是:
  1)在源代码中编辑;
  2)把CSS样式表中的这段代码visibility:hidden;删除,这样那些图层就可看见了,但是,是重叠在一起的,可用鼠标把它们拖开,把内容写好后,再把它们拖回原处。使用DW的网友可用DW的图层面板操作就方便多了。

使用道具 举报

回复
论坛徽章:
456
ITPUB年度最佳版主
日期:2011-12-28 15:24:18马上有对象
日期:2014-02-19 11:55:14马上有钱
日期:2014-02-19 11:55:14马上有房
日期:2014-02-19 11:55:14马上有车
日期:2014-02-19 11:55:14ITPUB年度最佳版主
日期:2014-02-19 10:05:27优秀写手
日期:2013-12-18 09:29:09ITPUB社区千里马徽章
日期:2013-06-09 10:15:34ITPUB年度最佳版主
日期:2013-01-30 17:30:25版主9段
日期:2012-07-03 02:21:03
35#
 楼主| 发表于 2006-5-25 22:55 | 只看该作者
OVER!

使用道具 举报

回复
论坛徽章:
456
ITPUB年度最佳版主
日期:2011-12-28 15:24:18马上有对象
日期:2014-02-19 11:55:14马上有钱
日期:2014-02-19 11:55:14马上有房
日期:2014-02-19 11:55:14马上有车
日期:2014-02-19 11:55:14ITPUB年度最佳版主
日期:2014-02-19 10:05:27优秀写手
日期:2013-12-18 09:29:09ITPUB社区千里马徽章
日期:2013-06-09 10:15:34ITPUB年度最佳版主
日期:2013-01-30 17:30:25版主9段
日期:2012-07-03 02:21:03
36#
 楼主| 发表于 2006-5-25 22:56 | 只看该作者
没办法传HTML的文件,只能把内容贴上来了

使用道具 举报

回复
论坛徽章:
0
37#
发表于 2006-5-31 21:21 | 只看该作者
太感谢了!

使用道具 举报

回复
论坛徽章:
101
生肖徽章:猴
日期:2007-09-26 12:35:50复活蛋
日期:2011-07-08 14:26:172010广州亚运会纪念徽章:手球
日期:2011-05-09 10:15:122010广州亚运会纪念徽章:排球
日期:2011-04-13 11:57:232011新春纪念徽章
日期:2011-02-18 11:43:332010广州亚运会纪念徽章:射箭
日期:2011-01-21 14:58:57ITPUB9周年纪念徽章
日期:2010-10-08 09:28:522010广州亚运会纪念徽章:自行车
日期:2010-09-17 10:43:02铁扇公主
日期:2010-07-28 08:46:33ITPUB元老
日期:2009-05-12 13:23:24
38#
发表于 2006-5-31 21:46 | 只看该作者
顶!谢谢了

使用道具 举报

回复
论坛徽章:
0
39#
发表于 2006-6-1 08:37 | 只看该作者
好东西
太感谢了

使用道具 举报

回复
论坛徽章:
33
2008新春纪念徽章
日期:2008-02-13 12:43:032009新春纪念徽章
日期:2009-01-04 14:52:282010新春纪念徽章
日期:2010-03-01 11:05:012011新春纪念徽章
日期:2011-02-18 11:43:342012新春纪念徽章
日期:2012-01-04 11:51:22茶鸡蛋
日期:2013-02-25 12:33:372013年新春福章
日期:2013-02-25 14:51:24复活蛋
日期:2013-03-20 09:20:11迷宫蛋
日期:2013-04-03 09:26:38
40#
发表于 2006-6-1 14:04 | 只看该作者
好多啊 谢谢了

使用道具 举报

回复

您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

TOP技术积分榜 社区积分榜 徽章 团队 统计 知识索引树 积分竞拍 文本模式 帮助
  ITPUB首页 | ITPUB论坛 | 数据库技术 | 企业信息化 | 开发技术 | 微软技术 | 软件工程与项目管理 | IBM技术园地 | 行业纵向讨论 | IT招聘 | IT文档
  ChinaUnix | ChinaUnix博客 | ChinaUnix论坛
CopyRight 1999-2011 itpub.net All Right Reserved. 北京盛拓优讯信息技术有限公司版权所有 联系我们 未成年人举报专区 
京ICP备16024965号-8  北京市公安局海淀分局网监中心备案编号:11010802021510 广播电视节目制作经营许可证:编号(京)字第1149号
  
快速回复 返回顶部 返回列表