| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 4739 人关注过本帖, 2 人收藏
标题:分享JavaScript精彩网页特效实例,素材,有需要代码的可以拿来参考一下
只看楼主 加入收藏
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
结帖率:100%
收藏(2)
 问题点数:0 回复次数:58 
分享JavaScript精彩网页特效实例,素材,有需要代码的可以拿来参考一下
1、随机产生文本,刷新网页即可显示随机效果。
程序代码:
您最喜欢中国的哪个城市:
<script language="JavaScript">
<!--
var a = Math.random() + ""
var rand1 = a.charAt(5)
quotes = new Array
quotes[1] = '北京'
quotes[2] = '上海'
quotes[3] = '广州'
quotes[4] = '哈尔滨'
quotes[5] = '长春'
quotes[6] = '武汉'
quotes[7] = '沈阳'
quotes[8] = '大连'
quotes[9] = '呼和浩特'
quotes[0] = '成都'
var quote = quotes[rand1]
document.write( quote )
// -->
</script>

搜索更多相关主题的帖子: 呼和浩特 哈尔滨 quotes 中国 北京 
2013-08-17 00:08
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
收藏
得分:0 
2、文字循环出现效果。
程序代码:
<body onLoad="xunhuan();">
<SCRIPT LANGUAGE="JavaScript">
<!--
var meninfo=" >>>欢迎你能够来学习>>>";
meninfo+=" >>>JavaScript是一门脚本语言>>>";

var anch=50;

function xunhuan(){
document.forms[0].panel.value=meninfo.substring(meninfo.length-anch,meninfo.length);
meninfo=meninfo.substring(meninfo.length-1,meninfo.length)+meninfo;
meninfo=meninfo.substring(0,meninfo.length-1);
setTimeout("xunhuan()",200);
}

// -->
</SCRIPT>
<form>
<INPUT TYPE="text" NAME="panel" VALUE="" SIZE="50">
</form>
</body>


思考赐予新生,时间在于定义
2013-08-17 00:10
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
收藏
得分:0 
3、鼠标划过以实现全选文字效果。
<textarea cols=40 rows=10 onmouseover='this.focus()' onfocus='this.select()'>欢迎各位读者学习Javascript这门语言!</textarea>
4、使得链接关键字不停变换颜色效果。
程序代码:
<script language="JavaScript">
<!--
function IArray() {
for (var i = 0; i < IArray.arguments.length; i++) {
this[i] = IArray.arguments[i];
}
this.length = IArray.arguments.length;
}

var colors = new IArray("#ff0000","#0000ff","#00ffff","#cccccc","#000000","#ffff00","#ff0000");
delay = 2.;
link = 0;
vlink = 0;
function linkChange() {
link = (link+1%colors.length);
vlink = (vlink+1%colors.length);
document.linkColor = colors[link];
document.vlinkColor = colors[vlink];
setTimeout("linkChange()",delay*1000);
}
linkChange();
-->
</script>
  <br>
       <a href="http://www.新浪网</a> <a href="http://www.搜狐</a>


                  <a href="http://www.网易</a> <a href="http://www.baidu.com">百度</a>


思考赐予新生,时间在于定义
2013-08-17 00:15
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
收藏
得分:0 
5、逐字出现信息条的效果。
程序代码:
<script language="JavaScript">
<!--
function MArray() {
  this.length = MArray.arguments.length
  for (var i = 0; i < this.length; i++)
  this[i+1] = MArray.arguments[i]}
  var fArray = new MArray;
  fArray[0]="欢迎大家学习javascript这门语言!";
  fArray[1]="欢迎大家学习html这门语言!"
  fArray[2]="欢迎大家学习asp这门语言!"
  fArray[3]="欢迎大家学习vbscript这门语言!"
    var x = 1;
    var y = 0;
    var msg1 = fArray[y];
function newsSee() {
if (x==msg1.length+1) {
    y+=1;
    if (y > 3) y=0;
    document.form1.news2.value=' ';
    msg1 = fArray[y];
    x=0;}
    document.form1.news2.value=msg1.substring(0,x); 

    x+=1;
    setTimeout("newsSee() ",100);
    }
// -->
</script>
<body onLoad="newsSee()">

<form name="form1">
<p align=center><input type="text" name="news2" size=40></p>
</form>
</body>


思考赐予新生,时间在于定义
2013-08-17 00:17
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
收藏
得分:0 
6、文字波浪效果。
程序代码:
<script language="JavaScript">
<!--
function wave(n)

{  

    theText = "JavaScript";
    output = "";
    for (i = 0; i < theText.length; i++)
    {
        size = 60*Math.abs(Math.sin((i+n)*3.14/theText.length))
        output += "<font style='font-size: "+ size +"pt' color='#ff0000'>" +theText.substring(i,i+1)+ "</font>";
    }
    theDiv.innerHTML = output;
    if (n > theText.length) {n=0}
    else {n++}
    setTimeout("wave(" + n + ")", 200);
}
//-->
</script>
<body onload=wave(0);>
<div ID="theDiv" align="center">
</div>
</body>


