• 2010-09-17

    四种js特效(兼容ie&ff&op) - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/75169687.html

    做了图片随机淡入淡出、秒针转动、两侧可伸缩浮动窗口、多图动态开合等四种js特效,代码存档。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>jsdemo</title>
    <STYLE>
    v\:* { BEHAVIOR: url(#default#VML) }
    </STYLE>
    <script>
    firstleft=200;
    labelwidth=150;
    count=6;
    divw=600;
    divh=400;
    step=10;
    speed=10;
    labelmin=(labelwidth*count-divw)/(count-1);//alert(labelmin);
    imageObj = new Image();
    images = new Array();
    colorarr=new Array("blue","green","pink","yellow","lightgreen","orange","purple","lightblue");
    mydo=null;
    var Browser = {
    'isIE' : (navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0),
    'isFirefox' : navigator.userAgent.indexOf('Firefox') >= 0,
    'isOpera' : navigator.userAgent.indexOf('Opera') >= 0
    };
    function getAbsoluteLeft( ob ){
    if(!ob){return null;}
    var getobj = ob;
    var objLeft = getobj .offsetLeft;
    while( getobj != null && getobj .offsetParent != null && getobj .offsetParent.tagName != "BODY" ){
    objLeft += getobj .offsetParent.offsetLeft;
    getobj = getobj .offsetParent;
    }
    return objLeft ;
    }
    function getAbsoluteTop( ob ){
    if(!ob){return null;}
    var getobj = ob;
    var objTop = getobj .offsetTop;
    while( getobj != null && getobj .offsetParent != null && getobj .offsetParent.tagName != "BODY" ){
    objTop += getobj .offsetParent.offsetTop;
    getobj = getobj .offsetParent;
    }
    return objTop ;
    }
    function myleft(i)
    {
    again=false;
    w=0;
    for(j=0;j<count;j++)
    {
    if(i!=j)
    {
    if(document.getElementById("div"+j).clientWidth>labelmin)
    {
    again=true;
    document.getElementById("div"+j).style.width=document.getElementById("div"+j).clientWidth-step+"px";
    }
    w+=document.getElementById("div"+j).clientWidth;
    }
    }
    document.getElementById("div"+i).style.width=labelwidth*count-w+"px";
    if(!again)
    clearInterval(mydo);
    }
    function myright(i)
    {
    again=false;
    w=0;
    for(j=0;j<count;j++)
    {
    if(i!=j)
    {
    if(document.getElementById("div"+j).clientWidth<labelwidth)
    {
    again=true;
    document.getElementById("div"+j).style.width=document.getElementById("div"+j).clientWidth+step+"px";
    }
    w+=document.getElementById("div"+j).clientWidth;
    }
    }
    document.getElementById("div"+i).style.width=labelwidth*count-w+"px";
    if(!again)
    clearInterval(mydo);
    }
    function myover(e)
    {
    currentobj=(!e)?event.srcElement:e.target;
    if(currentobj.id.split("img").length==2)
    currentid=currentobj.id.split("img")[1];
    else
    currentid=currentobj.id.split("div")[1];
    if(!currentid)return;
    clearInterval(mydo);
    mydo=setInterval("myleft("+currentid+")",speed);
    }
    function mymove(e)
    {
    if(!e)e=event;
    scrolll=pageobj.scrollLeft;
    scrollt=pageobj.scrollTop;
    if(e.clientX+scrolll>=mainl&&e.clientX+scrolll<=(mainl+labelwidth*count)&&e.clientY+scrollt>=maint&&e.clientY+scrollt<=(maint+divh))return;
    clearInterval(mydo);
    bigdiv=0;max=0;
    for(i=0;i<count;i++)
    {
    if(document.getElementById("div"+i).clientWidth>max)
    {
    max=document.getElementById("div"+i).clientWidth;
    bigdiv=i;
    }
    }
    mydo=setInterval("myright("+bigdiv+")",speed);
    }
    document.onmousemove=mymove;
    </script>
    </head>
    <body>
    <div id=topdiv style="margin-left:auto; margin-right:auto;width:900px;overflow:hidden">
    <script>
    giftcount=12;
    giftimages= new Array();
    cols=4;
    rows=giftcount/cols;
    giftdivw=labelwidth*count/cols;
    giftdivh=180;
    opac=0;
    showspeed=10;
    breaktime=500;
    for(i=0;i<giftcount;i++)
    {
    giftimages[i]="images/"+(parseInt(i)+1)+".jpg";
    imageObj.src=giftimages[i];
    document.write('<div style="width:'+giftdivw+'px;height:'+giftdivh+'px;overflow:hidden;float:left;text-align:center;filter:alpha(opacity='+opac+');opacity:'+opac/100+';-moz-opacity:'+opac/100+'" id="giftdiv'+i+'"><img src="'+giftimages[i]+'" id="giftimg'+i+'" /></div>');
    }
    function myopac(i)
    {
    thisobj=document.getElementById("giftdiv"+i);
    again=false;
    if(Browser.isIE)
    {
    thisopac=thisobj.style.filter.split("opacity=")[1].split(")")[0];
    if(thisopac<100)
    {
    again=true;
    thisobj.style.filter="alpha(opacity="+(++thisopac)+")";
    }
    }
    else
    {
    if(thisobj.style.opacity)
    {
    thisopac=thisobj.style.opacity;
    if(thisopac<1)
    {
    again=true;
    thisobj.style.opacity=parseFloat(thisopac)+0.01;
    }
    }
    else
    {
    thisopac=thisobj.style.mozOpacity;
    if(thisopac<1)
    {
    again=true;
    thisobj.style.mozOpacity=parseFloat(thisopac)+0.01;
    }
    }
    }
    if(again)
    setTimeout("myopac("+i+")",showspeed);
    else if(i==giftcount-1)
    {
    i=Math.round(Math.random()*(giftcount-1));
    setTimeout("myopac2("+i+",'-')",showspeed);
    }
    }
    function myopac2(i,mark)
    {
    thisobj=document.getElementById("giftdiv"+i);
    again=false;
    if(mark=="+")
    {
    if(Browser.isIE)
    {
    thisopac=thisobj.style.filter.split("opacity=")[1].split(")")[0];
    if(thisopac<100)
    {
    again=true;
    thisobj.style.filter="alpha(opacity="+(++thisopac)+")";
    }
    else
    {
    i=Math.round(Math.random()*(giftcount-1));
    setTimeout("myopac2("+i+",'-')",showspeed);
    }
    }
    else
    {
    if(thisobj.style.opacity)
    {
    thisopac=thisobj.style.opacity;
    if(thisopac<1)
    {
    again=true;
    thisobj.style.opacity=parseFloat(thisopac)+0.01;
    }
    else
    {
    i=Math.round(Math.random()*(giftcount-1));
    setTimeout("myopac2("+i+",'-')",showspeed);
    }
    }
    else
    {
    thisopac=thisobj.style.mozOpacity;
    if(thisopac<1)
    {
    again=true;
    thisobj.style.mozOpacity=parseFloat(thisopac)+0.01;
    }
    else
    {
    i=Math.round(Math.random()*(giftcount-1));
    setTimeout("myopac2("+i+",'-')",showspeed);
    }
    }
    }
    }
    else if(mark=="-")
    {
    if(Browser.isIE)
    {
    thisopac=thisobj.style.filter.split("opacity=")[1].split(")")[0];
    if(thisopac>0)
    {
    again=true;
    thisobj.style.filter="alpha(opacity="+(--thisopac)+")";
    }
    else
    setTimeout("myopac2("+i+",'+')",showspeed);
    }
    else
    {
    if(thisobj.style.opacity)
    {
    thisopac=thisobj.style.opacity;
    if(thisopac>0)
    {
    again=true;
    thisobj.style.opacity=parseFloat(thisopac)-0.01;
    }
    else
    setTimeout("myopac2("+i+",'+')",showspeed);
    }
    else
    {
    thisopac=thisobj.style.mozOpacity;
    if(thisopac>0)
    {
    again=true;
    thisobj.style.mozOpacity=parseFloat(thisopac)-0.01;
    }
    else
    setTimeout("myopac2("+i+",'+')",showspeed);
    }
    }
    }
    if(again)
    setTimeout("myopac2("+i+",'"+mark+"')",showspeed);
    }
    function myshow()
    {
    for(i=0;i<giftcount;i++)
    {
    setTimeout("myopac("+i+")",showspeed+i*breaktime);
    }
    }
    myshow();
    </script>
    </div>
    <div id=drawdiv style="position:absolute;left:0;top:0"></div>
    <div id=maindiv style="position:absolute;top:550px;width:900px">
    <script>
    pageobj=document.documentElement;
    pw=pageobj.clientWidth;
    centerleft=(pw-labelwidth*count)/2;
    document.getElementById("maindiv").style.left=centerleft+"px";
    for(i=0;i<count;i++)
    {
    images[i]=""+(parseInt(i)+1)+".jpg";
    imageObj.src=images[i];
    document.write('<div style="width:'+labelwidth+'px;height:'+divh+'px;overflow:hidden;float:left" id="div'+i+'"><img src="'+images[i]+'" id="img'+i+'" /></div>');
    document.getElementById("img"+i).onmouseover=myover;
    document.getElementById("div"+i).onmouseover=myover;
    }
    mainl=getAbsoluteLeft(document.getElementById("maindiv"));
    maint=getAbsoluteTop(document.getElementById("maindiv"));
    </script>
    </div>
    <div id=leftdiv style="position:absolute;width:20px;height:300px;background:lightgreen;overflow:hidden;text-align:center"><div style="width:20px;height:300px; background:lightgreen;overflow:hidden; vertical-align:middle;line-height:300px;cursor:pointer" onclick=leftopen()>></div></div>
    <div id=rightdiv style="position:absolute;width:20px;height:300px;background:lightgreen;overflow:hidden;text-align:center"><div style="width:20px;height:300px; background:lightgreen;overflow:hidden; vertical-align:middle;line-height:300px;cursor:pointer" onclick=rightopen()><</div></div>
    </div>
    <script>
    p=new Array();
    flag=1;
    line=60;
    linecolor="green";
    angle=-90;
    drawspeed=10;
    drawstep=2;
    offset=20;
    centerl=centert=0;
    openspeed=2000;
    function mydraw()
    {
    p.length=0;
    angle+=5;
    if(angle>=270)angle=-90;
    pleft=centerl+Math.cos(angle/180*3.14)*line;
    ptop=centert+Math.sin(angle/180*3.14)*line;
    p.push(pleft,ptop);
    p.push(centerl,centert);
    points=p.join(",");
    if((p.length<4)||(p.length%2!=0))
    return false;
    if(Browser.isIE)
    {
    document.getElementById("drawdiv").innerHTML="";
    polyline=document.createElement("v:polyline");
    polyline.strokecolor=linecolor;
    polyline.filled=false;
    polyline.points=points;
    document.getElementById("drawdiv").appendChild(polyline);
    }
    else
    {
    polyline=document.getElementById("line");
    xmax=ymax=0;
    for(i=0;i<p.length;i++)
    {
    if(p[i]-xmax>0)
    xmax=p[i];
    if(p[++i]-ymax>0)
    ymax=p[i];
    }
    polyline.width=xmax;
    polyline.height=ymax;
    ctx=polyline.getContext("2d");
    ctx.strokeStyle=linecolor;
    ctx.beginPath();
    ctx.moveTo(p[0],p[1]);
    for(i=2;i<p.length;i++)
    ctx.lineTo(p[i],p[++i]);
    ctx.stroke();
    }
    }
    function myload()
    {
    w=pageobj.clientWidth;
    h=pageobj.clientHeight;
    centerl=document.getElementById("topdiv").offsetLeft+document.getElementById("topdiv").offsetWidth/2;
    centert=document.getElementById("topdiv").offsetTop+document.getElementById("topdiv").offsetHeight/2;
    if(!Browser.isIE)
    {
    mycanvas=document.createElement("canvas");
    mycanvas.width=w-offset;
    mycanvas.height=h-offset;
    mycanvas.id="line";
    document.getElementById("drawdiv").appendChild(mycanvas);
    }
    setInterval("mydraw()",drawspeed);
    mypos();
    leftopen();
    rightopen();
    setTimeout("leftclose()",openspeed);
    setTimeout("rightclose()",openspeed);
    }

    rightwidthmin=20;
    rightwidth=300;
    rightheight=300;
    function leftclose()
    {
    document.getElementById("leftdiv").innerHTML='<div style="width:'+rightwidthmin+'px;height:'+rightheight+'px; background:lightgreen;overflow:hidden; vertical-align:middle;line-height:'+rightheight+'px;cursor:pointer" onclick=leftopen()>></div>';
    document.getElementById("leftdiv").style.left=0;
    document.getElementById("leftdiv").style.width=rightwidthmin+"px";
    }
    function leftopen()
    {
    document.getElementById("leftdiv").innerHTML="<div style='width:"+rightwidth+"px;height:"+rightwidthmin+"px;background:orange'><div style='float:left;width:"+(rightwidth-rightwidthmin*2)+"px;line-height:"+rightwidthmin+"px;height:"+rightwidthmin+"px'>欢迎参与抽奖,祝您好运!</div><div style='width:"+rightwidthmin*2+"px;line-height:"+rightwidthmin+"px;height:"+rightwidthmin+"px;float:right;text-align:right;background:orange;cursor:pointer' onclick=leftclose()>关闭</div></div><div style='width:"+rightwidth+"px;height:"+(rightheight-rightwidthmin)+"px'></div>";
    document.getElementById("leftdiv").style.left=0;
    document.getElementById("leftdiv").style.width=rightwidth+"px";
    }
    function rightclose()
    {
    document.getElementById("rightdiv").innerHTML='<div style="width:'+rightwidthmin+'px;height:'+rightheight+'px; background:lightgreen;overflow:hidden; vertical-align:middle;line-height:'+rightheight+'px;cursor:pointer" onclick=rightopen()><</div>';
    document.getElementById("rightdiv").style.left=document.getElementById("rightdiv").offsetLeft-rightwidthmin+rightwidth+"px";
    document.getElementById("rightdiv").style.width=rightwidthmin+"px";
    }
    function rightopen()
    {
    document.getElementById("rightdiv").innerHTML="<div style='width:"+rightwidth+"px;height:"+rightwidthmin+"px;background:orange'><div style='float:left;width:"+(rightwidth-rightwidthmin*2)+"px;line-height:"+rightwidthmin+"px;height:"+rightwidthmin+"px'>欢迎光临双节专题</div><div style='width:"+rightwidthmin*2+"px;line-height:"+rightwidthmin+"px;height:"+rightwidthmin+"px;float:right;text-align:right;background:orange;cursor:pointer' onclick=rightclose()>关闭</div></div><div style='width:"+rightwidth+"px;height:"+(rightheight-rightwidthmin)+"px'></div>";
    document.getElementById("rightdiv").style.left=document.getElementById("rightdiv").offsetLeft+rightwidthmin-rightwidth+"px";
    document.getElementById("rightdiv").style.width=rightwidth+"px";
    }
    function mypos()
    {
    w=pageobj.clientWidth;
    h=pageobj.clientHeight;
    l=pageobj.scrollLeft;
    t=pageobj.scrollTop;
    document.getElementById("leftdiv").style.left=0;
    document.getElementById("leftdiv").style.top=(h-document.getElementById("leftdiv").clientHeight)/2+t+"px";
    document.getElementById("rightdiv").style.left=w-document.getElementById("rightdiv").clientWidth+l+"px";
    document.getElementById("rightdiv").style.top=(h-document.getElementById("rightdiv").clientHeight)/2+t+"px";
    }
    window.onload=myload;
    window.onscroll=mypos;
    window.onresize=mypos;
    </script>
    </body>
    </html>

    分享到:

    历史上的今天:

    马桶与道路 2011-09-17

    评论

  • 谢谢博主分享,这个对我很重要!
    回复治疗冻疮说:
    不客气,欢迎常来。
    2010-10-13 23:41:26