之前教过了一个鼠标效果,像星星一般的散落
但毕竟有时候不同的人有不同的爱好=)
在这里,给大家介绍新的一个鼠标效果~
话不多说~请看一下教程=)
首先,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>
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:
学到了~好开心~谢谢你^^
爲什麽我的字會離得很遠啊?
怎麽把字弄到靠近箭頭?
能把你的Code让我看一下吗?=)
怎样换颜色???
你找到下面这一段代码
#00436e
然后将他更换成你要的颜色代码
颜色代码可以查询:=)
http://www.computerhope.com/htmcolor.htm
how to change colour?
为什么没有的...
回复Yan:
你看到这一行字
#00436e
将他换成你的颜色代码就可以了=)
回复梦初:
我看到你的部落格有哦@@
为什么我看不到
按我
你看不到可能是网速的问题,你上你的部落格时会lag吗?@@
你用的浏览器是什么呢?
谢谢=]
我的也是看不到哦~
你弄不到也许是因为你的部落格负载太重
你加了太多的效果
为什么它的字距离酱远的,
要改写什么吗?
还是我弄错了??
和我的一样,没有什么不同
你说的远是指什么?
箭头跟字的距离
我的也是离MOUSE很远
我都办不到呢...
能让我看一下你的代码吗?
呼呼~我偷走了~~
谢谢你 =目
我偷了一些。希望不介意/**
我弄到了~
谢谢你的=]
要这么弄?要把代码直接加进去还是要删除了才加代码?我加了代码了储存不到。。
不能的...我放了 好像多了很多字酱..
我的箭头和字离很远啊。怎样把字和箭头在一起?你去看看wilcento0.blogspot.com
你尝试去除你的泡沫效果看看=)
做么我的不能的><
自从换了desgin 就不能了><
可以,是你使用的背景不接受的关系
会造成字和鼠标的距离很远
那要怎么办???
换背景/换效果/不要用
就这三个给你选= =
请问下这么弄?我不能的。。按添加小文具下。。然后?没有HTML什么的哦。。
怎麼樣才能把箭頭和字的距離變近?..
看清楚些哦,应该是第四个
我之后尝试弄看看
为什么弄不到的??
可能是弄到了,但因为距离太远的关系造成看不到
这个我找不到解决的方法...抱歉哦
标题要写什么?
代码是写内容那边吗?
标题写什么都可以,如果不要标题显示,那么就写<h2></h2>
怎么没有呢?
也许是背景的关系,最近有很多人弄不到了
没关系喽
好厲害~
谢!带走。。。。
怎么我不能看到字呐
有些人的模版会如此,没有解决的办法
怎办?不知不会出现,博客还会变得怪怪的,往下滚动滚不完。。。
对于您的疑问,可以参考以下两个教程:
教程1
教程2
如有任何疑问,可以通过email来询问,
我将尽快的回答您。
Kenchy710@gmail.com
Post a Comment