思考赐予新生,时间在于定义
2013-08-17 00:18
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
收藏
得分:0 
7、文字连续闪烁效果。
程序代码:
<body onload="shan();">
<script language="JAVASCRIPT">
<!--
     colors2 = new Array(6);

     colors2[0]="#000000";
     colors2[1]="#ff0000";
     colors2[2]="#ffff00";
     colors2[3]="#00ffff";
     colors2[4]="#0000ff";
     colors2[5]="#cccccc";

     var i=0;
     function shan() {
             line2.style.visibility = "visible";
             if (i<6) {
                     line2.style.color = colors2[i];
                     i++;
                     setTimeout( "shan()", 50);
             }
             else {
             i=0;
             line2.style.visibility="hidden";
             setTimeout("shan()",1000);
             }
       }
//-->
</script>

     <div id=line2 style="container:positioned; position=relative; width=50%; height=10%; ;font-size=35px; visibility=hidden;">
     JavaScript
     </div>

</body>


思考赐予新生,时间在于定义
2013-08-17 00:20
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
收藏
得分:0 
8、旋转文字效果。
程序代码:
<body>
<script language=javascript>
<!--
messageinfo="希望大家学好这门语言!"
Balises=""
Taille=40;               

Midx=100;                

Decal=0.6;               

for (x=0;x<messageinfo.length;x++){
  Balises=Balises + '<DIV Id=L' + x + ' STYLE="width:3;position:absolute;top:100;left:10">' + messageinfo.charAt(x) + '</DIV>'
}
document.write (Balises);
window.setInterval("Minfo()",10);                

Alpha=5;

function Minfo(){
    Alpha=Alpha-0.05;
    for (x=0;x<messageinfo.length;x++){
        Alpha1=Alpha+Decal*x;
        Cosine=Math.cos(Alpha1);
        Ob=document.all("L"+x);
        Ob.style.posLeft=Midx+100*Math.sin(Alpha1);
        Ob.style.fontSize=Taille+25*Cosine;
        Ob.style.color="rgb("+ (160+Cosine*80+50) + ","+ (50+Cosine*80+50) + ",0)";
    }
}
// -->
</script>
</body>


思考赐予新生,时间在于定义
2013-08-17 00:20
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
收藏
得分:0 
9、文字同步显示效果。
程序代码:
<Script language="javascript">
<!--

 var m="请 您 认 真 学 习 J A V A S C R I P T 这 门 语 言 ! "

 var a=""

 i=0

 s=0

function scrollit() {
   i++
   if(i>m.length) {
     i=1
   }
   if(m.substring(i-1,i)==" ") {
     if(s==0) {
       s=1;
     }
     else {
       s=0;
     }
   }
   a=m.substring(0,i)
   document.forms[0].elements[s].value=a
   setTimeout("scrollit()",100)

 }

 //-->
 </script>
<body onload=scrollit()>

 <form name="msg">

 <input type="text" size=50 name="mesg1"><br>

 <input type="text" size=50 name="mesg2">

 </form>
</body>


思考赐予新生,时间在于定义
2013-08-17 00:22
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
收藏
得分:0 
10、特殊公布栏效果。
程序代码:
<script language="Javascript">
<!--

num=4;
quoteArray = new Array(num);
quoteArray[0]="您喜欢学习javascript吗?";
quoteArray[1]="您喜欢学习vbscript吗?"
quoteArray[2]="您喜欢学习asp吗?"
quoteArray[3]="您喜欢学习吗?"
quoteArray[4]="您喜欢学习jsp吗?"

quoteS=-1;
function next()
{
  if (quoteS >= num) quoteS=-1;
  quoteS++;
  document.quoteForm.quoteHere.value = quoteArray[quoteS];
}
function prev()
{
  if (quoteS <= 0) quoteS=num+1;
  quoteS--;
  document.quoteForm.quoteHere.value = quoteArray[quoteS];
}
function rand()
{

  quoteS = Math.ceil(Math.random() * num);
  document.quoteForm.quoteHere.value = quoteArray[quoteS];
}
//-->
</script>
<form name="quoteForm">
  <textarea name="quoteHere" Rows=3 Cols=50>点击查看信息</textarea><br>
  <input type=button value="下一条" onClick="next();">
  <input type=button value="上一条" onClick="prev();">
  <input type=button value="随机" onclick="rand();">
</form>


思考赐予新生,时间在于定义
2013-08-17 00:23
love云彩
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:青藏高原
等 级:贵宾
威 望:53
帖 子:3663
专家分:11416
注 册:2012-11-17
收藏
得分:0 
11、随机产生图片,刷新页面即可实现随机性。
程序代码:
<script language="JavaScript">
<!--
var a = Math.random() + ""       // 随机产生一个数
var rand1 = a.charAt(2)          // 取出小数点后面第一位数
quotes = new Array
quotes[1] = '<img src="1.gif">'           

quotes[2] = '<img src="2.gif">'
quotes[3] = '<img src="3.gif">'
quotes[4] = '<img src="4.gif">'
quotes[5] = '<img src="5.gif">'
quotes[6] = '<img src="6.gif">'
quotes[7] = '<img src="7.gif">'
quotes[8] = '<img src="8.gif">'
quotes[9] = '<img src="9.gif">'
quotes[0] = '<img src="0.gif">'
var quote = quotes[rand1]
document.write( quote )
// -->
</script>


思考赐予新生,时间在于定义
2013-08-17 00:26
快速回复:分享JavaScript精彩网页特效实例,素材,有需要代码的可以拿来参考一下 ...
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.022088 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved