分享JavaScript精彩网页特效实例，素材，有需要代码的可以拿来参考一下 - JavaScript论坛

| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛 |

编程论坛 → WEB开发 → 『 JavaScript论坛』 → 分享JavaScript精彩网页特效实例，素材，有需要代码的可以拿来参考一下

我的收件箱(0)

欢迎加入我们，一同切磋技术

共有 4739 人关注过本帖， 2 人收藏

标题：分享JavaScript精彩网页特效实例，素材，有需要代码的可以拿来参考一下

只看楼主加入收藏

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 31 楼

得分:0

31、页面停留时间。

程序代码：

<script language="JAVASCRIPT">
<!--
var time_start = new Date();         

var clock_start = time_start.getTime();

function get_time_spent ()
{

var time_now = new Date();             

return((time_now.getTime() - clock_start)/1000);

}

function show_secs ()
{

var total_secs = Math.round(get_time_spent());   

var secs_spent = total_secs % 60;
var mins_spent = Math.round((total_secs-30)/60);

var secs_spent = "" + ((secs_spent>9) ? secs_spent : "0" + secs_spent);  

var mins_spent = "" + ((mins_spent>9) ? mins_spent : "0" + mins_spent);  

document.form0.time_spent.value = mins_spent + ":" + secs_spent;         

setTimeout('show_secs()',1000);

}
setTimeout('show_secs()',1);
// -->
</script>

<FORM name="form0" onSubmit="0">你在本页面的停留时间:
<INPUT type="text" name="time_spent" size=7 onFocus="this.blur()"></FORM>

思考赐予新生，时间在于定义

2013-08-18 01:30

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 32 楼

得分:0

32、页面背景花瓣效果。

程序代码：

<script Language="javascript">
<!--
function a(x,y,color)            

{document.write("<img border='0' style='position: absolute; left: "+(x+300)+"; top: "+(y+200)+";background-color: "+color+"' src='px.gif' width=2 height=2>")}
//-->
</script>
<script Language="javascript">
<!--
for(t=1;t<=360;t++){        

lo=150*Math.sin(2*(Math.PI/180)*t);
x = lo*Math.cos((Math.PI/180)*t);

y = lo*Math.sin((Math.PI/180)*t);
a(x,y,"#ff0000");

lo=150*Math.cos(2*(Math.PI/180)*t);
x = lo*Math.cos((Math.PI/180)*t);

y = lo*Math.sin((Math.PI/180)*t);

a(x,y,"#00ffff");
}
//-->
</script>

思考赐予新生，时间在于定义

2013-08-18 01:32

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 33 楼

得分:0

33、页面背景闪烁效果。

程序代码：

<SCRIPT LANGUAGE="JavaScript">
<!--
var Color= new Array(16);  

Color[1] = "ff";
Color[2] = "ee";
Color[3] = "dd";
Color[4] = "cc";
Color[5] = "bb";
Color[6] = "aa";
Color[7] = "99";
Color[8] = "88";
Color[9] = "77";
Color[10] = "66";
Color[11] = "55";
Color[12] = "44";
Color[13] = "33";
Color[14] = "22";
Color[15] = "11";
Color[16] = "00";

function fadeIn(where) {
if (where >= 1) {          

    document.bgColor="#" + Color[where] +"0000";
    where -= 1;                    

    setTimeout("fadeIn("+where+")", 50);

}

else {
    setTimeout('fadeOut(1)', 50);       

}
}

function fadeOut(where) {
if (where <=16) {        

    document.bgColor="#" + Color[where] +"0000";

    where += 1;                   

    setTimeout("fadeOut("+where+")", 50) 

}

else {
    setTimeout("fadeIn(16)", 50);        

}
}
//-->
</SCRIPT>
<body onLoad="fadeIn(16)">

<font color="#ffffff">背景在不断的闪烁</font>
</body>

思考赐予新生，时间在于定义

2013-08-18 01:33

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 34 楼

得分:0

33、页面背景颜色选择果。

程序代码：

