Javascript常见的效果汇总_Javascript教程_H5之家 - 中国HTML5教程资源分享第一站

一、如果文字过长,则将过长的部分变成省略号显示
<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;
overflow: hidden; text-overflow:ellipsis">
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>
</DIV>

二、滚动的图片
<script language="javascript">
imgArr=new Array()
imgArr[0]="<a href=http://www.wawaqin.com/ onmouseMove='javascript:outHover=true'><img src=http://www.wawaqin.com/images/wawaqin_logo.gif border=0></a>"
imgArr[1]="<a href=http://www.wawaqin.com/ onmouseMove='javascript:outHover=true'><img src=http://www.wawaqin.com/images/wawaqin_logo.gif border=0></a>"
imgArr[2]="<a href=http://www.wawaqin.com/ onmouseMove='javascript:outHover=true'><img src=http://www.wawaqin.com/images/wawaqin_logo.gif border=0></a>"
imgArr[3]="<a href=http://www.wawaqin.com/ onmouseMove='javascript:outHover=true'><img src=http://www.wawaqin.com/images/wawaqin_logo.gif border=0></a>"
imgArr[4]="<a href=http://www.wawaqin.com/ onmouseMove='javascript:outHover=true'><img src=http://www.wawaqin.com/images/wawaqin_logo.gif border=0></a>"
var moveStep=4        //步长，单位：pixel
var moveRelax=100    //移动时间间隔，单位：ms
ns4=(document.layers)?true:false
var displayImgAmount=4    //视区窗口可显示个数
var divWidth=220    //每块图片占位宽
var divHeight=145    //每块图片占位高
var startDnum=0
var nextDnum=startDnum+displayImgAmount
var timeID
var outHover=false
var startDivClipLeft
var nextDivClipRight
function initDivPlace(){
    if (ns4){
        for (i=0;i<displayImgAmount;i++){
            eval("document.divOuter.document.divAds"+i+".left="+divWidth*i)
        }
        for (i=displayImgAmount;i<imgArr.length;i++){
            eval("document.divOuter.document.divAds"+i+".left="+divWidth*displayImgAmount)
        }
    }else{
        for (i=0;i<displayImgAmount;i++){
            eval("document.all.divAds"+i+".style.left="+divWidth*i)
        }
        for (i=displayImgAmount;i<imgArr.length;i++){
            eval("document.all.divAds"+i+".style.left="+divWidth*displayImgAmount)
        }
    }
}
function mvStart(){
    timeID=setTimeout(moveLeftDiv,moveRelax)
}
function mvStop(){
    clearTimeout(timeID)
}
function moveLeftDiv(){
    if (ns4){
        for (i=0;i<=displayImgAmount;i++){
            eval("document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left=document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left-moveStep")
        }
        startDivClipLeft=parseInt(eval("document.divOuter.document.divAds"+startDnum+".clip.left"))
        nextDivClipRight=parseInt(eval("document.divOuter.document.divAds"+nextDnum+".clip.right"))
        if (startDivClipLeft+moveStep>divWidth){
            eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+divWidth)

            eval("document.divOuter.document.divAds"+startDnum+".left="+divWidth*displayImgAmount)
            eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".left=document.divOuter.document.divAds"+nextDnum+".left+"+divWidth)
            eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".clip.left=0")


            startDnum=(++startDnum)%imgArr.length
            nextDnum=(startDnum+displayImgAmount)%imgArr.length

            startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
            nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
        }else{
            eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0")
            startDivClipLeft+=moveStep
            nextDivClipRight+=moveStep
        }
        eval("document.divOuter.document.divAds"+startDnum+".clip.left="+startDivClipLeft)
        eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+nextDivClipRight)
    }else{
        for (i=0;i<=displayImgAmount;i++){
            eval("document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.left=document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.pixelLeft-moveStep")
        }

        startDivClipLeft=parseInt(eval("document.all.divAds"+startDnum+".currentStyle.clipLeft"))
        nextDivClipRight=parseInt(eval("document.all.divAds"+nextDnum+".currentStyle.clipRight"))

        if (startDivClipLeft+moveStep>divWidth){
            eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+divWidth+","+divHeight+",0"+")'")

            eval("document.all.divAds"+startDnum+".style.left="+divWidth*displayImgAmount)
            eval("document.all.divAds"+parseInt((nextDnum+1)%imgArr.length)+".style.left=document.all.divAds"+nextDnum+".style.pixelLeft+"+divWidth)

            startDnum=(++startDnum)%imgArr.length
            nextDnum=(startDnum+displayImgAmount)%imgArr.length

            startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
            nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
        }else{
            startDivClipLeft+=moveStep
            nextDivClipRight+=moveStep
        }
        eval("document.all.divAds"+startDnum+".style.clip='rect(0,"+divWidth+","+divHeight+","+startDivClipLeft+")'")
        eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+nextDivClipRight+","+divHeight+",0)'")
    }
    if (outHover){
        mvStop()
    }else{
        mvStart()
    }


}
function writeDivs(){
    if (ns4){
        document.write("<ilayer name=divOuter width=750 height="+divHeight+">")

        for (i=0;i<imgArr.length;i++){
            document.write("<layer name=divAds"+i+">")
            document.write(imgArr[i]+" ")
            document.write("</layer>")
        }
        document.write("</ilayer>")
        document.close()
        for (i=displayImgAmount;i<imgArr.length;i++){
            eval("document.divOuter.document.divAds"+i+".clip.right=0")
        }
    }else{
        document.write("<div id=divOuter width=750 height="+divHeight+">")

        for (i=0;i<imgArr.length;i++){
            document.write("<div id=divAds"+i+">")
            document.write(imgArr[i]+" ")
            document.write("</div>")
        }
        document.write("</div>")
        for (i=displayImgAmount;i<imgArr.length;i++){
            eval("document.all.divAds"+i+".style.clip='rect(0,0,"+divHeight+",0)'")
        }
    }
}
</script>
<BODY onload=javascript:mvStart()>
<SCRIPT language=javascript>writeDivs();initDivPlace();</SCRIPT>