鼠標射線特效，JS網頁代碼

2024-09-05 12:22:21

字體：大中小

來源：轉載

供稿：網友

不知應該如何此款JS代碼，用到了鼠標的操作，但好像更多的是JS來實現的，線的中心是鼠標，晃動鼠標可看到線的終點始終受到鼠標的牽縛，就像是射線一樣，更像是一張網。用了些VML的相關知識。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>射線</title><STYLE>.disableHscroll{width:100%;overflow-x:hidden;overflow-y:scroll;}v/:* { BEHAVIOR: url(#default#VML)}</STYLE></head><body bgcolor="#3A6EA5" text="#000000"> <SCRIPT>var defaultcolor="#999999"var lineweighthighlight=1var lineweightnormal=1var distancetomouse=0var mousepos_x=0var mousepos_x=0var marginleft=0var margintop=0var marginbottom=0var marginright=0var margincenterxvar margincenteryvar mousepos_x=0var mousepos_x=0if (document.all&&window.print){    document.write('<div   class="91j1f1n"   id="bodycontent" style="position:relative">')}function initiateanimation(){    marginbottom=document.body.clientHeight    marginright=document.body.clientWidth    margincenterx=Math.floor(marginright/2)    margincentery=Math.floor(marginbottom/2)        rectangulartopleft.to=marginleft+","+margintop    rectangulartopright.to=marginright+","+margintop    rectangularbottomleft.to=marginleft+","+marginbottom    rectangularbottomright.to=marginright+","+marginbottom        rectangulartop.to=margincenterx+","+margintop    rectangularright.to=marginright+","+margincentery    rectangularbottom.to=margincenterx+","+marginbottom    rectangularleft.to=marginleft+","+margincentery        rectangulartopleft.strokecolor=defaultcolor    rectangulartopright.strokecolor=defaultcolor    rectangularbottomleft.strokecolor=defaultcolor    rectangularbottomright.strokecolor=defaultcolor        rectangulartop.strokecolor=defaultcolor    rectangularright.strokecolor=defaultcolor    rectangularbottom.strokecolor=defaultcolor    rectangularleft.strokecolor=defaultcolor}function msover(thiscolorhighlight){    if(document.all&&window.print){        rectangulartopleft.strokecolor=thiscolorhighlight        rectangulartopright.strokecolor=thiscolorhighlight        rectangularbottomleft.strokecolor=thiscolorhighlight        rectangularbottomright.strokecolor=thiscolorhighlight            rectangulartop.strokecolor=thiscolorhighlight        rectangularright.strokecolor=thiscolorhighlight        rectangularbottom.strokecolor=thiscolorhighlight        rectangularleft.strokecolor=thiscolorhighlight                rectangulartopleft.strokeweight=lineweighthighlight        rectangulartopright.strokeweight=lineweighthighlight        rectangularbottomleft.strokeweight=lineweighthighlight        rectangularbottomright.strokeweight=lineweighthighlight            rectangulartop.strokeweight=lineweighthighlight        rectangularright.strokeweight=lineweighthighlight        rectangularbottom.strokeweight=lineweighthighlight        rectangularleft.strokeweight=lineweighthighlight    }}function msout(){    if(document.all&&window.print){        rectangulartopleft.strokecolor=defaultcolor        rectangulartopright.strokecolor=defaultcolor        rectangularbottomleft.strokecolor=defaultcolor        rectangularbottomright.strokecolor=defaultcolor            rectangulartop.strokecolor=defaultcolor        rectangularright.strokecolor=defaultcolor        rectangularbottom.strokecolor=defaultcolor        rectangularleft.strokecolor=defaultcolor                rectangulartopleft.strokeweight=lineweightnormal        rectangulartopright.strokeweight=lineweightnormal        rectangularbottomleft.strokeweight=lineweightnormal        rectangularbottomright.strokeweight=lineweightnormal            rectangulartop.strokeweight=lineweightnormal        rectangularright.strokeweight=lineweightnormal        rectangularbottom.strokeweight=lineweightnormal        rectangularleft.strokeweight=lineweightnormal          }}function momouse(){    if(document.all&&window.print){        mousepos_x=document.body.scrollLeft+event.clientX        mousepos_y=document.body.scrollTop+event.clientY            rectangulartopleft.from=mousepos_x+","+mousepos_y        rectangulartopright.from=mousepos_x+","+mousepos_y        rectangularbottomleft.from=mousepos_x+","+mousepos_y        rectangularbottomright.from=mousepos_x+","+mousepos_y            rectangulartop.from=mousepos_x+","+mousepos_y        rectangularright.from=mousepos_x+","+mousepos_y        rectangularbottom.from=mousepos_x+","+mousepos_y        rectangularleft.from=mousepos_x+","+mousepos_y     }}if(document.all&&window.print){    document.body.className="disableHscroll"    code="<v:line id=rectangulartopleft style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"     code+="<v:line id=rectangulartopright style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"     code+="<v:line id=rectangularbottomleft style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"     code+="<v:line id=rectangularbottomright style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"     code+="<v:line id=rectangulartop style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"     code+="<v:line id=rectangularright style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"     code+="<v:line id=rectangularbottom style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"     code+="<v:line id=rectangularleft style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"     document.body.insertAdjacentHTML("afterBegin",code)    document.onmousemove=momouse    window.onload=initiateanimation}</SCRIPT> </body></html>

上一篇：鼠標點擊散開的網頁特效

下一篇：最經典的文字跟隨鼠標的JS網頁特效