急求鼠標后跟隨文字的幾個網頁特效代碼
你隨便弄個網頁
以下代碼插入<head>標簽之內,保存預覽,就可以看到很漂亮的文字環繞鼠標:
<SCRIPT
LANGUAGE="JavaScript">
if
(document.all)
{
yourLogo
=
"我想有個家一個溫暖的家";
//自己根據要求設置//
logoFont
=
"宋體";
logoColor
=
"#00ccff";
yourLogo
=
yourLogo.split('');
L
=
yourLogo.length;
TrigSplit
=
360
/
L;
Sz
=
new
Array()
logoWidth
=
100;
logoHeight
=
-30;
ypos
=
0;
xpos
=
0;
step
=
0.03;
currStep
=
0;
document.write('<div
id="outer"
style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for
(i
=
0;
i
<
L;
i++)
{
document.write('<div
id="ie"
style="position:absolute;top:0px;left:0px;'
+'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'
+'color:'+logoColor+';text-align:left">'+yourLogo[i]+'</div>');
}
document.write('</div></div>');
function
Mou()
{
ypos
=
event.y;
xpos
=
event.x
-
5;
}
document.onmoumove=Mou;
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;
tTimeout('animateLogo()',
20);
}
window.onload
=
animateLogo;
}
</script>
鼠標懸停特效代碼怎么寫,鼠標放在小圖片上旁邊顯示一張大圖片?
代碼有bug,修改后如下:
需要注意,拷貝下面這段代碼,保存為 html后綴名的文件;需要自己在相同的目錄下,放置兩張圖片,小圖片.jpg 大圖片.jpg
效果如下圖:當鼠標懸停在小圖片上面的時候,會顯示大圖片;鼠標移出,隱藏大圖片。
問題:定位需要讀者自己去實現一下吧,偷懶了。感謝樓上分享!
<!doctypehtml>
<html>
<head>
<metachart=utf-8>
</head>
<body>
你要顯示特效的html
<imgsrc="小圖片.jpg"width="200px"height="200px"id="littleimg"onmouout="hoverHiddendiv()"onmouenter="hoverShowDiv()"/>
<divstyle="width:200px;height:80px;border:1pxsolide#aaccff;display:none;"id="divHover">
大圖片顯示如下
<imgsrc="大圖片.jpg"width="500px"height="300px"id="bigimg"/>
</div>
<scripttype="text/javascript">
letdivHover=document.getElementById("divHover");
functionhoverShowDiv(){
console.log("顯示大圖片");
divHover.style.display="block";
divHover.style.top=document.getElementById("littleimg").style.top+10;
divHover.style.left=document.getElementById("littleimg").style.left+10;
}
functionhoverHiddendiv(){
console.log("顯示小圖片");
divHover.style.display="none";
}
</script>
</body>
</html>
鼠標特效代碼要怎么使用
通過鼠標的事件來激發!隨便找了些鼠標特效的網站: http://www.wangqi.com/c262.aspxjs鼠標事件大全 資料來源: http://hsyd.javaeye.com/blog/382930onClick IE3|N2|O3 鼠標點擊事件,多用在某個對象控制的范圍內的鼠標點擊
onDblClick IE4|N4|O 鼠標雙擊事件
onMouDown IE4|N4|O 鼠標上的按鈕被按下了
onMouUp IE4|N4|O 鼠標按下后,松開時激發的事件
onMouOver IE3|N2|O3 當鼠標移動到某對象范圍的上方時觸發的事件
onMouMove IE4|N4|O 鼠標移動時觸發的事件
onMouOut IE4|N3|O3 當鼠標離開某對象范圍時觸發的事件
onKeyPress IE4|N4|O 當鍵盤上的某個鍵被按下并且釋放時觸發的事件.[注意:頁面內必須有被聚焦的對象]
onKeyDown IE4|N4|O 當鍵盤上某個按鍵被按下時觸發的事件[注意:頁面內必須有被聚焦的對象]
onKeyUp IE4|N4|O 當鍵盤上某個按鍵被按放開時觸發的事件[注意:頁面內必須有被聚焦的對象]
頁面相關事件 事件 瀏覽器支持 描述
onAbort IE4|N3|O 圖片在下載時被用戶中斷
onBeforeUnload IE4|N|O 當前頁面的內容將要被改變時觸發的事件
onError IE4|N3|O 捕抓當前頁面因為某種原因而出現的錯誤,如腳本錯誤與外部數據引用的錯誤
onLoad IE3|N2|O3 頁面內空完成傳送到瀏覽器時觸發的事件,包括外部文件引入完成
onMove IE|N4|O 瀏覽器的窗口被移動時觸發的事件
onResize IE4|N4|O 當瀏覽器的窗口大小被改變時觸發的事件
onScroll IE4|N|O 瀏覽器的滾動條位置發生變化時觸發的事件
onStop IE5|N|O 瀏覽器的停止按鈕被按下時觸發的事件或者正在下載的文件被中斷
onUnload IE3|N2|O3 當前頁面將被改變時觸發的事件
表單相關事件 事件 瀏覽器支持 描述
onBlur IE3|N2|O3 當前元素失去焦點時觸發的事件 [鼠標與鍵盤的觸發均可]
onChange IE3|N2|O3 當前元素失去焦點并且元素的內容發生改變而觸發的事件 [鼠標與鍵盤的觸發均可]
onFocus IE3|N2|O3 當某個元素獲得焦點時觸發的事件
onRet IE4|N3|O3 當表單中RESET的屬性被激發時觸發的事件
onSubmit IE3|N2|O3 一個表單被遞交時觸發的事件
滾動字幕事件 事件 瀏覽器支持 描述
onBounce IE4|N|O 在Marquee內的內容移動至Marquee顯示范圍之外時觸發的事件
onFinish IE4|N|O 當Marquee元素完成需要顯示的內容后觸發的事件
onStart IE4|N|O 當Marquee元素開始顯示內容時觸發的事件
編輯事件 事件 瀏覽器支持 描述
onBeforeCopy IE5|N|O 當頁面當前的被選擇內容將要復制到瀏覽者系統的剪貼板前觸發的事件
onBeforeCut IE5|N|O 當頁面中的一部分或者全部的內容將被移離當前頁面[剪貼]并移動到瀏覽者的系統剪貼板時觸發的事件
onBeforeEditFocus IE5|N|O 當前元素將要進入編輯狀態
onBeforePaste IE5|N|O 內容將要從瀏覽者的系統剪貼板傳送[粘貼]到頁面中時觸發的事件
onBeforeUpdate IE5|N|O 當瀏覽者粘貼系統剪貼板中的內容時通知目標對象
onContextMenu IE5|N|O 當瀏覽者按下鼠標右鍵出現菜單時或者通過鍵盤的按鍵觸發頁面菜單時觸發的事件 [試試在頁面中的<body>中加入onContentMenu="return fal"就可禁止使用鼠標右鍵了]
onCopy IE5|N|O 當頁面當前的被選擇內容被復制后觸發的事件
onCut IE5|N|O 當頁面當前的被選擇內容被剪切時觸發的事件
onDrag IE5|N|O 當某個對象被拖動時觸發的事件 [活動事件]
onDragDrop IE|N4|O 一個外部對象被鼠標拖進當前窗口或者幀
onDragEnd IE5|N|O 當鼠標拖動結束時觸發的事件,即鼠標的按鈕被釋放了
onDragEnter IE5|N|O 當對象被鼠標拖動的對象進入其容器范圍內時觸發的事件
onDragLeave IE5|N|O 當對象被鼠標拖動的對象離開其容器范圍內時觸發的事件
onDragOver IE5|N|O 當某被拖動的對象在另一對象容器范圍內拖動時觸發的事件
onDragStart IE4|N|O 當某對象將被拖動時觸發的事件
onDrop IE5|N|O 在一個拖動過程中,釋放鼠標鍵時觸發的事件
onLoCapture IE5|N|O 當元素失去鼠標移動所形成的選擇焦點時觸發的事件
onPaste IE5|N|O 當內容被粘貼時觸發的事件
onSelect IE4|N|O 當文本內容被選擇時的事件
onSelectStart IE4|N|O 當文本內容選擇將開始發生時觸發的事件
數據綁定 事件 瀏覽器支持 描述
onAfterUpdate IE4|N|O 當數據完成由數據源到對象的傳送時觸發的事件
onCellChange IE5|N|O 當數據來源發生變化時
onDataAvailable IE4|N|O 當數據接收完成時觸發事件
onDatatChanged IE4|N|O 數據在數據源發生變化時觸發的事件
onDatatComplete IE4|N|O 當來子數據源的全部有效數據讀取完畢時觸發的事件
onErrorUpdate IE4|N|O 當使用onBeforeUpdate事件觸發取消了數據傳送時,代替onAfterUpdate事件
onRowEnter IE5|N|O 當前數據源的數據發生變化并且有新的有效數據時觸發的事件
onRowExit IE5|N|O 當前數據源的數據將要發生變化時觸發的事件
onRowsDelete IE5|N|O 當前數據記錄將被刪除時觸發的事件
onRowsInrted IE5|N|O 當前數據源將要插入新數據記錄時觸發的事件
數據綁定 事件 瀏覽器支持 描述
onAfterPrint IE5|N|O 當文檔被打印后觸發的事件
onBeforePrint IE5|N|O 當文檔即將打印時觸發的事件
onFilterChange IE4|N|O 當某個對象的濾鏡效果發生變化時觸發的事件
onHelp IE4|N|O 當瀏覽者按下F1或者瀏覽器的幫助選擇時觸發的事件
onPropertyChange IE5|N|O 當對象的屬性之一發生變化時觸發的事件
onReadyStateChange IE4|N|O 當對象的初始化屬性值發生變化時觸發的事件 僅供參考!
鼠標特效代碼
006-05-03 15:12:34 評論 ┆ 舉報
最佳答案此答案由提問者自己選擇,并不代表百度知道知識人的觀點
回答:慕容星沉
學弟
5月3日 17:34 第一種方式比較簡單.如我用的這個(效果見http://sina.kosoo.cn),鼠標是一個旋轉的藍寶石,當指向連接時則顯示的是我名字
代碼<STYLE type=text/css>
a:hover {cursor:url('http://www1.pzmwl.com/upload/MuRongXingChen.cur')}
BODY {cursor:url('http://image2.sina.com.cn/dongman/pictcol/2005-11-04/U1111P55T4D74746F422DT20051104171606.ani')</STYLE>
你更換鼠標地址為你喜歡的樣式即可
如果每次刷新主頁,都會出現不同風格的鼠標指針,那種變幻莫測的感覺一定很不錯吧!感興趣的話就 Follow me!
(1)在既有面板中加入下面的代碼(作用是隨機調用CSS文件);
(2)用記事本創建數個CSS文件(依實際要求而定),分別命名為style1.css、tyle2.css……
(3)將創建的CSS全部上傳,務使其都在同一目錄下。
javascript 代碼:
<link id="stt" type="text/css" rel="stylesheet" href="b_sty.css">
<script Language="javascript">
<!-- Begin
var Folder = "CSS文件所在目錄";
var how_many_ads = 鼠標指針套數;
var now = new Date();
var c = now.getSeconds();
var ad = c % how_many_ads;
var css = "";
ad +=1;
if (ad == 1) {css = "style1.css";}
if (ad == 2) {css = "style2.css";}
……
lf.stt.href = Folder + css
//-->
</script>
★ “CSS文件所在目錄”是CSS文件除去文件名的網址,比如你的CSS文件所在網址為http://www1.freehostingguru.com/bimzcy/style1.css
那么你CSS文件所在的目錄就是http://www1.freehostingguru.com/bimzcy/
★ 鼠標指針套數是指刷新主頁后鼠標指針不同的次數,一套鼠標指針圖片包括一張或兩張鼠標指針圖片。如果鼠標指針套數是2套,那么該處值為2。
★ 省略號(……)處是和你鼠標指針的圖片套數是相關的,如果你的鼠標指針的圖片套數是2套,那么寫到if (ad == 2) {css = "style2.css";}就可以了,如果是3套,就繼續寫if (ad== 3) {css = "style3.css";},依次類推。
★ 提供.css文件上傳的網頁空間地址:http://www1.freehostingguru.com/logincn.php4
★ 鼠標指針大全網站(就是大家熟悉的山水呵):http://myok.blogchina.com/2081936.html
★ 包含322個鼠標指針圖片的下載包:http://www.windown.net/soft/235.htm
★ 提供鼠標指針圖片文件(.cur、.ani)上傳的網頁空間地址:
飄之夢網絡文件上傳:http://www1.pzmwl.com/
華爾茲上傳空間:http://bzwaltz.w1.net.cn/upload/upload.asp
揪錯 ┆ 評論1 ┆ 舉報
關于qq空間鼠標跟隨特效代碼
注意:將鼠標移動到黑色區域即可查看效果
(友情提示:其中有一些以前發過,但是地址基本上全部失效,以下是最新整理,地址永久有效)
如何放到空間:
點自定義---模塊--添加模塊---flash動畫模塊--設置透明,循環,自動播放,邊框無,確定即可!!
Qzone最熱門的幾款鼠標效果FLASH:
第一款:鼠標滑過出現心效果
第一款地址:/UploadFile/201009/25/EC163338107.swf?url=xin1
第二款:鼠標滑過星星下落效果
第二款地址:/UploadFile/201009/25/EC163338107.swf?url=xin2
第三款:鼠標滑過畫出一個心(白色版)
第三款地址:/UploadFile/201009/25/EC163338107.swf?url=xin3
鼠標滑過畫出一個心(綠色版)
/UploadFile/201009/25/EC163338107.swf?url=xin4
鼠標滑過畫出一個心(紅色版)
/UploadFile/201009/25/EC163338107.swf?url=xin5
鼠標滑過畫出一個心(**版)
/UploadFile/201009/25/EC163338107.swf?url=xin6
第四款:鼠標滑過出現漂亮的心
第四款地址:/UploadFile/201009/25/EC163338107.swf?url=xin8
第五款:鼠標滑過出現藍色幻彩光點
第五款地址:/UploadFile/201009/25/EC163338107.swf?url=lan
第六款:鼠標滑過出現白色幻彩光點
第六款地址:/UploadFile/201009/25/EC163338107.swf?url=bai
第七款:鼠標滑過出現紅色幻彩光點
第七款地址:/UploadFile/201009/25/EC163338107.swf?url=hong
第八款:鼠標滑過出現綠色幻彩光點
第八款地址:/UploadFile/201009/25/EC163338107.swf?url=lv
第九款:旋轉白點散開、分散特效
第九款地址:/UploadFile/201009/25/64163339600.swf?id=mou/1&.swf
鼠標劃過藍色光點:
/UploadFile/201009/25/EC163338107.swf?url=1
跟隨鼠標旋轉的特效:
/UploadFile/201009/25/EC163338107.swf?url=2
鼠標滑過旋轉散花效果:
/UploadFile/201009/25/EC163338107.swf?url=3
鼠標滑過變幻光點:
/UploadFile/201009/25/EC163338107.swf?url=4
鼠標跟隨藍色星星:
/UploadFile/201009/25/EC163338107.swf?url=5
鼠標跟隨藍幻光斑:
/UploadFile/201009/25/EC163338107.swf?url=6
在Dreamweaver中的鼠標跟蹤特效的代碼應該怎么寫?
要用到 JavaScript 特效
把如下代碼加入<head>區域中
圖片跟蹤鼠標代碼:
QQ.jpg 是圖片
<SCRIPT language="JavaScript">
<!--
B=document.all;
C=document.layers;
T1=new Array("qq.jpg",38,35,"qq.jpg",30,31,"qq.jpg",28,26,"qq.jpg",22,21,"qq.jpg",16,16)
nos=parInt(T1.length/3)
rate=50
ie5fix1=0;
ie5fix2=0;
for (i=0;i<nos;i++){
createContainer("CUR"+i,i*10,i*10,i*3+1,i*3+2,"","<img src='"+T1[i*3]+"' width="+T1[(i*3+1)]+" height="+T1[(i*3+2)]+" border=0>")}
function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){
with (document){
write((!B) ? "<layer id='"+N+"' left="+Xp+" top="+Yp+" width="+W+" height="+H : "<div id='"+N+"'"+" style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+"; ");
if(St){
if (C)
write(" style='");
write(St+";' ")
}
el write((B)?"'":"");
write((At)? At+">" : ">");
write((HT) ? HT : "");
if (!Op)
cloContainer(N)
}
}
function cloContainer(){
document.write((B)?"</div>":"</layer>")
}
function getXpos(N){
return (B) ? parInt(B[N].style.left) : C[N].left
}
function getYpos(N){
return (B) ? parInt(B[N].style.top) : C[N].top
}
function moveContainer(N,DX,DY){
c=(B) ? B[N].style :C[N];c.left=DX;c.top=DY
}
function cycle(){
//if (IE5)
if (document.all&&window.print){
ie5fix1=document.body.scrollLeft;
ie5fix2=document.body.scrollTop;
}
for (i=0;i<(nos-1);i++){
moveContainer("CUR"+i,getXpos("CUR"+(i+1)),getYpos("CUR"+(i+1)))
}
}
function newPos(e){
moveContainer("CUR"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2
)
}
if(document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmoumove=newPos
tInterval("cycle()",rate)
//-->
</SCRIPT>
文字特效:
word[1]="L";word[2]="A";word[3]="O";word[4]="H";word[5]="E";
LAOHE 是你設置的字體
<SCRIPT language=javascript>
<!--//This is a JS program for Sword Jin's JoyFM homepage.All rights rerved.
var cx=0;
var cy=0;
var val=0;
function locate()
{ cx=window.event.x;
cy=window.event.y;
}
document.onmoumove=locate;
function follow(i)
{ var x;
if(i<4)x=cx-50+i*10;
el x=cx-25+i*10;
var y=cy-20+Math.floor(Math.random()*40);
w=eval("word"+i);
with(w.style)
{
left=x.toString()+"px";
top=y.toString()+"px";
}
}
function show(i)
{
var w=eval("word"+i);
with(w.style)
{
visibility="visible";
s=parInt(fontSize);
if(s>=200)s-=100;
el if(s>90&&s<=100)
{
s-=85;
clearInterval(val);
if(i<5)val=tInterval("show("+(i+1)+")",20);
}
fontSize=s;
}
}
function start()
{ for(i=1;i<=5;i++)
{
val=tInterval("show(1)",20);
tInterval("follow("+i+")",100);
}
}
//-->
</SCRIPT>
<SCRIPT language=javascript>
var word=new Array(5);
word[1]="L";word[2]="A";word[3]="O";word[4]="H";word[5]="E";
for(i=1;i<=5;i++)
document.write("<div id='word"+i+"' style='width:20px;height:20px;position:absolute;font-size:1000;visibility:hidden'><font face='Forte' color='red'>"+word+"</font></div>");start();
</SCRIPT>