<body>
<table border=0 cellpadding=0 cellspacing=0>
    <tr STYLE='cursor:hand'>
        <td width=20 height=20 style="background-Color:#000000" onclick="javascript:document.body.style.backgroundColor=this.style.backgroundColor;"></td>
        <td width=20 height=20 style="background-Color:#0000ff" onclick="javascript:document.body.style.backgroundColor=this.style.backgroundColor;"></td>
        <td width=20 height=20 style="background-Color:#cccccc" onclick="javascript:document.body.style.backgroundColor=this.style.backgroundColor;"></td>
        <td width=20 height=20 style="background-Color:#ffffff" onclick="javascript:document.body.style.backgroundColor=this.style.backgroundColor;"></td>
        <td width=20 height=20 style="background-Color:#ffff00" onclick="javascript:document.body.style.backgroundColor=this.style.backgroundColor;"></td>
        <td width=20 height=20 style="background-Color:#0000ff" onclick="javascript:document.body.style.backgroundColor=this.style.backgroundColor;"></td>
    </tr>
    <tr STYLE='cursor:hand'>
        <td width=20 height=20 style="background-Color:#ff0000" onclick="javascript:document.body.style.backgroundColor=this.style.backgroundColor;"></td>
        <td width=20 height=20 style="background-Color:#00ffff" onclick="javascript:document.body.style.backgroundColor=this.style.backgroundColor;"></td>
        <td width=20 height=20 style="background-Color:#336699" onclick="javascript:document.body.style.backgroundColor=this.style.backgroundColor;"></td>
        <td width=20 height=20 style="background-Color:#336633" onclick="javascript:document.body.style.backgroundColor=this.style.backgroundColor;"></td>
        <td width=20 height=20 style="background-Color:#cc3322" onclick="javascript:document.body.style.backgroundColor=this.style.backgroundColor;"></td>
        <td width=20 height=20 style="background-Color:#ddcc33" onclick="javascript:document.body.style.backgroundColor=this.style.backgroundColor;"></td>
    </tr>
</table>

</body>

思考赐予新生，时间在于定义

2013-08-18 01:35

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 35 楼

得分:0

35、自动滚屏效果。

程序代码：

<SCRIPT LANGUAGE=javascript>
<!--
var dz=0;
function click(){
    if (event.button==2){                  // 当鼠标按下右键时
        alert("自动滚屏已经停止!");
        dz=1
    }     

}       

document.onmousedown=click;                    // 按下鼠标触发函数
var position=0;                                // 初始化
function scroller(){
    if (dz==0){
    position++;                    // 滚动位置累加
    scrollTo(0,position);            // 实现窗口滚动
    clearTimeout(timer);           // 清空定时器
    var timer=setTimeout("scroller()",60);     // 设定定时
    }
    else{
    clearTimeout(timer);           // 清空定时器
    }
}       

scroller();
//-->
</SCRIPT>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>
黑龙江大学<br>

思考赐予新生，时间在于定义

2013-08-18 01:37

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 36 楼

得分:0

36、滚动显示图片效果。

程序代码：

<table>
<tr>
        <td>
            <DIV id=gundong style="OVERFLOW: hidden; WIDTH: 400px; HEIGHT: 60px" align=center>
            <TABLE cellPadding=0  border=0 cellspace="0"  align=center ID="Table1">
                <TBODY>
                <TR>
                <TD id=gundong11 vAlign=top>
                    <TABLE cellSpacing=5 cellPadding=0 width="100%" border=0 align=center>
                    <TBODY>
                    <TR vAlign=top>
                    <td><img src="2.jpg" width=100 height=50><img src="3.jpg" width=100 height=50><img src="4.jpg" width=100 height=50><img src="5.jpg" width=100 height=50><img src="7.jpg" width=100 height=50></td>
                    </TR>
                    </TBODY>
                    </TABLE>
                </TD>
                <TD id=gundong12 vAlign=top>
                </TD>
                </TR>
                </TBODY>
            </TABLE>
            </DIV>
            <script LANGUAGE="JavaScript">
            <!--
            var speed=30                                     // 定义速度
            gundong12.innerHTML=gundong11.innerHTML          // 赋值
            function mq(){
            if(gundong12.offsetWidth-gundong.scrollLeft<=0)
            gundong.scrollLeft-=gundong11.offsetWidth
            else{
            gundong.scrollLeft++
            }
            }
            setInterval(mq,speed)               // 定义定时器
            //-->
            </SCRIPT>
        </td>
</tr>

</table>

思考赐予新生，时间在于定义

2013-08-18 01:40

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 37 楼

得分:0

37、限制上传图片属性。

程序代码：

<SCRIPT language=JavaScript>
<!--
function getFilePic(){
    var stxt;
    stxt=form1.pic.value.substring(form1.pic.value.lastIndexOf(".")+1,form1.pic.length);
    stxt=stxt.toUpperCase();
    switch(stxt){
    case "GIF":
        alert("您输入的是GIF图片！");
        break;
    case "JPG":
        alert("您输入的是JPG图片！");
        break;
    case "BMP":
        alert("您输入的是BMP图片！");
        break;
    case "PNG":
        alert("您输入的是PNG图片！");
        alert("您输入的图片符");
        break;
    default:
        alert("您必须输入GIF,JPG,BMP,PNG等各式的图片！")
        break;
    }

}
//-->
</script>
<form id=form1>
<p align=center>选择图片：<input type="file" name=pic></p>
<p align=center><input type=button value=' 上 传 ' onclick="getFilePic()"></p>
</form>

思考赐予新生，时间在于定义

2013-08-18 01:42

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 38 楼

得分:0

38、图片滚动链接效果。

程序代码：

