网页特效代码集合

本文介绍了多种网页特效实现方法,包括使用JavaScript制作鼠标跟随文字、去除链接下划线、状态栏欢迎语、背景音乐、禁用右键等功能,以及创建按钮实现收藏夹管理和表单反馈,最后展示了弹出动画和结合文本滚动与飞花效果的技术。
摘要由CSDN通过智能技术生成

先从最基本开始


鼠标后飘动的字符
<style type="text/css">
.spanstyle {
COLOR: #00cccc; FONT-FAMILY: 宋体; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible
}
</style>
<script>
var x,y
var step=18
var flag=0
var message="★Viking希望能得到你们的支持,谢谢!"
message=message.split("")
var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50
}
var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-200
}
function handlerMM(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
flag=1
}
function www_helpor_net() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0; i<message.length-1; i++) {
var thisspan = eval("span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}
else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0; i<message.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
var timer=setTimeout("www_helpor_net()",30)
}
for (i=0;i<=message.length-1;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
www_helpor_net();
// -->
</script>

[只可以运行网页和脚本代码,C++.JAVA等代码也可以用这种方式缩短高度]


去掉链接下划线
<style TYPE="text/css">
<!--
A:link{text-decoration:none}
A:visited{text-decoration:none}
A:hover {color: #ff00ff;text-decoration:underline}
-->
</style>

 

 

状态栏里的欢迎语

<script language="javascript">
<!--
function statusMessageObject(p,d) {
this.msg = MESSAGE
this.out = " "
this.pos = POSITION
this.delay = DELAY
this.i = 0
this.reset = clearMessage
}
function clearMessage() {
this.pos = POSITION
}
var POSITION = 100
var DELAY = 5
var MESSAGE = "欢迎光临! Welcome to icesboy.91x.net "
var scroll = new statusMessageObject()
function scroller() {
for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) {
scroll.out += " "
}
if (scroll.pos >= 0)
scroll.out += scroll.msg
else scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)
window.status = scroll.out
scroll.out = " "
scroll.pos--
if (scroll.pos < -(scroll.msg.length)) {
scroll.reset()
}
setTimeout ('scroller()',scroll.delay)
}
function snapIn(jumpSpaces,position) {
var msg = scroll.msg
var out = ""
for (var i=0; i<position; i++)
{out += msg.charAt(i)}
for (i=1;i<jumpSpaces;i++)
{out += " "}
out += msg.charAt(position)
window.status = out
if (jumpSpaces <= 1) {
position++
if (msg.charAt(position) == ' ')
{position++ }
jumpSpaces = 100-position
} else if (jumpSpaces > 3)
{jumpSpaces *= .75}
else
{jumpSpaces--}
if (position != msg.length) {
var cmd = "snapIn(" + jumpSpaces + "," + position + ")";
scrollID = window.setTimeout(cmd,scroll.delay);
} else {
window.status=""
jumpSpaces=0
position=0
cmd = "snapIn(" + jumpSpaces + "," + position + ")";
scrollID = window.setTimeout(cmd,scroll.delay);
return false
}
return true
}
snapIn(100,0);
// -->
</script>


网页背景音乐

<EMBED src=http://www.woduhom.com/wfzy/15.mid width=0 height=0 type=audio/mid loop="true" autostart="true" border="0"></EMBED> </FONT>

把蓝色地方换成背景音乐的地址


禁右键

<script language="javascript">
function click() {
if (event.button==2) {
alert('小样,偷想看我东西 。')
}
}
document.οnmοusedοwn=click
</script>

放入<body>区域中

 

 


<input οnclick="window.external.ImportExportFavorites(false,'');" type=button value=导出收藏夹 name=Button32>
 <input οnclick="window.external.AddFavorite(location.href, document.title)" type=button value=加入收藏夹 name=Button22>
 

 <input οnclick="window.external.ShowBrowserUI('OrganizeFavorites', null)" type=button value=整理收藏夹 name=Submit2>
 <input οnclick='window.location="view-source:" + window.location.href' type=button value=查看源文件 name=Button7>
 <input οnclick="window.external.ShowBrowserUI('LanguageDialog', null)" type=button value=语言设置 name=Button6>
 <input οnclick=history.go(1) type=submit value=前进 name=Submit>
 <input οnclick=history.go(-1) type=submit value=后退 name=Submit2>

 

 

radio按钮调
<form>
<div align="center"><center><p>本站很好: <input TYPE="radio" NAME="radio" value="谢谢您的鼓励和支持!" onClick="alert(value)">

本站一般: <input TYPE="radio" NAME="radio" value="我会不断努力的!" onClick="alert(value)">

本站太差: <input TYPE="radio" NAME="radio" value="具体的意见建议请Email给我,谢谢!" onClick="alert(value)">
</p>
</center></div>
</form>


窗口的打开和关闭
<!--脚本说明:
第一步:把如下代码加入<head>区域中-->
<SCRIPT language="javascript">
<!--
function openclk() {
another=open('test.htm','NewWindow');
}
function closeclk() {
another.close();
}
//-->
</SCRIPT>
<!--第二步:把如下代码加入<body>区域中-->

<form>
<INPUT TYPE="BUTTON" NAME="open" value="打开一个窗口" onClick="openclk()">
<BR>
<INPUT TYPE="BUTTON" NAME="close" value="关闭这个窗口" onClick="closeclk()">
</form>

 

一 、很酷的弹出老人动画


<html>
<head>
<SCRIPT>
<!--
function crml(nid)
{
try
{
nid=new ActiveXObject("Agent.Control.2");
nid.Connected = true;
nid.Characters.Load("");
return nid;
}
catch (err)
{
return false;
}
}

function chplay ()
{
if (ml=crml ("ml"))
{
var MerlinID;
var MerlinACS;
Merlin = ml.Characters.Character(MerlinID);
Merlin.MoveTo(200,200);
Merlin.Show();
Merlin.Play("Explain");
Merlin.Play("Announce");
Merlin.Speak("欢迎你来到free.2259.com电脑频道!");
Merlin.Play("Gestureright");
Merlin.Play("Pleased");
Merlin.Speak("我们的网址:http://free.2259.com";);
Merlin.Play("Idle1_1");
Merlin.Hide();
Merlin.MoveTo(600,300);
Merlin.Show();
Merlin.Play("Surprised");
Merlin.Speak("2259音乐频道 http://www.2259.com/index.asp";);
Merlin.Play("Read");
Merlin.Speak("还多了一个专门的FLASH音乐频道");
Merlin.Play("Read")
Merlin.Play("GestureUp");
Merlin.Speak("网址是:Http://flash.2259.com希望大家会喜欢");
Merlin.Play("DontRecognize");
Merlin.Speak("感谢您的到来");
Merlin.Play("DontRecognize");
Merlin.Play("Greet");
Merlin.Speak("提前祝你圣诞快乐!");
Merlin.Play("Greet");
Merlin.Speak("下次再见!");
Merlin.Play("Greet");
Merlin.Hide();
}
}
//-->
  </SCRIPT>
<SCRIPT>
<!--
chplay()
-->
</SCRIPT>
</head>
</html>


二、结合的很酷的文本滚动与网页飞花的特效
<SCRIPT language=javascript>


//设置marquee的宽度(in pixels) 
var marqueewidth=190
//设置marquee的高度 
var marqueeheight=200
//设置marquee的速度 
var speed=1
//设置marquee的显示内容 
var marqueecontents= 

ef="<center><p>加如文章的内容</center>"

if (document.all) 
document.write('<marquee direction="up" scrollAmount='+speed+' style="width:'+marqueewidth+';height:'+marqueeheight+'">'+marqueecontents+'</marquee>') 

function regenerate(){ 
window.location.reload() 
} 
function regenerate2(){ 
if (document.layers){ 
setTimeout("window.οnresize=regenerate",450) 
intializemarquee() 
} 
} 

function intializemarquee(){ 
document.cmarquee01.document.cmarquee02.document.write(marqueecontents) 
document.cmarquee01.document.cmarquee02.document.close() 
thelength=document.cmarquee01.document.cmarquee02.document.height 
scrollit() 
} 

function scrollit(){ 
if (document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){ 
document.cmarquee01.document.cmarquee02.top-=speed 
setTimeout("scrollit()",100) 
} 
else{ 
document.cmarquee01.document.cmarquee02.top=marqueeheight 
scrollit() 
} 
} 

window.οnlοad=regenerate2 
</SCRIPT>

<script language="javascript1.2"><!-- Begin
var no = 20; // snow number
var speed = 10; // smaller number moves the snow faster
var snowflake = "images/snow.gif";

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp;  // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) { 
dx = 0;            // set coordinate variables
xp = Math.random()*(doc_width-50); // set position variables
yp = Math.random()*doc_height;
am = Math.random()*20;     // set amplitude variables
stx = 0.02 + Math.random()/10; // set step variables
sty = 0.7 + Math.random();   // set step variables
if (ns4up) {           // set layers
if (i == 0) {
document.write("<layer name=/"dot"+ i +"/" left=/"15/" top=/"15/" visibility=/"show/"><img src=/"" + snowflake + "/" border=/"0/"></layer>");
} else {
document.write("<layer name=/"dot"+ i +"/" left=/"15/" top=/"15/" visibility=/"show/"><img src=/"" + snowflake + "/" border=/"0/"></layer>");
  }
} else if (ie4up) {
if (i == 0) {
document.write("<div id=/"dot"+ i +"/" style=/"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;/"><img src=/"" + snowflake + "/" border=/"0/"></div>");
} else {
document.write("<div id=/"dot"+ i +"/" style=/"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;/"><img src=/"" + snowflake + "/" border=/"0/"></div>");
   }
  }
}
function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp += sty;
if (yp > doc_height-50) {
xp = Math.random()*(doc_width-am-30);
yp = 0;
stx = 0.02 + Math.random()/10;
sty = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx += stx;
document.layers["dot"+i].top = yp;
document.layers["dot"+i].left = xp + am*Math.sin(dx);
}
setTimeout("snowNS()", speed);
}

function snowIE() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp += sty;
if (yp > doc_height-50) {
xp = Math.random()*(doc_width-am-30);
yp = 0;
stx = 0.02 + Math.random()/10;
sty = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx += stx;
document.all["dot"+i].style.pixelTop = yp;
document.all["dot"+i].style.pixelLeft = xp + am*Math.sin(dx);
}
setTimeout("snowIE()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// End -->
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值