如何實現網頁滑鼠特效（詳細教學）-js教程-PHP中文網

首頁

web前端

js教程

如何實現網頁滑鼠特效（詳細教學）

亚连

Jun 12, 2018 pm 05:35 PM

我為廣大讀者們整理了10個經典的網頁滑鼠特效程式碼，並對程式碼進行了編譯和解釋，需要的朋友收藏下吧。

1、滑鼠指向出現實用特殊提示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>css打造鼠标触发效果</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
color: #000;
font-size: 12px;
line-height: 160%;
text-align: left;
height: 100%;
font-family: &#39;宋体&#39;,Tahoma ,arial,verdana,sans-serif,&#39;Lucida Grande&#39;,&#39;Lucida Sans Unicode&#39;;
}
*{ margin:0; padding:0;}
h2,h2 a:link,h2 a:hover,h2 a:visited{
font-size: 14px;
text-decoration: none;
color: #000000;
}
.kw_from {
padding:20px 0 0 0px;
margin: auto;
height: 300px;
overflow: hidden;
width: 650px;
}
.kw_from .sbtn{
float:left;
width:80px;
padding: 16px 0 0 0;
}
.kw_from .searchMore{
float:left;
width:80px;
padding: 4px;
}
#searchNav {
width:430px;
float: left;
}
#searchNav #conter1, #searchNav #conter3{
float:left;
width:250px;
}
#searchNav #conter2, #searchNav #conter4{
float:left;
width:180px;
}
#searchNav ul {
padding: 0;
margin: 0;
list-style: none;
}
#searchNav li {
float: left;
}
#searchNav li ul {
display: none;
top: 20px;
}
#searchNav li:hover ul, #searchNav li.over ul {
display: block;
float:left;
}
#searchNav ul li a{
float:left;
display:block;
font-size:12px;
padding:3px;
text-decoration: none;
color: #777;
}
#searchNav ul li a:hover{
background-color:#f4f4f4;
}
#searchNav #jobKw{
width:220px;
height:18px;
}
#searchNav #cityKw{
width:130px;
height:18px;
}
-->
</style>
<script type="text/javascript">
<!--//--><![CDATA[//>
<!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("searchNav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]>
</script>
</head>
<body>
<p class="kw_from">
<form action="/search.html" method="get" name="searchForm" id="searchForm" onsubmit="return check()">
<ul id="searchNav">
<li id="conter1"><h2 id="找什么">找什么</h2>
<input id="jobKw" name="jobKw" type="text" />
<ul id="conter3">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >会计</a> </li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >网页设计</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >翻译</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >家教</a></li>
<li><span class="moreCity"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >更多>> </a></span></li>
</ul>
</li>
<li id="conter2"><h2 id="在那里">在那里</h2>
<input id="cityKw" name="cityKw" type="text" />
<ul id="conter4">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >北京</a> </li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上海</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >广州</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >深圳</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >南京</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >天津</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >杭州</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >成都</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >重庆</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >武汉</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >西安</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >沈阳</a></li>
<li><span class="moreCity"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >更多城市>></a></span></li>
</ul>
</li>
</ul>
<p class="sbtn">
<input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索工作" />
</p>
<p class="searchMore">
<a href="search_expert.html" rel="external nofollow" >高级搜索</a><br /><a href="search_sort.html" rel="external nofollow" >分类搜索</a>   </p>
</form>
</p>
</body>
</html>

2、跟隨滑鼠的流星

<html>
<head>
<title>网页特效---跟随鼠标的流星</title>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
</head>
<body bgColor="#000000">
<script language="JavaScript">
<!--
Clrs=new Array(&#39;ff0000&#39;,&#39;00ff00&#39;,&#39;ffffff&#39;,&#39;ff00ff&#39;,&#39;ffa500&#39;,&#39;ffff00&#39;,&#39;00ff00&#39;,&#39;ffffff&#39;,&#39;ff00ff&#39;)
var speed=1;
var RunTime = 0;
var cntr=0;
var xcntr=100;
var Nslayers;
var pulse=25;
var onClrs;
var Xpos = 421;
var Ypos = 231;
var _y;
if (document.layers){
window.captureEvents(Event.MOUSEMOVE);
function xFollowMouse(evnt){
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = xFollowMouse;
document.write(&#39;<layer name="a0" left=10 top=10 bgcolor="#ff0000" clip="0,0,2,2"></layer>&#39;
+&#39;<layer name="a1" left=10 top=10 bgcolor="#00ff00" clip="0,0,2,2"></layer>&#39;
+&#39;<layer name="a2" left=10 top=10 bgcolor="#ffffff" clip="0,0,2,2"></layer>&#39;
+&#39;<layer name="a3" left=10 top=10 bgcolor="#ffa500" clip="0,0,2,2"></layer>&#39;
+&#39;<layer name="a4" left=10 top=10 bgcolor="#ff00ff" clip="0,0,2,2"></layer>&#39;
+&#39;<layer name="a5" left=10 top=10 bgcolor="#8888ff" clip="0,0,2,2"></layer>&#39;
+&#39;<layer name="a6" left=10 top=10 bgcolor="#fff000" clip="0,0,2,2"></layer>&#39;);
}
else if (document.all){
function FollowMouse(){
Xpos = document.body.scrollLeft+event.x;
Ypos = document.body.scrollTop+event.y;
}
document.onmousemove = FollowMouse;
document.write(&#39;<p id="iep" style="position:absolute;top:0px;left:0px">&#39;
+&#39;<p id="c" style="position:relative">&#39;
+&#39;<p style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ff0000;font-size:2px"></p>&#39;
+&#39;<p style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#00ff00;font-size:2px"></p>&#39;
+&#39;<p style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ffffff;font-size:2px"></p>&#39;
+&#39;<p style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ffa500;font-size:2px"></p>&#39;
+&#39;<p style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ff00ff;font-size:2px"></p>&#39;
+&#39;<p style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#8888ff;font-size:2px"></p>&#39;
+&#39;<p style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#fff000;font-size:2px"></p>&#39;
+&#39;</p>&#39;
+&#39;</p>&#39;);
}
function sv2(){
if (document.layers){
for (i=0;i<7;i++)
{
Nslayers="a"+i;
document.layers[0].top=Ypos+cntr*Math.cos((RunTime+i*4.5)/5);
document.layers[0].left=Xpos+cntr*Math.sin((RunTime+i*4.5)/5);
var randCol=Math.round(Math.random()*8);
document.layers[0].bgColor=Clrs[randCol];
}
cntr+=1;
RunTime+=speed;
stp=setTimeout(&#39;sv2()&#39;,10);
if (cntr>=100)
{
cntr=100;
speed=2.5;
for (i=0;i<7;i++)
{
Nslayers="a"+i;
document.layers[Nslayers].top=Ypos+cntr*Math.cos((RunTime-100)*i/90);
document.layers[Nslayers].left=Xpos+cntr*Math.sin((RunTime-100)*i/90);
}
}
if (RunTime>182)
{
speed=0.5;
for (i=0;i<7;i++)
{
Nslayers="a"+i;
document.layers[Nslayers].top=Ypos+xcntr*Math.cos(((RunTime-182)+i*4.5)/5)*Math.cos((RunTime-182)/5);
document.layers[Nslayers].left=Xpos+xcntr*Math.sin(((RunTime-182)+i*4.5)/5);
}
}
}
else if (document.all){
for (i=0;i<iep.all.c.all.length;i++)
{
var randCol=Math.round(Math.random()*8);
iep.all.c.all[0].style.background=Clrs[randCol];
iep.all.c.all[0].style.top=Ypos+cntr*Math.cos((RunTime+i*4.5)/5);
iep.all.c.all[0].style.left=Xpos+cntr*Math.sin((RunTime+i*4.5)/5);
}
cntr+=1;
RunTime+=speed;
window.status=RunTime;
stp=setTimeout(&#39;sv2()&#39;,10);
if (cntr>=100)
{
cntr=100;
speed=2.5;
for (i=0;i<iep.all.c.all.length;i++)
{
iep.all.c.all[i].style.top=Ypos+cntr*Math.cos((RunTime-100)*i/90);
iep.all.c.all[i].style.left=Xpos+cntr*Math.sin((RunTime-100)*i/90);
}
}
if (RunTime>182)
{
speed=0.5;
for (i=0;i<iep.all.c.all.length;i++)
{
iep.all.c.all[i].style.top=Ypos+xcntr*Math.cos(((RunTime-182)+i*4.5)/5)*Math.cos((RunTime-182)/5);
iep.all.c.all[i].style.left=Xpos+xcntr*Math.sin(((RunTime-182)+i*4.5)/5);
}
}
}
if (RunTime>210)
{
xcntr-=10;
}
if (document.layers)
_y=-window.innerWidth-90;
else if (document.all)
_y=-document.body.clientWidth-90;
if (xcntr <= _y)
{
RunTime=0;
speed=1;
cntr=0;
xcntr=100;
}
}
sv2()
//-->
</script>
</body>
</html>

3、跟隨滑鼠的三色彩帶

<html>
<head>
<title>网页特效--很酷的跟随鼠标的三色彩带</title>
</head><body bgColor=#000000>
<!--将以下代码加入HTML的<Body></Body>之间-->
<script language="JavaScript">
<!--
var a_Colour=&#39;fff000&#39;;
var b_Colour=&#39;00ff00&#39;;
var c_Colour=&#39;ff00ff&#39;;
var Size=120;
var YDummy=new Array(),XDummy=new Array(),xpos=0,ypos=0,ThisStep=0;step=0.6;
if (document.layers){
window.captureEvents(Event.MOUSEMOVE);
function nsMouse(evnt){
xpos = window.pageYOffset+evnt.pageX+6;
ypos = window.pageYOffset+evnt.pageY+16;
}
window.onMouseMove = nsMouse;
}
else if (document.all)
{
function ieMouse(){
xpos = document.body.scrollLeft+event.x+6;
ypos = document.body.scrollTop+event.y+16;
}
document.onmousemove = ieMouse;
}
function swirl(){
for (i = 0; i < 3; i++)
{
YDummy[i]=ypos+Size*Math.sin((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4);
XDummy[i]=xpos+Size*Math.cos((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4);
}
ThisStep+=step;
setTimeout(&#39;swirl()&#39;,10);
}
var amount=10;
if (document.layers){
for (i = 0; i < amount; i++)
{
document.write(&#39;<layer name=nsa&#39;+i+&#39; top=0 left=0 width=&#39;+i/2+&#39; height=&#39;+i/2+&#39; bgcolor=&#39;+a_Colour+&#39;></layer>&#39;);
document.write(&#39;<layer name=nsb&#39;+i+&#39; top=0 left=0 width=&#39;+i/2+&#39; height=&#39;+i/2+&#39; bgcolor=&#39;+b_Colour+&#39;></layer>&#39;);
document.write(&#39;<layer name=nsc&#39;+i+&#39; top=0 left=0 width=&#39;+i/2+&#39; height=&#39;+i/2+&#39; bgcolor=&#39;+c_Colour+&#39;></layer>&#39;);
}
}
else if (document.all){
document.write(&#39;<p id="Op" style="position:absolute;top:0px;left:0px">&#39;
+&#39;<p id="Ip" style="position:relative">&#39;);
for (i = 0; i < amount; i++)
{
document.write(&#39;<p id=x style="position:absolute;top:0px;left:0px;width:&#39;+i/2+&#39;;height:&#39;+i/2+&#39;;background:&#39;+a_Colour+&#39;;font-size:&#39;+i/2+&#39;"></p>&#39;);
document.write(&#39;<p id=y style="position:absolute;top:0px;left:0px;width:&#39;+i/2+&#39;;height:&#39;+i/2+&#39;;background:&#39;+b_Colour+&#39;;font-size:&#39;+i/2+&#39;"></p>&#39;);
document.write(&#39;<p id=z style="position:absolute;top:0px;left:0px;width:&#39;+i/2+&#39;;height:&#39;+i/2+&#39;;background:&#39;+c_Colour+&#39;;font-size:&#39;+i/2+&#39;"></p>&#39;);
}
document.write(&#39;</p></p>&#39;);
}
function prepos(){
var ntscp=document.layers;
var msie=document.all;
if (document.layers){
for (i = 0; i < amount; i++)
{
if (i < amount-1)
{
ntscp[&#39;nsa&#39;+i].top=ntscp[&#39;nsa&#39;+(i+1)].top;ntscp[&#39;nsa&#39;+i].left=ntscp[&#39;nsa&#39;+(i+1)].left;
ntscp[&#39;nsb&#39;+i].top=ntscp[&#39;nsb&#39;+(i+1)].top;ntscp[&#39;nsb&#39;+i].left=ntscp[&#39;nsb&#39;+(i+1)].left;
ntscp[&#39;nsc&#39;+i].top=ntscp[&#39;nsc&#39;+(i+1)].top;ntscp[&#39;nsc&#39;+i].left=ntscp[&#39;nsc&#39;+(i+1)].left;
}
else
{
ntscp[&#39;nsa&#39;+i].top=YDummy[0];ntscp[&#39;nsa&#39;+i].left=XDummy[0];
ntscp[&#39;nsb&#39;+i].top=YDummy[1];ntscp[&#39;nsb&#39;+i].left=XDummy[1];
ntscp[&#39;nsc&#39;+i].top=YDummy[2];ntscp[&#39;nsc&#39;+i].left=XDummy[2];
}
}
}
else if (document.all){
for (i = 0; i < amount; i++)
{
if (i < amount-1)
{
msie.x[i].style.top=msie.x[i+1].style.top;msie.x[i].style.left=msie.x[i+1].style.left;
msie.y[i].style.top=msie.y[i+1].style.top;msie.y[i].style.left=msie.y[i+1].style.left;
msie.z[i].style.top=msie.z[i+1].style.top;msie.z[i].style.left=msie.z[i+1].style.left;
}
else
{
msie.x[i].style.top=YDummy[0];msie.x[i].style.left=XDummy[0];
msie.y[i].style.top=YDummy[1];msie.y[i].style.left=XDummy[1];
msie.z[i].style.top=YDummy[2];msie.z[i].style.left=XDummy[2];
}
}
}
setTimeout("prepos()",10);
}
function Start(){
swirl(),prepos()
}
window.onload=Start;
// -->
</script>
</body></html>

4、滑鼠經過捲動提示文字

<a href="http://www.网址.com" rel="external nofollow" _fcksavedurl="http://www.网址.com" target="_blank" onMouseOver="helpor_net_show(this,event,&#39;网页鼠标特效&#39;)" onMouseOut="helpor_net_hide()">把鼠标放上来试试</a>
<p id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:seashell">
<layer name="nstip" width="1000px" bgColor="seashell"></layer>
</p>
<SCRIPT language="JavaScript">
<!--
if (!document.layers&&!document.all)
event="test"
function helpor_net_show(current,e,text){
if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML=&#39;<marquee style="border:1px solid #3399ff">&#39;+text+&#39;</marquee>&#39;
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tooltip2.style.visibility="visible"
}
else if (document.layers){
document.tooltip2.document.nstip.document.write(&#39;<b>&#39;+text+&#39;</b>&#39;)
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}
}
function helpor_net_hide(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}
function scrolltip(){
if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150
}
//-->
</SCRIPT>

5、圍繞滑鼠旋轉的三葉空間旋漿

<html>
<head>
<title>围绕鼠标旋转的三叶空间旋浆</title>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
</head>
<body bgColor="#000000">
<script
language="JavaScript">
<!--
//To add more stars simply add more colours in below array!!
colours=new Array(&#39;ff0000&#39;,&#39;00ff00&#39;,&#39;3366ff&#39;,&#39;ff00ff&#39;,&#39;ffa500&#39;,&#39;ffffff&#39;,&#39;fff000&#39;)
//Alter nothing below!!
amount=colours.length;
YgetDelay=0,XgetDelay=0,Ydelay=0,Xdelay=0,ns=(document.layers)?1:0,step=0.2,currStep=0,my=0,mx=0;
if (ns){
for (i=0; i < amount; i++)
document.write(&#39;<LAYER NAME="nsstars&#39;+i+&#39;" BGCOLOR=&#39;+colours[i]+&#39; CLIP="0,0,2,2"></LAYER>&#39;);
}
else{
document.write(&#39;<p id="ie" style="position:absolute;top:0;left:0;"><p style="position:relative">&#39;);
for (i=0; i < amount; i++)
document.write(&#39;<span id="iestars" style="position:absolute;top:0;left:0;width:2px;height:2px;background:&#39;+colours[i]+&#39;;font-size:2px"></span>&#39;);
document.write(&#39;</p></p>&#39;);
}
if (ns){
window.captureEvents(Event.MOUSEMOVE);
function nMouse(evnt){
my=evnt.pageY;mx=evnt.pageX
}
window.onMouseMove=nMouse;
}
else{
function iMouse(){
my=event.y;mx=event.x;
}
document.onmousemove=iMouse
}
function stars(){
if (!ns)ie.style.top=document.body.scrollTop;
for (i=0; i < amount; i++)
{
var layer=(document.layers)?document.layers["nsstars"+i]:iestars[i].style;
layer.top= Ydelay+100*Math.sin((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10);
layer.left=Xdelay+180*Math.cos((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10);
}
currStep+=step;
}
function delay(){
Ydelay = YgetDelay+=(my-YgetDelay)*1/20;
Xdelay = XgetDelay+=(mx-XgetDelay)*1/20;
stars();
setTimeout(&#39;delay()&#39;,10);
}
delay();
//-->
</script>
<script language="JavaScript">
<!-- hide
function goHist(a)
{
history.go(a);
}
//-->
</script>
</body>
</html>

6、圍繞滑鼠的立體星環（摩天輪）

<html>
<head>
<title>围绕鼠标的立体星环</title>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<script language="JavaScript">
<!--
ns=(document.layers)?1:0;
Clrs=new Array(&#39;ff0000&#39;,&#39;00ff00&#39;,&#39;ffffff&#39;,&#39;ff00ff&#39;,&#39;ffa500&#39;,&#39;ffff00&#39;,&#39;00ff00&#39;,&#39;ffffff&#39;,&#39;ff00ff&#39;)
var amount=8
var step=0.3;
var currStep=0;
var Ypos=0;
var Xpos=0;
if (ns){
for (i=0; i < amount; i++)
document.write(&#39;<LAYER NAME="n&#39;+i+&#39;" LEFT=0 TOP=0 BGCOLOR=#FFFFFF CLIP="0,0,2,2"></LAYER>&#39;);
window.captureEvents(Event.MOUSEMOVE);
function nMouse(evnt){
Ypos = evnt.pageY;
Xpos = evnt.pageX;
}
window.onMouseMove=nMouse;
}
else{
document.write(&#39;<p style="position:absolute;top:0px;left:0px">&#39;);
document.write(&#39;<p style="position:relative">&#39;);
for (i=0; i < amount; i++)
document.write(&#39;<p id="me" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#00aaff"></p>&#39;);
document.write(&#39;</p></p>&#39;);
function iMouse(){
Ypos=event.y+document.body.scrollTop;
Xpos=event.x+document.body.scrollLeft;
}
document.onmousemove = iMouse;
}
function Comet(){
for (i=0; i < amount; i++){
var randCol=Math.floor(Math.random()*Clrs.length);
var layer=(document.layers)?document.layers[&#39;n&#39;+i]:me[i].style;
layer.top =Ypos+60*Math.sin((currStep + i*3.1)/4)*Math.cos(currStep/10);
layer.left=Xpos+60*Math.cos((currStep + i*3.1)/4);
if (ns) layer.bgColor=Clrs[randCol];else layer.background=Clrs[randCol];
}
currStep+=step;
setTimeout("Comet()",10);
}
window.onload=Comet;
// -->
</script>
</head>
<body bgcolor="#000000">
</body>
</html>

7、圍繞滑鼠的立體旋轉文字

<html>
<head>
<title>围绕鼠标的立体旋转文字</title>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<meta content="Microsoft FrontPage 5.0" name="GENERATOR">
</head>
<body>
<script LANGUAGE="JavaScript">
<!-- Begin
if (document.all) {
yourLogo = "网页制作大宝库"; //Not less than 2 letters!
logoFont = "Arial";
logoColor = "ff0000";
//Nothing needs altering below!
yourLogo = yourLogo.split(&#39;&#39;);
L = yourLogo.length;
TrigSplit = 360 / L;
Sz = new Array()
logoWidth = 100;
logoHeight = -30;
ypos = 0;
xpos = 0;
step = 0.09;
currStep = 0;
document.write(&#39;<p id="outer" style="position:absolute;top:0px;left:0px"><p style="position:relative">&#39;);
for (i = 0; i < L; i++) {
document.write(&#39;<p id="ie" style="position:absolute;top:0px;left:0px;&#39;
+&#39;width:10px;height:10px;font-family:&#39;+logoFont+&#39;;font-size:12px;&#39;
+&#39;color:&#39;+logoColor+&#39;;text-align:center">&#39;+yourLogo[i]+&#39;</p>&#39;);
}
document.write(&#39;</p></p>&#39;);
function Mouse() {
ypos = event.y;
xpos = event.x - 5;
}
document.onmousemove=Mouse;
function animateLogo() {
outer.style.pixelTop = document.body.scrollTop;
for (i = 0; i < L; i++) {
ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);
ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);
Sz[i] = ie[i].style.pixelTop - ypos;
if (Sz[i] < 5) Sz[i] = 5;
ie[i].style.fontSize = Sz[i] / 1.7;
}
currStep -= step;
setTimeout(&#39;animateLogo()&#39;, 20);
}
window.onload = animateLogo;
}
// End -->
</script>
</body>
</html>

#8、跟隨滑鼠的日期時間表盤

<html>
<head>
<title>跟随鼠标的日期时间表盘</title>
</head><BODY>
<!--将以下代码加入HTML的<Body></Body>之间-->
<SCRIPT language=JavaScript>
<!--
dCol="0000FF"
fCol="FF0000"
sCol="00FF00"
mCol="000000"
hCol="000000"
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=0;
ClockFromMouseX=100;
d=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
m=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate="年 "+m[date.getMonth()]+" "+day+"日 "+d[date.getDay()]+" "+year;
D=TodaysDate.split(&#39;&#39;);
H=&#39;...&#39;;
H=H.split(&#39;&#39;);
M=&#39;....&#39;;
M=M.split(&#39;&#39;);
S=&#39;.....&#39;;
S=S.split(&#39;&#39;);
Face=&#39;1 2 3 4 5 6 7 8 9 10 11 12&#39;;
font=&#39;Arial&#39;;
size=1;
speed=0.6;
ns=(document.layers);
ie=(document.all);
Face=Face.split(&#39; &#39;);
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fCol+">";
props2="<font face="+font+" size="+size+" color="+dCol+">";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
step=0.06;
currStep=0;
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
for (i=0; i < D.length; i++)
document.write(&#39;<layer name="nsDate&#39;+i+&#39;" top=0 left=0 height=&#39;+a+&#39; width=&#39;+a+&#39;><center>&#39;+props2+D[i]+&#39;</font></center></layer>&#39;);
for (i=0; i < n; i++)
document.write(&#39;<layer name="nsFace&#39;+i+&#39;" top=0 left=0 height=&#39;+a+&#39; width=&#39;+a+&#39;><center>&#39;+props+Face[i]+&#39;</font></center></layer>&#39;);
for (i=0; i < S.length; i++)
document.write(&#39;<layer name=nsSeconds&#39;+i+&#39; top=0 left=0 width=15 height=15><font face=Arial size=3 color=&#39;+sCol+&#39;><center><b>&#39;+S[i]+&#39;</b></center></font></layer>&#39;);
for (i=0; i < M.length; i++)
document.write(&#39;<layer name=nsMinutes&#39;+i+&#39; top=0 left=0 width=15 height=15><font face=Arial size=3 color=&#39;+mCol+&#39;><center><b>&#39;+M[i]+&#39;</b></center></font></layer>&#39;);
for (i=0; i < H.length; i++)
document.write(&#39;<layer name=nsHours&#39;+i+&#39; top=0 left=0 width=15 height=15><font face=Arial size=3 color=&#39;+hCol+&#39;><center><b>&#39;+H[i]+&#39;</b></center></font></layer>&#39;);
}
if (ie){
document.write(&#39;<p id="Od" style="position:absolute;top:0px;left:0px"><p style="position:relative">&#39;);
for (i=0; i < D.length; i++)
document.write(&#39;<p id="ieDate" style="position:absolute;top:0px;left:0;height:&#39;+a+&#39;;width:&#39;+a+&#39;;text-align:center">&#39;+props2+D[i]+&#39;</font></p>&#39;);
document.write(&#39;</p></p>&#39;);
document.write(&#39;<p id="Of" style="position:absolute;top:0px;left:0px"><p style="position:relative">&#39;);
for (i=0; i < n; i++)
document.write(&#39;<p id="ieFace" style="position:absolute;top:0px;left:0;height:&#39;+a+&#39;;width:&#39;+a+&#39;;text-align:center">&#39;+props+Face[i]+&#39;</font></p>&#39;);
document.write(&#39;</p></p>&#39;);
document.write(&#39;<p id="Oh" style="position:absolute;top:0px;left:0px"><p style="position:relative">&#39;);
for (i=0; i < H.length; i++)
document.write(&#39;<p id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:&#39;+hCol+&#39;;text-align:center;font-weight:bold">&#39;+H[i]+&#39;</p>&#39;);
document.write(&#39;</p></p>&#39;);
document.write(&#39;<p id="Om" style="position:absolute;top:0px;left:0px"><p style="position:relative">&#39;);
for (i=0; i < M.length; i++)
document.write(&#39;<p id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:&#39;+mCol+&#39;;text-align:center;font-weight:bold">&#39;+M[i]+&#39;</p>&#39;);
document.write(&#39;</p></p>&#39;)
document.write(&#39;<p id="Os" style="position:absolute;top:0px;left:0px"><p style="position:relative">&#39;);
for (i=0; i < S.length; i++)
document.write(&#39;<p id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:&#39;+sCol+&#39;;text-align:center;font-weight:bold">&#39;+S[i]+&#39;</p>&#39;);
document.write(&#39;</p></p>&#39;)
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
if (ie){
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for (i=0; i < n; i++){
var F=(ns)?document.layers[&#39;nsFace&#39;+i]:ieFace[i].style;
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}
for (i=0; i < H.length; i++){
var HL=(ns)?document.layers[&#39;nsHours&#39;+i]:ieHours[i].style;
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i < M.length; i++){
var ML=(ns)?document.layers[&#39;nsMinutes&#39;+i]:ieMinutes[i].style;
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i < S.length; i++){
var SL=(ns)?document.layers[&#39;nsSeconds&#39;+i]:ieSeconds[i].style;
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i < D.length; i++){
var DL=(ns)?document.layers[&#39;nsDate&#39;+i]:ieDate[i].style;
DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
}
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout(&#39;Delay()&#39;,40);
}
if (ns||ie)window.onload=Delay;
//-->
</SCRIPT>
</body></html>

#9、很有特色的螢光滑鼠

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>很有特色的荧光鼠标</title>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
</head>
<body id="mybody" style="filter:light(enabled=1);" bgcolor="#ffffff" text="#000000">
<p
id="Layer1" style="height: 32; left: 66; position: absolute; top: 41; width: 52">
<dd>
<p align="right">
<img  src="/static/imghwm/default1.png"  data-src="images/light.gif"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="如何實現網頁滑鼠特效（詳細教學）" >　</p>
</dd>
</p>
<p align="center"><b><font size="5">日落大道上的亚洲男孩 </font></b>
</p>
<table border="0" width="100%">
<tr>
<td width="82%"><font face="宋体" color="#FF00FF" style="font-size: 9pt">
</font><span style="font-size: 9pt">
人人爱谈张爱玲，尤其在论及服饰的时候。我不能免俗，也来附庸风雅一番。张爱玲纪念文集提到她逝世时的寓所，地址非常眼熟，后来才知道那公寓就在UC
LA正门附近。我和朋友好奇心起，课后前去朝圣一番，发现果真就是文集照片中的公寓，只不过屋前绿树茁壮更胜以往，和目前公寓的灰暗色调形成讽刺对比。耳闻张爱玲生前喜欢在UCLA附近不时搬迁，居无定所，像一头中枪后逃逸的狐狸，不停回头将沿路滴落的血迹舐去，以免猎人循迹跟上。　<br>
<br>
　　我以刚出道的猎人口吻说∶传言中张的住所很狼狈，她的衣物都随便搁在纸箱或超级市场收集来的塑胶袋里唷。　<br>
<br>
　　比我早来洛杉矶数年的同行朋友却说∶有何奇怪？我的衣物书籍也都塞在纸箱和塑胶袋里。搬家的时候反而方便啊。　<br>
<br>
　　朋友的粗廉生活让我很不以为然；当时我才初抵美国未久。　<br>
<br>
　　试想，任何华丽的衣裳只要一落进超级市场塑胶袋，看起来就像垃圾。把生活尽数装在塑胶袋里，岂不是将自己完全垃圾化？　<br>
<br>
　　但，在开始租屋、收集家具之后，我也开始世故驯化。留学生余钱无多，时常面临搬家压力。因此，我很少购衣；如要花钱，选择并不多。　<br>
<br>
　　从UCLA门口驱车南行，经过张爱玲故居，就来到了”ROSS“成衣批发店。ROSS陈列满坑满谷的名牌服饰，但因都是瑕疵品，比如说胸口的商标掉到肚脐位置的马球衫之类，张冠李戴，品质荒唐，所以售价低廉。许多经济能力较差的黑人和墨西哥人就来这里翻索便宜的CK、耐吉、DKNY；我加入他们肤色鲜艳的行列，结帐时将微疵的战利品装在塑胶袋里－而非百货公司的雅痞纸袋。说不定当年张爱玲也曾经蹋著脸徒步到这里找便宜货，混迹各色人种之间，没有人认出她何许人也。　<br>
<br>
　　虽然每次光顾ROSS都省了钱，而且享受与有色人种站在同一阵线的政治正确虚荣感，但每一次的经验都极其卑微沮丧。好莱坞电影中，彩色画报里，那种昂首阔步走进香蕉共和国的潇洒意象，在现实美国里却好遥远。还是认份光顾量贩店，站在平庸空间里排队，细细咀嚼外国人的贫穷滋味。　<br>
<br>
　　时装海报里，那些空灵的躯干之间，并没有留下什么空位给我者。　<br>
<br>
　　在日落大道两岸，巨幅时装广告海报一张张浮悬空中，像敦煌壁画，海报里俊男美女睥睨众生，佛似的自在庄严，日落大道一如当代加　<br>
<br>
　　州的丝路。AF，Abercrombie　＆　Fitch的白人男孩在阳光下微笑展示金身，好生慈悲。我猜美国当前年轻男性最风靡的服饰品牌之一大概就是AF，青春的傲慢包装成若无其事的天真潇洒。难怪校园里穿AF的大男孩比比皆是（怪的是，任何人穿了AF就会变得性感）；许多男同志也表示，看了AF男孩就会流口水（许多人在徵友广告中表明，想要找AF风格的男孩）。记得春天清晨我行过波士顿哈佛大学，赫然发现哈佛广场前最招摇的海报就来自AF，金发男孩的美丽笑脸占据了整个橱窗，诡异的意象。光是一张笑脸就比一家书店还要庞大。我望之却步了。　<br>
<br>
　　</span></td>
</tr>
</table>
<script language="vbscript">
dim red,gre,blu
dim x,y,z
red=255
gre=255
blu=0
z=100
sub window_onload()
call mybody.filters.light.addPoint(0,0,z,Red,Gre,Blu,100)
mybody.style.cursor="hand"
end sub
sub document_onmousemove()
x=window.event.x
y=window.event.y
call mybody.filters.Light.MoveLight(0, x, y, 100, 1)
end sub
</script>
<script language="javascript">
//这是使图层移动的函数
function move_layer()
{
Layer1.style.left=event.clientX+document.body.scrollLeft-50;
Layer1.style.top=event.clientY+document.body.scrollTop-20;
}
//这里的意思是，如果鼠标移动时就调用"move_layer"函数
document.onmousemove =move_layer;
</script>
</body>
</html>

10、跟著滑鼠的幻影文字

<html>
<head>
<title>中国站长站--跟随鼠标的幻影文字</title>
</head>
<body>
<script LANGUAGE="JavaScript">
<!-- Begin
message = &#39;欢迎访问网页制作大宝库!&#39;;
FonT = &#39;Verdana&#39;;
ColoR = &#39;ff0000&#39;;
SizE = 3; //1 to 7 only!
var amount = 5, ypos =- 50, xpos = 0, Ay = 0, Ax = 0, By = 0, Bx = 0, Cy = 0, Cx = 0, Dy = 0, Dx = 0, Ey = 0, Ex = 0;
if (document.layers) {
for (i = 0; i < amount; i++) {
document.write(&#39;<layer name=nsl&#39;+i+&#39; top=0 left=0><font face=&#39;+FonT+&#39; size=&#39;+SizE+&#39; color=&#39;+ColoR+&#39;>&#39;+message+&#39;</font></layer>&#39;);
}
window.captureEvents(Event.MOUSEMOVE);
function nsmouse(evnt) {
xpos = evnt.pageX + 20;
ypos = evnt.pageY + 20;
}
window.onMouseMove = nsmouse;
}
else if (document.all) {
document.write("<p id=&#39;outer&#39; style=&#39;position:absolute;top:0px;left:0px&#39;>");
document.write("<p style=&#39;position:relative&#39;>");
for (i = 0; i < amount; i++) {
document.write(&#39;<p id="text"&#39;+i+&#39; style="position:absolute;top:0px;left:0px;width:400px;height:20px"><font face=&#39;+FonT+&#39; size=&#39;+SizE+&#39; color=&#39;+ColoR+&#39;>&#39;+message+&#39;</font></p>&#39;)
}
document.write("</p>");
document.write("</p>");
function iemouse() {
ypos = event.y + 20;
xpos = event.x + 20;
}
window.document.onmousemove = iemouse;
}
function makefollow() {
if (document.layers) {
document.layers[&#39;nsl&#39;+0].top = ay;
document.layers[&#39;nsl&#39;+0].left = ax;
document.layers[&#39;nsl&#39;+1].top = by;
document.layers[&#39;nsl&#39;+1].left = bx;
document.layers[&#39;nsl&#39;+2].top = cy;
document.layers[&#39;nsl&#39;+2].left = cx;
document.layers[&#39;nsl&#39;+3].top = Dy;
document.layers[&#39;nsl&#39;+3].left = Dx;
document.layers[&#39;nsl&#39;+4].top = Ey;
document.layers[&#39;nsl&#39;+4].left = Ex;
}
else if (document.all) {
outer.style.pixelTop = document.body.scrollTop;
text[0].style.pixelTop = ay;
text[0].style.pixelLeft = ax;
text[1].style.pixelTop = by;
text[1].style.pixelLeft = bx;
text[2].style.pixelTop = cy;
text[2].style.pixelLeft = cx;
text[3].style.pixelTop = Dy;
text[3].style.pixelLeft = Dx;
text[4].style.pixelTop = Ey;
text[4].style.pixelLeft = Ex;
}
}
function move() {
ey = Ey += (ypos - Ey) * 0.2;
ex = Ex += (xpos - Ex) * 0.2;
dy = Dy += (ey - Dy) * 0.3;
dx = Dx += (ex - Dx) * 0.3;
cy = Cy += (dy - Cy) * 0.4;
cx = Cx += (dx - Cx) * 0.4;
by = By += (cy - By) * 0.5;
bx = Bx += (cx - Bx) * 0.5;
ay = Ay += (by - Ay) * 0.6;
ax = Ax += (bx - Ax) * 0.6;
makefollow();
setTimeout(&#39;move()&#39;, 100);
}
window.onload=move;
// End -->
</script>
</body>
</html>

上面是我整理給大家的，希望今後會對大家有幫助。

使用React中的Native實作圖片檢視元件

#使用vue-cli結合Element-ui在cropper. js基礎上封裝vue來實作圖片裁切元件功能

在vue.js中實作圖片本機預覽裁切壓縮上傳等一系列功能

以上是如何實現網頁滑鼠特效（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

See all articles