<div id=img>
<a href="#"><img src="5.jpg" border=0 width=100 height=50></a><BR>
<a href="#"><img src="7.jpg" border=0 width=100 height=50></a><BR>
<a href="#"><img src="2.jpg" border=0 width=100 height=50></a><BR>
</div>
<SCRIPT language=JavaScript>
<!--
marHeight=50;                   // 设定高度
stopscroll=false;
with(img)
{
style.height=marHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");          // 鼠标悬停停止滚动
onmouseout=new Function("stopscroll=false");          // 鼠标离开开始滚动
}
preTop=0;
currentTop=50;                          // 设定滚动高度
stoptime=0;
img.innerHTML += img.innerHTML;         // 赋值
function scrollimg()
{
img.scrollTop=0;
setInterval("scrollUp()",20);          // 设定图片滚动时间
}

function scrollUp()

{
if(stopscroll==true) return;
currentTop+=1;
if(currentTop>50)                       // 判断滚动高度
    {
    stoptime+=1;
    currentTop-=1;
        if(stoptime==30)            // 设定图片停留时间
        {
        currentTop=0;
        stoptime=0;
        }
    }
    else
    {
    preTop=img.scrollTop;
    img.scrollTop+=1;
        if(preTop==img.scrollTop)

          {

          img.scrollTop=0;
          img.scrollTop+=1;
        }
    }
}
scrollimg();
//-->
</script>

思考赐予新生，时间在于定义

2013-08-18 01:43

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 39 楼

得分:0

39、下拉菜单进入链接效果。

程序代码：

<Script language="javascript">
<!--
function go(){
window.location=document.myweb.example.options[document.myweb.example.selectedIndex].value
}
//-->
</Script>

<body>
<form name="myweb">请选择网址直接进入：
<select name="example" size=1 onChange="go()">
<option value="http://www.网易</option>
<option value="http://www.搜狐</option>
<option value="http://www.新浪</option>
<option value="http://www.baidu.com">百度</option>
<option value="http://www.

50)                       // 判断滚动高度
    {
    stoptime+=1;
    currentTop-=1;
        if(stoptime==30)            // 设定图片停留时间
        {
        currentTop=0;
        stoptime=0;
        }
    }
    else
    {
    preTop=img.scrollTop;
    img.scrollTop+=1;
        if(preTop==img.scrollTop)

          {

          img.scrollTop=0;
          img.scrollTop+=1;
        }
    }
}
scrollimg();
//-->

思考赐予新生，时间在于定义

2013-08-18 01:44

love云彩

来　自：青藏高原
等　级：贵宾
威　望：53
帖　子：3663
专家分：11416
注　册：2012-11-17

第 40 楼

得分:0

40、二级互相关联菜单。

程序代码：

<FORM name=dweb>
<P align=center>
<SELECT name=lianjie1 onchange="redirect(this.options.selectedIndex)">
<OPTION selected>校园网</OPTION>
<OPTION>国内网站</OPTION>

<OPTION>国外网站</OPTION></SELECT>
<SELECT name=lianjie2 size=1>
<OPTION selected value="http://www.hlju.黑龙江大学</OPTION>
<OPTION value="http://210.46.103.2">教务办公网</OPTION>
<OPTION value="http://210.46.102.123">校园网</OPTION>
<OPTION value="http://210.46.103.1">教学在线</OPTION>
<OPTION value="http://210.46.104.50">现代教育技术中心</OPTION></P>

<SCRIPT language=JavaScript>
<!-- 

var groups=document.dweb.lianjie1.options.length          

var group=new Array(groups)                              

for (i=0; i<groups; i++) 

group[i]=new Array() 

group[0][0]=new Option("黑龙江大学","http://www.hlju.)  

group[0][1]=new Option("教务办公网","http://210.46.103.2") 

group[0][2]=new Option("校园网","http://210.46.102.123") 

group[0][3]=new Option("教学在线","http://210.46.103.1") 

group[0][4]=new Option("现代教育技术中心","http://125.223.0.6") 

group[1][0]=new Option("新浪网","http://www.) 

group[1][1]=new Option("网易","http://www.) 

group[1][2]=new Option("搜狐","http://www.) 

group[1][3]=new Option("百度", "http://www.baidu.com") 

group[1][4]=new Option("中国人", "http://www.) 

group[2][0]=new Option("惠普","http://www.) 

group[2][1]=new Option("IBM网站","http://www.) 

group[2][2]=new Option("微软","http://www.)
var temp=document.dweb.lianjie2

function redirect(x){                             

for (m=temp.options.length-1;m>0;m--) 

    for (i=0;i<group[x].length;i++){ 

        temp.options[i]=new Option(group[x][i].text,group[x][i].value)  

    }
}
//-->
</SCRIPT></FORM>

思考赐予新生，时间在于定义

2013-08-18 01:45

快速回复：分享JavaScript精彩网页特效实例，素材，有需要代码的可以拿来参考一下 ...