收集的JavaScript效果---酷

今天是：

首页 ┆ 信息查询 ┆ 网站SEO查询工具 ┆ CSS编辑器 ┆ 建站素材

软件新闻

操作系统

Vista Winxp Win2003 Linux Windows综合

工具软件

系统工具媒体工具网络工具杀毒软件聊天

软件开发

C教程 C++ Java C# ASP.NET JSP PHP

数据库

Oracle MySQL DB2 SQL Server Sybase

安全

网络病毒

办公应用

Word Excel Powerpoint Outlook 其他

平面设计

Photoshop Fireworks Coreldraw Flash Illustrator 3dsmax

网站运营

网站运营网站优化网站策划策划书下载建站心得站长故事网站盈利网页制作网页特效 建站素材 免费资源 QQ频道

当前位置：首页 >> 网页制作 >> Javascript/Ajax >> 收集的JavaScript效果---酷

发布于2006-03-10 19:59 来源：blueidea

以下代码片段：

二鼠标旁边的提示信息,类似与163登录后的页面提示效果

以下代码片段：

<a href="#" title="这是提示">tip</a>
<script Language="JavaScript">
//***********默认设置定义.*********************
tPopWait=50;//停留tWait豪秒后显示提示。
tPopShow=5000;//显示tShow豪秒后关闭提示
showPopStep=20;
popOpacity=99;
//***************内部变量定义*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;
document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText { background-color: #F8F8F5;color:#000000; border: 1px #000000 solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");

function showPopupText(){
var o=event.srcElement;
MouseX=event.x;
MouseY=event.y;
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
if(o.dypop!=sPop) {
sPop=o.dypop;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting);
if(sPop==null || sPop=="") {
dypopLayer.innerHTML="";
dypopLayer.style.filter="Alpha()";
dypopLayer.filters.Alpha.opacity=0;
}
else {
if(o.dyclass!=null) popStyle=o.dyclass
else popStyle="cPopText";
curShow=setTimeout("showIt()",tPopWait);
}
}
}
function showIt(){
dypopLayer.className=popStyle;
dypopLayer.innerHTML=sPop;
popWidth=dypopLayer.clientWidth;
popHeight=dypopLayer.clientHeight;
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
else popLeftAdjust=0;
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
else popTopAdjust=0;
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
dypopLayer.style.filter="Alpha(Opacity=0)";
fadeOut();
}
function fadeOut(){
if(dypopLayer.filters.Alpha.opacity<popOpacity) {
dypopLayer.filters.Alpha.opacity+=showPopStep;
tFadeOut=setTimeout("fadeOut()",1);
}
else {
dypopLayer.filters.Alpha.opacity=popOpacity;
tFadeWaiting=setTimeout("fadeIn()",tPopShow);
}
}
function fadeIn(){
if(dypopLayer.filters.Alpha.opacity>0) {
dypopLayer.filters.Alpha.opacity-=1;
tFadeIn=setTimeout("fadeIn()",1);
}
}
document.onmouseover=showPopupText;
</script>

以下代码片段：

三如果文字过长,则将过长的部分变成省略号显示

以下代码片段：

<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=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
imgArr[1]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
imgArr[2]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
imgArr[3]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
imgArr[4]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.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 style='position:relative' width=750 height="+divHeight+">")

      for (i=0;i<imgArr.length;i++){
         document.write("<div id=divAds"+i+" style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'>")
         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>

中查找“收集的JavaScript效果---酷”更多相关内容

中查找“收集的JavaScript效果---酷”更多相关内容

上一篇：利用搜索引擎引用来高亮页面关键字
下一篇：收集的JavaScript效果---酷[1]