<html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<style type="text/css">
html{
height: 100%
}
html,body,ul,li,canvas{
margin: 0
padding: 0
}
</style>
</head>
<body bgcolor="#000000">
<canvas id="knife"></canvas>
</body>
<script>
var canvas = document.getElementById("knife")
canvas.style.position = "absolute"
canvas.style.top = 0
var w = window.innerWidth
var h = window.innerHeight
canvas.width = w
canvas.height = h
var cxt = canvas.getContext("2d")
cxt.strokeStyle = "#FFF"
var list = []
var G = 0.4 //向心加速度
var SPEED_Y = -1 //向上速度
var centerLine = w/2 //龙卷风中线
function addLine(){
var LEN = 2
for(var i = 0 i <LEN i ++){
list.push({
x:w/2,
y:h/1.3,
g:G,
c:centerLine+2*Math.random(),
sx:(Math.random()-0.5)*4,
sy:SPEED_Y+0.5*(Math.random()-0.5),
len:Math.round(Math.random()*10+5),
list:[{x:w/2,y:h/1.3}]
})
}
}
function step(){
cxt.clearRect(0,0,w,h)
addLine()
var obj
for(var i = 0 i <list.lengthi ++){
obj = list[i]
if(obj.y <h/2.5){//如果超过这个高度，就删除一个点
obj.len --
if(obj.len == 0){
list.splice(i,1)
i --
continue
}
}
obj.x += obj.sx
obj.y += obj.sy
obj.sx += obj.g
obj.g = obj.x >obj.c ? -G : G
obj.list.unshift({x:obj.x,y:obj.y})//记录下质点运动轨迹
obj.list = obj.list.slice(0,obj.len)//仅仅画出其中一段线就好
//画出所有点的连线
cxt.beginPath()
cxt.moveTo(obj.list[0].x,obj.list[0].y)
for(var j = 1 j <obj.list.lengthj ++){
cxt.lineTo(obj.list[j].x,obj.list[j].y)
}
cxt.stroke()
}
requestAnimationFrame(step)
}
requestAnimationFrame(step)
</script>
</html>
打字效果的文字特效[修改显示的文字即可][根据下面的说明进行共1步]
====2、以下代码放在HTML的<body></body>之间[适当的位置]：
<script language=javascript>
var layers =document.layers,style=document.all,both=layers||style,idme=908601
if(layers){layerRef='document.layers'styleRef =''}if(style){layerRef='document.all'styleRef =
'.style'}
function writeOnText(obj,str){
if(layers)with(document[obj]){ document.open()document.write(str)document.close()}
if(style)eval(obj+'.innerHTML=str')}
var dispStr=new Array("javascript源码大全")
var overMe=0
function txtTyper(str,idx,idObj,spObj,clr1,clr2,delay,plysnd){
var tmp0=tmp1= '',skip=100
if (both &&idx<=str.length) {
if (str.charAt(idx)=='<'){ while(str.charAt(idx)!='>') idx++idx++}
if (str.charAt(idx)=='&'&&str.charAt(idx+1)!=' '){ while (str.charAt(idx)!= '')idx++idx++}
tmp0 = str.slice(0,idx)
tmp1 = str.charAt(idx++)
if (overMe==0 &&plysnd==1){
if (navigator.plugins[0]){
if(navigator.plugins["LiveAudio"][0].type=="audio/basic" &&navigator.javaEnabled()){document.embeds
[0].stop()
setTimeout("document.embeds[0].play(false)",100)}
} else if (document.all){
ding.Stop()
setTimeout("ding.Run()",100)}
overMe=1}else overMe=0
writeOnText(idObj, "<span class="+spObj+"><font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr2
+"'>"+tmp1+"</font></span>")
setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+" ,"+plysnd+")",delay)}}
function init(){txtTyper(dispStr[0], 0, 'ttl0', 'ttl1', '#339933', '#99FF33', 300, 0)}
</script>
<BODY onload=init()>
<DIV class=ttl1 id=ttl0></DIV>
</BODY>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）