发两个javascript特效

2012年4月2日 发表评论 阅读评论

有时候看到一些比较酷的flash特效,可能让我们有种js实现它的欲望。不过可惜目前阶段很少使用js,大概有半年多每写过js了。正好今天看到了两个特效,就模仿了下,我可能用不上,发上来可能有人能用的上也不一定,本着浪费可耻的原则,也就厚颜发上来吧。

CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> 广告轮播 </title>
<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
<link rel="stylesheet" href="menu.css"/>
<script language="javascript"><!–
var news = ["问个怪怪的问题","问一个简单问题","php开发工具调查","分页思考","css控制输出","为什么装pear时go-pear.bat提示没有"];
var adPerNum =2;
var sleepLength = 3000;//s
var current = 0;
var upLength = 10;
var obj = [];
var upLength = 0;
function showAd()
{
for(var i=0;i<adPerNum;i++)
{
$("ad").innerHTML+= "<div id=’obj_"+i+"’ class=’new’ style=’height:20px;overflow:hidden;margin:0;padding:0′><div id=’obj_"+i+"_’ style=’margin:0;padding:0;height:40px;overflow:hidden;border:0px solid gray;’>"+news[i] +"</div></div>";
obj[i] = "obj_"+i;
}
showUp();
}
function showUp()
{
current = ++current>=news.length?0:current;
var j = current%adPerNum;
$("obj_"+j+"_").innerHTML +="<div style=’width:100%;margin:0;padding:0;border:0px solid gray;height:20px’>"+news[current]+"</div>";
showUp__();
}
function $(obj)
{
return document.getElementById(obj);
}
function showUp__()
{
var j = current%adPerNum;
var objs = $("obj_"+j+"_");
if (upLength>10)
{
upLength=0;
objs.style.marginTop=0;
objs.innerHTML = news[current];
setTimeout(showUp, sleepLength);
}else
{
objs.style.marginTop = (parseInt(objs.style.marginTop,10)-2)+"px";
upLength++;
setTimeout(showUp__, 100);
}
}

//–></script>
</head>
<body onload="showAd();">
<div id="ad"></div>
</body>
</html>

CODE:
menu.css
———–
#body{
padding:0;
margin:0;
}
#hello {
width:80%;
height:20px;
border:1px solid gray;
}
#hello ul{
margin:0;
padding:0;
}
#hello ul li{
float:left;
margin:0;
padding:0px;
display:inline;
border-right:1px solid gray;
}

#ad{
width:200px;
height:auto;
border:2px solid #eeeeee;
}
.new{
width:99%;
border-bottom:1px solid #eeeeee;
margin:0;
padding:1px;
}


上面的这个是看到http://www.lineage2.com.cn上面的一个特效模拟的。firefox和ie都通过了。

第二个特效:

CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> menu script </title>
<script src="menu.js" type="text/javascript"></script>
<link rel="stylesheet" href="menu.css"/>
</head>
<body>
<div id="hello">
<ul>
<li value=0 onmouseover="binReason(this,0,0,true);">a>></li>
<li value=1 onmouseover="binReason(this,0,0,true);">b>></li>
<li value=2 onmouseover="binReason(this,0,0,true);">c>></li>
<li value=3 onmouseover="binReason(this,0,0,true);">d>></li>
</ul>
</div>
<div id="test" style=’margin-top:180px’></div>
</body>
</html>


menu.js
—————————-
CODE:
var allWnd = [];
var colorBg = ["#FFFF00"];
var bg = colorBg[Math.round(Math.random()*1)];
var city = [['1','2','3','1','2','3','1','2','3','1','2','3'] ,['1','2'], ['1','2'],['1','2']];
function binReason(obj, width, height, disp)
{
var id, bg, dTop, dLeft, tmpPos = [];

id = "_tmpwnd"+allWnd.length;
if (disp == true) out();

if (document.all){
oRect = obj.getBoundingClientRect();
dTop = oRect.top+obj.offsetHeight-2-height;
dLeft = oRect.left-3+width;
}
else{
tmpPos = cycleParent(obj);
dTop = tmpPos[0]+1;
dLeft = tmpPos[1]-obj.offsetWidth-1;
}
//obj.style.backgroundColor = bg;
var pageObj = document.getElementsByTagName("body").item(0);
var divObj = document.createElement("div");
divObj.style.position = "absolute";
if(disp == true)
{
allWnd[allWnd.length] = id;
}
else
{
id +="_"+allWnd[allWnd.length-1].length;
allWnd[allWnd.length-1][allWnd[allWnd.length-1].length] = id;
out([id,allWnd[allWnd.length-1]]);
}
divObj.id = id;
divObj.style.top = dTop + "px";
divObj.style.left = dLeft + "px";
divObj.style.border = "1px solid gray";
divObj.style.backgroundColor = "#FFFF99";
divObj.style.filter = "alpha(opacity=65)";
divObj.style.width = "80px";
divObj.style.height = "auto";
divObj.style.paddingBottom = "3px";
divObj.style.index = "-1";

for(var i=0;i<city[obj.value].length;i++)
divObj.innerHTML += "<a href=#>"+city[obj.value][i]+"</a><br />"

pageObj.appendChild(divObj);
divObj.onmouseout = function(e)
{
var s = false;
s = (document.all) ?document.elementFromPoint(event.x, event.y).parentNode.id.toString() == id.toString():
e.explicitOriginalTarget.id.toString() == id.toString();
if (!s)
document.getElementById(id).style.display = "none";
}
}

function cycleParent(childObj)
{
var objPosition = [];
var dTop = childObj.offsetTop;
var dLeft = childObj.offsetLeft;
e = childObj;
while(e=e.offsetParent){
dTop +=e.offsetTop;
dLeft += e.offsetLeft;
}
objPosition[0] = dTop+childObj.offsetHeight;
objPosition[1] = dLeft+childObj.offsetWidth;

return objPosition;
}
function out()
{
for(var i=0;i<allWnd.length;i++)
document.getElementById(allWnd[i]).style.display = "none";
}


这是一个下拉菜单的一个特效,本来想实现多级下拉的,不过还是下次算了,很多站点遮掩高就够用了。


转载请注明来自:[MSN Spaces]http://msn.shandian.biz/383.html

  1. 本文目前尚无任何评论.