Friday, May 14, 2010

鼠标效果(飘浮文字)

Share

之前教过了一个鼠标效果,像星星一般的散落
但毕竟有时候不同的人有不同的爱好=)
在这里,给大家介绍新的一个鼠标效果~
话不多说~请看一下教程=)

首先,Login你的blogger用户
然后随着以下步骤
英文:到Design-->Add A Gadget-->HTML/JavaScript
华语:到设计-->添加小工具-->HTML/JavaScript

将以下的代码放上去就可以了


<script language="javascript">


var text='将你的字打在这';

var delay=40;
var Xoff=0;
var Yoff=-30;
var txtw=14;
var beghtml='<font color="#00436e"><b>';
var endhtml='</b></font>';

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';

for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer name="txt'+i+'" top="-100" left="0" width="'+txtw+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}

function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}

function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}

window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>




By:Kenchy

49 comments:

❤iiiii❤ said... 回复此评论

学到了~好开心~谢谢你^^

﹏魚魚﹏ said... 回复此评论

爲什麽我的字會離得很遠啊?
怎麽把字弄到靠近箭頭?

Kenchy said... 回复此评论

TO:﹏魚魚﹏

能把你的Code让我看一下吗?=)

臻❤快乐 said... 回复此评论

怎样换颜色???

Kenchy said... 回复此评论

回复:臻❤快乐

你找到下面这一段代码
#00436e

然后将他更换成你要的颜色代码
颜色代码可以查询:=)
http://www.computerhope.com/htmcolor.htm

Yan said... 回复此评论

how to change colour?

梦初 said... 回复此评论

为什么没有的...

Kenchy said... 回复此评论

回复Yan:
你看到这一行字
#00436e
将他换成你的颜色代码就可以了=)


回复梦初:
我看到你的部落格有哦@@

梦初 said... 回复此评论

为什么我看不到

Kenchy said... 回复此评论

我看得到哦,你看看下面这个图片是不是你的部落格

按我


你看不到可能是网速的问题,你上你的部落格时会lag吗?@@
你用的浏览器是什么呢?

Yan said... 回复此评论

谢谢=]

Ashley Tyler said... 回复此评论

我的也是看不到哦~

Kenchy said... 回复此评论

回复Ashley Tyler:

你弄不到也许是因为你的部落格负载太重
你加了太多的效果

-XiaO可丽- said... 回复此评论

为什么它的字距离酱远的,
要改写什么吗?
还是我弄错了??

Kenchy said... 回复此评论

我看了你的部落格
和我的一样,没有什么不同
你说的远是指什么?

-XiaO可丽- said... 回复此评论

箭头跟字的距离

Kenchy said... 回复此评论

一样啊@@

shuijing said... 回复此评论

我的也是离MOUSE很远

Kenchy said... 回复此评论

你得真得很远哦= =
我都办不到呢...
能让我看一下你的代码吗?

WEIQIAN said... 回复此评论

呼呼~我偷走了~~
谢谢你 =目

yiinG said... 回复此评论

我偷了一些。希望不介意/**

ʏʋʏιиɢ said... 回复此评论

我弄到了~
谢谢你的=]

美凤 said... 回复此评论

要这么弄?要把代码直接加进去还是要删除了才加代码?我加了代码了储存不到。。

Kenchy said... 回复此评论

这是加进Add Gadget不是Edit HTML哦@@

baby-maggie said... 回复此评论

不能的...我放了 好像多了很多字酱..

Kenchy said... 回复此评论

嗯?怎么说呢?@@

Wilcent said... 回复此评论

我的箭头和字离很远啊。怎样把字和箭头在一起?你去看看wilcento0.blogspot.com

Kenchy said... 回复此评论

@Wilcent
你尝试去除你的泡沫效果看看=)

雨 天 公 主 said... 回复此评论

做么我的不能的><
自从换了desgin 就不能了><

Kenchy said... 回复此评论

@雨 天 公 主
可以,是你使用的背景不接受的关系
会造成字和鼠标的距离很远

雨 天 公 主 said... 回复此评论

那要怎么办???

Kenchy said... 回复此评论

@雨 天 公 主
换背景/换效果/不要用
就这三个给你选= =

Star said... 回复此评论

请问下这么弄?我不能的。。按添加小文具下。。然后?没有HTML什么的哦。。

Joey Yee said... 回复此评论

怎麼樣才能把箭頭和字的距離變近?..

Kenchy said... 回复此评论

@Star
看清楚些哦,应该是第四个

Kenchy said... 回复此评论

@Joey Yee
我之后尝试弄看看

sally said... 回复此评论

为什么弄不到的??

Kenchy said... 回复此评论

@sally
可能是弄到了,但因为距离太远的关系造成看不到
这个我找不到解决的方法...抱歉哦

Star said... 回复此评论

标题要写什么?
代码是写内容那边吗?

Kenchy said... 回复此评论

@Star
标题写什么都可以,如果不要标题显示,那么就写<h2></h2>

Star said... 回复此评论

怎么没有呢?

Kenchy said... 回复此评论

@Star
也许是背景的关系,最近有很多人弄不到了

Star said... 回复此评论

没关系喽

♥ 筱萱 ♥ said... 回复此评论

好厲害~

shino said... 回复此评论

谢!带走。。。。

✖"甄"实の我✖ said... 回复此评论

怎么我不能看到字呐

Kenchy said... 回复此评论

@✖"甄"实の我✖
有些人的模版会如此,没有解决的办法

Jennifer Liew said... 回复此评论

怎办?不知不会出现,博客还会变得怪怪的,往下滚动滚不完。。。

Kenchy said... 回复此评论

@Jennifer Liew

对于您的疑问,可以参考以下两个教程:


教程1

教程2

如有任何疑问,可以通过email来询问,
我将尽快的回答您。

Kenchy710@gmail.com

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment