当前位置:网站首页 > JS特效学院新手使用参考

先来看一个简单的网页文档的源代码

<html>
<head>
<title>JS特效学院 JsWeb8.CN- 手把手教你做网站美容师</title>
</head>
<body>
欢迎来到JS特效学院
</body>
</html>

文档以<html>开始,以</html>结束的。这两个标签给告诉浏览器该文档是用HTML代码编写的,整个文档都在<html>与</html>内,一个典型的HTML网页文档被分为两个主要的部分:<head></head>和<body></body>。<head>与</head>之间包含关于文档的信息,比如它的标题和描述内容等信息,另外CSS样式表和Javascript代码通常也放在这里。<body>与</body>之间包含实际的文档内容(也就是要显示在浏览器窗口中的部分)。

上面我们简单的了解了html网页文档的结构,我们再来看看怎么将网页特效插入到网页中。

我们来举个例子,先打开下面的一个特效
层展开与收缩的运动缓冲效果(http://www.jsweb8.cn/html/js_page/878.htm)

再用记事本或网页编辑器打开你的网页

根据提示先将一段代码(也就是Javascript代码,通常是以<script type="text/javascript">开始,以</script>结束,(<script type="text/javascript">.中间是JS代码..</script>)复制到网页源代码中的<head>与</head>之间(一般直接复制到</head>的前面就可以了),另外如果有CSS代码,也就是以<style type="text/css"> 开始,以</style>结束的代码,也放在<head>与</head>之间,如果没有就不用了。

<html>
<head>
<title>JS特效学院 JsWeb8.CN- 手把手教你做网站美容师</title>
<style type="text/css">/*这是CSS代码,如果有CSS代码则放,没有的话就不需要*/
<!--
#test{border:1px solid #f00;width:200px; height:20px; cursor:pointer}
#menu{position:absolute;top:10px;left: 400px;border:1px solid #000;width:160px;height:16px;text-align:center;cursor:pointer;overflow:hidden;}
-->
</style>
<script type="text/javascript">/*这是Javascript代码*/
/*
函数名称: Scroll
Scroll(obj, h, s)
参数说明:
obj,[object] id值或对象. 必需
h,[height] 展开后的高度. 可选(默认为200px)
s,[speed] 展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}.
函数返回值:
true 展开(对象的高度等于展开后的高度)
false 关闭(对象的高度等于原始高度)
*/
function Scroll(obj, h, s){
var h = h || 200;
var s = s || 1.2;
var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
if(obj == undefined){return false;}
var status = obj.getAttribute("status")==null;
var oh = parseInt(obj.offsetHeight);
obj.style.height = oh;
obj.style.display = "block";
obj.style.overflow = "hidden";
if(obj.getAttribute("oldHeight") == null){
obj.setAttribute("oldHeight", oh);
}else{
var oldH = Math.ceil(obj.getAttribute("oldHeight"));
}
var reSet = function(){
if(status){
if(oh < h){
oh = Math.ceil(h-(h-oh)/s);
obj.style.height = oh+"px";
}else{
obj.setAttribute("status",false);
window.clearInterval(IntervalId);
}
}else{
obj.style.height = oldH+"px";
obj.removeAttribute("status");
window.clearInterval(IntervalId);
}
}
var IntervalId = window.setInterval(reSet,10);
return status;
}
window.onload= function(){
var $ = function(id){return document.getElementById(id)};
$('menu').onclick = function(){
Scroll('menu',this.scrollHeight,1.2);
}
$('test').onclick = function(){
Scroll('test',300,1.2);
}
}
</script>
</head>
<body>
欢迎来到JS特效学院</body>
</html>

好了,<head>与</head>之间的代码放进去了,下面将一段代码(也就是浏览器要显示的部分代码)复制到网页源代码中的<body>与</body>之间(一般直接复制到<body>的后面就可以了)

<html>
<head>
<title>JS特效学院 JsWeb8.CN- 手把手教你做网站美容师</title>

<style type="text/css">/*这是CSS代码,如果有CSS代码则放,没有的话就不需要*/
<!--
#test{border:1px solid #f00;width:200px; height:20px; cursor:pointer}
#menu{position:absolute;top:10px;left: 400px;border:1px solid #000;width:160px;height:16px;text-align:center;cursor:pointer;overflow:hidden;}
-->
</style>
<script type="text/javascript">/*这是Javascript代码*/
/*
函数名称: Scroll
Scroll(obj, h, s)
参数说明:
obj,[object] id值或对象. 必需
h,[height] 展开后的高度. 可选(默认为200px)
s,[speed] 展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}.
函数返回值:
true 展开(对象的高度等于展开后的高度)
false 关闭(对象的高度等于原始高度)
*/
function Scroll(obj, h, s){
var h = h || 200;
var s = s || 1.2;
var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
if(obj == undefined){return false;}
var status = obj.getAttribute("status")==null;
var oh = parseInt(obj.offsetHeight);
obj.style.height = oh;
obj.style.display = "block";
obj.style.overflow = "hidden";
if(obj.getAttribute("oldHeight") == null){
obj.setAttribute("oldHeight", oh);
}else{
var oldH = Math.ceil(obj.getAttribute("oldHeight"));
}
var reSet = function(){
if(status){
if(oh < h){
oh = Math.ceil(h-(h-oh)/s);
obj.style.height = oh+"px";
}else{
obj.setAttribute("status",false);
window.clearInterval(IntervalId);
}
}else{
obj.style.height = oldH+"px";
obj.removeAttribute("status");
window.clearInterval(IntervalId);
}
}
var IntervalId = window.setInterval(reSet,10);
return status;
}
window.onload= function(){
var $ = function(id){return document.getElementById(id)};
$('menu').onclick = function(){
Scroll('menu',this.scrollHeight,1.2);
}
$('test').onclick = function(){
Scroll('test',300,1.2);
}
}

</script>

</head>
<body>
<div id="test">单击后 展开指定高度 300px单击后 展开指定高度 300px单击后 展开指定高度 300px</div>
<div id="menu">
单击后 根据展开的高度根据内容而变<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
</div>

</body>
</html>

最后保存文档扩展名为html或htm,再在浏览器中打开,就会看到效果了。当然你也可以在<head>与</head>之间通过调用JS文件的方式,先新建立个记事本或者用网页编辑工具新建一个文件,把<script type="text/javascript">.中间JS代码..</script>中间的代码复制到文件或者记事本中,注意不要<script type="text/javascript"></script>这个代码,另存为扩展名为JS的文件(例如test.js),然后在之前那个页面的<head>与</head>之间通过调用JS文件,代码这样写<script type="text/javascript" scr="test.js" ></script>,如果通过调用不能实现效果的话,就不要通过调用,还有种情况下就是JS代码必须要跟在<body>与</body>之间的内容之后,当然是少数,这里暂不举例。当然CSS文件也可以如出一辙,方法我就不写了。

另外有的时候,为什么在网页中加入了特效代码后没有效果?

为什么在网页中加入了特效代码后,没有效果或效果与本站的特效演示页面不一样呢?

一、用记事本或网页编辑器打开你的网页,看看网页源代码的顶部是否有类似于下面的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这段代码用来声明网页中用的XHTML代码或HTML代码的版本,并告诉浏览器怎样解释你的网页,去掉这段代码一般不会影响网页的正常运行,而使用这段代码会影响大多网页特效的正常运行,如果要在网页中使用网页特效,最好去掉这段代码。

请先看看你的网页源代码顶部是否有类似于上面的代码,如果是那就把这段代码去掉再保存网页看看

二、如果不是上面的问题,就有可能是浏览器的兼容问题。请认真参阅笨文档。

                                                                                         穿皮鞋的青蛙 2008年9月29日

如果你喜欢本站,别忘了告诉你的朋友或者加入群共同探讨,感谢您对本站的支持! JS特效学院交流群:9618123

回网页顶部
Make By 穿皮鞋的青蛙░QQ:66118181Power by Actcms
Copyright©2008-2010 Jsweb8.CN All Rights Reserved-京ICP备09002348号