❶ 此網站的滑鼠經過圖片後的特效是怎樣做的
html特效按鈕，當滑鼠點擊更換按鈕背景，多個按鈕共享一張經過PS後的圖片實例代碼：
.banner ul{
list-style:none;
float: left;
margin-top:
115px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 10px;
width: 600px;
line-height: 21px;
height: 21px;
}
.banner li{ text-align:center;
display:inline;
float:left;
margin-right: 15px;
}
.banner a { display:block;
float:left;
width:68px;
height:21px;
}
.banner li a:link,.banner li a:visited{
text-decoration:none; color: #000;
}
.banner li a:hover,.banner li a:active{
text-decoration:none;
background:url(http://boaer.com/images/index_bg.png) no-repeat;
height:21px;
color:#FFFFFF;
}
❷ CSS3上能夠支持製作的的滑鼠移動到圖片上時候的圖片特效有哪些啊教我一兩個
/***給你個最簡單的:<imgsrc="img/card2.png"id="image"/>**/
#image{
transition:.4sallease;
-webkit-transition:.4sallease;
-moz-transition:.4sallease;
}
#image:hover{
transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
}
❸ html 請教 我想做一個圖片特效。 滑鼠移到圖片上，圖片切換另一張圖。
先插入一個表格，將滑鼠定位在表格內，從上面的菜單欄中選擇圖像→_→滑鼠經過點，然後就會出現一個對話框就能選擇原圖像及滑鼠經過點圖像，這樣就好了，記得給分哦
❹ web前端滑鼠經過圖片凸起底下有影印怎樣做
用css就可以製作出來這種效果。
當滑鼠移入的時候用:hover ,給圖片一個相對定位，例如偏移top:2px ;left:2px;，然後給右邊和下面加陰影，這樣就做出了圖片凸起的效果了
❺ 這種「滑鼠特效」怎麼做像鏡頭光暈一樣的效果。●●●
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>網頁特效|Linkweb.cn/Js|---很有特色的熒光滑鼠</title>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
</head>
<body id="mybody" style="filter:light(enabled=1);" bgcolor="#ffffff" text="#000000">
<div
id="Layer1" style="height: 32; left: 66; position: absolute; top: 41; width: 52">
<dd>
<div align="right">
<img src="images/light.gif" width="29" height="30"> </div>
</dd>
</div>
<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>
❻ 網站中的滑鼠特效 在Dreamweaver中改成自己想要的圖片或動畫
首先，文中提到的在CSS中加入如下代碼：
body{cursor:url('滑鼠指針圖片網址');}
A{cursor:url('滑鼠指針圖片網址');}
語法上倒是沒有什麼問題，但是經過多次測試後，發現在不少情況下（尤其是添加了
一些別的特效後）可能會出現IE瀏覽器崩潰的情況，具體表現就是瀏覽器的地址欄上下有一片范圍會變成黑色，網頁背景也可能出現黑色的線條。
仔細分析發現這個A在CSS里總攬太多，其中CSS的三個偽類a:link、a:visited、a:hover都屬於A，結果就發生了滑鼠指針載入的沖突，從而造成瀏覽器的崩潰。
經過修改，我認為在CSS中比較正確的統一更改網頁滑鼠指針的方法是：
body{cursor:url('滑鼠指針一的圖片網址');}
a:hover{cursor:url('滑鼠指針二的圖片網址');}
當然，如果你的鏈接比較多的話，a:hover的滑鼠指針圖片載入起來可能會比較慢。
你也許追求更靈活的滑鼠指針更改方式，那麼我們還是用body{cursor:url('滑鼠指針的<br/><br/>圖片網址');}來載入默認情況下的滑鼠指針圖片，而當滑鼠指針指向某一范圍（某一模塊內）時則變成另外一個滑鼠指針（圖片）。換句話說，滑鼠移動到不同范圍內可以變成不同的滑鼠指針樣式。具體的做法就是我們在各個模塊CSS里對應的標識符內加入{cursor:url('滑鼠指針的圖片網址');}，比如div#header是頭部這個模塊的標識符，我們就可以加入：
div#header{cursor:url('滑鼠指針的圖片網址');}
其它的模塊也是類似的加法。
另外我們也可以通過在HTML狀態下通過發表文章（代碼）來實現更靈活的滑鼠指針改變，比如：
<STYLE type=text/css>
BODY{cursor:url('滑鼠指針圖片一網址');}
a {cursor:url('滑鼠指針圖片二網址');}�
</STYLE>
❼ 如何用網頁特效使滑鼠變成其他圖案
你可以使用
style
屬性或是
CSS。
方法1：使用
style
屬性
如果想讓全文都是某個滑鼠指針，則使用：
<body
style="cursor:指針類型;">
<!--
這里是網頁內容
-->
</body>
如果是某個段落，則使用：
<P
style="cursor:指針類型;">
這里是段落內容
</P>
如果是連接，則使用：
<A
href="連接目標"
style="cursor:指針類型;">
這里是連接內容
</A>
以此類推。
方法2：使用
CSS
在<HEAD></HEAD>之間插入：
<style>
<!--
/*
以下部分供選用，不一定全要
*/
body
/*
應用於全文
*/
{
cursor:指針類型;
}
a
/*
應用於標記
<A>
*/
{
cursor:指針類型;
}
p
/*
應用於標記
<P>
*/
{
cursor:指針類型;
}
.Txt
/*
應用於
class
屬性為
Txt
的所有標記
*/
{
cursor:指針類型;
}
-->
</style>
其中，指針類型可以是下面的內容（不包括冒號後面的）：
auto：自動
col-resize：左右調整大小（列之間）
crosshair：十字線
default：指針
hand：手形
help：上下文幫助
move：移動
wait：忙
text：水平文本
*-resize：大小調整，其中「*」可以用
N,NE,NW,S,SE,SW,E,W
中的任意一個代替
以下用於
IE6
及以後版本：
all-scroll：上下、左右滾動（相當於按下滑鼠中鍵）
no-drop：不能拖放
not-allowed：不允許
pointer：手形
progress：後台運行（指針和一個沙漏）
row-resize：上下調整大小（行之間）
url('指針路徑')：自定義指針文件（*.cur）
例如
url('C:\Hand.cur')
或
url('http:\\www.worldwideweb.org/.../ptr.cur')
或
url('cur/a1.cur')
vertical-text：豎行文本
注意：如果需要在雙引號中插入引號（如
url），則可以使用單引號，反過來也可以。
例如：
<body
style='cursor:url("E:\My
Files\Cur\aero_busy.ani");'>
或
<body
style="cursor:url('E:\My
Files\Cur\aero_busy.ani');">
都可以，但後者常見些。
示例（將以下文本替換
Frontpage
中網頁源代碼部分的
<BODY></BODY>
部分，然後預覽，並把滑鼠移到每一個段落上）：
<body
style='cursor:default;'>
<p
style='cursor:Move;'>Move
it.</p>
<p
style='cursor:wait;'>Busy.</p>
<p
style='cursor:help;'>Help!</p>
<p
style='cursor:not-allowed;'>Not
Allowed(IE6)</p>
</body>
❽ 網頁製作滑鼠特效拜託各位大神
星星跟隨，你哪個要求太高！ <html> <head> <title>網頁特效|Linkweb.cn/Js|---圍繞滑鼠的七彩流星</title> </head> <body bgcolor="#000000" text="#000000"> <LAYER NAME="a0" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ffffff" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a1" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#fff000" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a2" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ffa000" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a3" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ff00ff" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a4" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#00ff00" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a5" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#FF00FF" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a6" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#FF0000" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a7" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ffffff" CLIP="0,0,2,2"> </LAYER> <LAYER NAME="a8" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#fff000" CLIP="0,0,2,2"> </LAYER> <LAYER NAME="a9" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ffa000" CLIP="0,0,2,2"> </LAYER> <LAYER NAME="a10" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ff00ff" CLIP="0,0,2,2"> </LAYER> <LAYER NAME="a11" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#00ff00" CLIP="0,0,2,2"> </LAYER> <LAYER NAME="a12" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#0000ff" CLIP="0,0,2,2"> </LAYER> <LAYER NAME="a13" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#FF0000" CLIP="0,0,3,3"> </LAYER> <div id="starsDiv" style="position:absolute;top:0px;left:0px"><div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px;visibility:visible"></div><div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px;visibility:visible"></div><div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px;visibility:visible"></div><div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px;visibility:visible"></div><div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px;visibility:visible"></div><div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px;visibility:visible"></div><div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px;visibility:visible"></div><div style="position:relative;width:2px;height:2px;background:#fff000;font-size:2px;visibility:visible"></div><div style="position:relative;width:2px;height:2px;background:#ffa000;font-size:2px;visibility:visible"></div><div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px;visibility:visible"></div><div style="position:relative;width:2px;height:2px;background:#00ff00;font-size:2px;visibility:visible"></div><div style="position:relative;width:2px;height:2px;background:#0000ff;font-size:2px;visibility:visible"></div><div style="position:relative;width:3px;height:3px;background:#FF0000;font-size:3px;visibility:visible"></div></div><script LANGUAGE="JavaScript"> var Clrs = new Array(6); Clrs[0] = 'ff0000'; Clrs[1] = '00ff00'; Clrs[2] = '000aff'; Clrs[3] = 'ff00ff'; Clrs[4] = 'fff000'; Clrs[5] = 'fffff0'; var yBase = 200; var xBase = 200; var step; var currStep = 0; var Xpos = 1; var Ypos = 1; var Xs = 200; var Ys = 400; if (document.layers) { window.captureEvents(Event.MOUSEMOVE); } if (document.all) { function MoveHandler() { Xpos = document.body.scrollLeft+event.x; Ypos = document.body.scrollTop+event.y; } document.onmousemove = MoveHandler; } else if (document.layers) { function xMoveHandler(evnt) { Xpos = evnt.pageX; Ypos = evnt.pageY; } window.onMouseMove = xMoveHandler; } function Comet() { if (document.all) { yBase = window.document.body.offsetHeight / 4; xBase = window.document.body.offsetWidth / 4; } else if (document.layers) { yBase = window.innerHeight / 4; xBase = window.innerWidth / 4; } if (document.all) { for ( i = 0 ; i < starsDiv.all.length ; i++ ) { step = 3; starsDiv.all[i].style.top = Ypos + yBase*Math.cos((currStep + i*4)/12)*Math.cos(0.7+currStep/200); starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(8.2+currStep/400); for (ai = 0; ai < Clrs.length; ai++) { var c=Math.round(Math.random()*[ai]); } starsDiv.all[i].style.background = Clrs[c]; } } else if (document.layers) { for ( j = 0 ; j < 14 ; j++ ) { //number of NS layers! step = 6; var templayer = "a"+j; document.layers[templayer].top = Ypos + yBase*Math.cos((currStep + j*4)/12)*Math.cos(0.7+currStep/200); document.layers[templayer].left = Xpos + xBase*Math.sin((currStep + j*3)/10)*Math.sin(8.2+currStep/400); for (aj=0; aj < Clrs.length; aj++) { var c=Math.round(Math.random()*[aj]); } document.layers[templayer].bgColor = Clrs[c]; } } currStep += step; setTimeout("Comet()", 5); } Comet(); // End --> </script> </body> </html> 星星
記得採納啊
❾ 網頁特效 滑鼠移到字上會出現圖片，有高手會么
可以做的呀，用層來做
<style>
.munetitle { text-decoration: none; font-size: 10pt; background-color: #F5F5F5; width: 70; height: 16; color: #000000 }
.munebar { position: absolute;z-index: 1;}
.mune { background-color: #F5F5F5; display: none; position: absolute; z-index: 1;left: 0; top: 18; width: 1 }
</style>
<script>
<!--
function w(word)
{
document.write(word);
}
//顯示或隱藏菜單
function showmune(object,status)
{
object.style.display=status;
}
//首頁的選項
var mune = "index"
var munetitle = "LuckyBar"
var titlepath = ""
var indextitle = new Array();
var indexpath = new Array();
//indextitle[0]="申請做版主";indexpath[0]="apply.htm";
indextitle[0]="加入收藏夾";indexpath[0]="javascript:window.external.addFavorite(top.window.location.href,top.document.title) target=_self";
indextitle[1]="關於本站";indexpath[1]="luckybar/about.htm";
w('<div class=munebar onmouseover=showmune(' + mune + ',"block") onmouseout=showmune(' + mune + ',"none")>');
w('<table border=1 height=18 bordercolordark=#FFFFFF bordercolorlight=#000000 cellspacing=0 cellpadding=0>');
w('<tr><td align=center class=munetitle><a href="' + titlepath + '" class=munetitle>' + munetitle + '</a></td></tr></table>');
w('<div id=' + mune + ' class=mune>');
w('<table border=1 bordercolordark=#FFFFFF bordercolorlight=#000000 width=100 cellspacing=0 cellpadding=0>');
for(i=0;i<indextitle.length;i++)
{
w('<tr><td><a href=' + indexpath[i] + '>' + indextitle[i] + '</a></td></tr>');
}
w('</table></div></div>');
delete indextitle;
delete indexpath;
//-->
</script>
❿ 急求各種網頁滑鼠特效代碼（只要代碼，不要網址）
很酷的跟隨滑鼠的三色綵帶
html>
<head>
<title>網頁特效|Linkweb.cn/Js|---很酷的跟隨滑鼠的三色綵帶</title>
</head><body bgColor=#000000>
<!--將以下代碼加入HTML的<Body></Body>之間-->
<script language="JavaScript">
<!--
var a_Colour='fff000';
var b_Colour='00ff00';
var c_Colour='ff00ff';
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('swirl()',10);
}
var amount=10;
if (document.layers){
for (i = 0; i < amount; i++)
{
document.write('<layer name=nsa'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+a_Colour+'></layer>');
document.write('<layer name=nsb'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+b_Colour+'></layer>');
document.write('<layer name=nsc'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+c_Colour+'></layer>');
}
}
else if (document.all){
document.write('<div id="ODiv" style="position:absolute;top:0px;left:0px">'
+'<div id="IDiv" style="position:relative">');
for (i = 0; i < amount; i++)
{
document.write('<div id=x style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+a_Colour+';font-size:'+i/2+'"></div>');
document.write('<div id=y style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+b_Colour+';font-size:'+i/2+'"></div>');
document.write('<div id=z style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+c_Colour+';font-size:'+i/2+'"></div>');
}
document.write('</div></div>');
}
function prepos(){
var ntscp=document.layers;
var msie=document.all;
if (document.layers){
for (i = 0; i < amount; i++)
{
if (i < amount-1)
{
ntscp['nsa'+i].top=ntscp['nsa'+(i+1)].top;ntscp['nsa'+i].left=ntscp['nsa'+(i+1)].left;
ntscp['nsb'+i].top=ntscp['nsb'+(i+1)].top;ntscp['nsb'+i].left=ntscp['nsb'+(i+1)].left;
ntscp['nsc'+i].top=ntscp['nsc'+(i+1)].top;ntscp['nsc'+i].left=ntscp['nsc'+(i+1)].left;
}
else
{
ntscp['nsa'+i].top=YDummy[0];ntscp['nsa'+i].left=XDummy[0];
ntscp['nsb'+i].top=YDummy[1];ntscp['nsb'+i].left=XDummy[1];
ntscp['nsc'+i].top=YDummy[2];ntscp['nsc'+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>
跟隨滑鼠很逼真的彈性小球
<html>
<head>
<title>網頁特效|Linkweb.cn/Js|---跟隨滑鼠很逼真的彈性小球</title>
</head><body>
<!--將以下代碼加入HTML的<Body></Body>之間-->
<DIV id=dot0
style="HEIGHT: 16; POSITION: absolute; VISIBILITY: hidden; WIDTH: 11; left:10; top:15"><IMG
height=11 src="images/bullet.gif" width=11> </DIV>
<DIV id=dot1 style="HEIGHT: 11px; POSITION: absolute; WIDTH: 11px"><IMG
height=11 src="images/bullet.gif" width=11> </DIV>
<DIV id=dot2 style="HEIGHT: 11px; POSITION: absolute; WIDTH: 11px"><IMG
height=11 src="images/bullet.gif" width=11> </DIV>
<DIV id=dot3 style="HEIGHT: 11px; POSITION: absolute; WIDTH: 11px"><IMG
height=11 src="images/bullet.gif" width=11> </DIV>
<DIV id=dot4 style="HEIGHT: 11px; POSITION: absolute; WIDTH: 11px"><IMG
height=11 src="images/bullet.gif" width=11> </DIV>
<DIV id=dot5 style="HEIGHT: 11px; POSITION: absolute; WIDTH: 11px"><IMG
height=11 src="images/bullet.gif" width=11> </DIV>
<DIV id=dot6 style="HEIGHT: 16; POSITION: absolute; WIDTH: 11; left:10; top:15"><IMG
height=11 src="images/bullet.gif" width=11> </DIV>
<SCRIPT language=JavaScript>
var nDots = 7;
var Xpos = 0;
var Ypos = 0;
var DELTAT = .01;
var SEGLEN = 10;
var SPRINGK = 10;
var MASS = 1;
var XGRAVITY = 0;
var YGRAVITY = 50;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
var BOUNCE = 0.75;
var isNetscape = navigator.appName=="Netscape";
var followmouse = true;
var dots = new Array();
init();
function init()
{
var i = 0;
for (i = 0; i < nDots; i++) {
dots[i] = new dot(i);
}
if (!isNetscape) {
}
for (i = 0; i < nDots; i++) {
dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots[i].Y;
}
if (isNetscape) {
startanimate();
} else {
setTimeout("startanimate()", 1000);
}
}
function dot(i)
{
this.X = Xpos;
this.Y = Ypos;
this.dx = 0;
this.dy = 0;
if (isNetscape) {
this.obj = eval("document.dot" + i);
} else {
this.obj = eval("dot" + i + ".style");
}
}
function startanimate() {
setInterval("animate()", 20);
}
function setInitPositions(dots)
{
var startloc = document.all.tags("LI");
var i = 0;
for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
dots[i+1].X = startloc[i].offsetLeft
startloc[i].offsetParent.offsetLeft - DOTSIZE;
dots[i+1].Y = startloc[i].offsetTop +
startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
}
dots[0].X = dots[1].X;
dots[0].Y = dots[1].Y - SEGLEN;
}
function MoveHandler(e)
{
Xpos = e.pageX;
Ypos = e.pageY;
return true;
}
function MoveHandlerIE() {
Xpos = window.event.x + document.body.scrollLeft;
Ypos = window.event.y + document.body.scrollTop;
}
if (isNetscape) {
document.captureEvents(Event.MOUSEMOVE);
document.onMouseMove = MoveHandler;
} else {
document.onmousemove = MoveHandlerIE;
}
function vec(X, Y)
{
this.X = X;
this.Y = Y;
}
function springForce(i, j, spring)
{
var dx = (dots[i].X - dots[j].X);
var dy = (dots[i].Y - dots[j].Y);
var len = Math.sqrt(dx*dx + dy*dy);
if (len > SEGLEN) {
var springF = SPRINGK * (len - SEGLEN);
spring.X += (dx / len) * springF;
spring.Y += (dy / len) * springF;
}
}
function animate() {
var start = 0;
if (followmouse) {
dots[0].X = Xpos;
dots[0].Y = Ypos;
start = 1;
}
for (i = start ; i < nDots; i++ ) {
var spring = new vec(0, 0);
if (i > 0) {
springForce(i-1, i, spring);
}
if (i < (nDots - 1)) {
springForce(i+1, i, spring);
}
var resist = new vec(-dots[i].dx * RESISTANCE,
-dots[i].dy * RESISTANCE);
var accel = new vec((spring.X + resist.X)/MASS + XGRAVITY,
(spring.Y + resist.Y)/ MASS + YGRAVITY);
dots[i].dx += (DELTAT * accel.X);
dots[i].dy += (DELTAT * accel.Y);
if (Math.abs(dots[i].dx) < STOPVEL &&
Math.abs(dots[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC) {
dots[i].dx = 0;
dots[i].dy = 0;
}
dots[i].X += dots[i].dx;
dots[i].Y += dots[i].dy;
var height, width;
if (isNetscape) {
height = window.innerHeight + window.pageYOffset;
width = window.innerWidth + window.pageXOffset;
} else {
height = document.body.clientHeight + document.body.scrollTop;
width = document.body.clientWidth + document.body.scrollLeft;
}
if (dots[i].Y >= height - DOTSIZE - 1) {
if (dots[i].dy > 0) {
dots[i].dy = BOUNCE * -dots[i].dy;
}
dots[i].Y = height - DOTSIZE - 1;
}
if (dots[i].X >= width - DOTSIZE) {
if (dots[i].dx > 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = width - DOTSIZE - 1;
}
if (dots[i].X < 0) {
if (dots[i].dx < 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = 0;
}
dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots[i].Y;
}
}
</SCRIPT>
</body></html>
這里太小了 放不了那麼多
http://www.jscode.cn/jave_mouse/29051032.htm
裡面有很多的 不想鏈接的話 就看那兩個吧