home about me stuff links follow dashboard

Tuesday, July 12, 2011

教学/Tutorial || 泡泡鼠标/Bubble Cursor







给fanshu的
For Fanshu

嗯...
由于您没有留下部落格网址
所以没能通知你
=)
点它/Click it: 


这个非常地简单
It's a very easier tutorial

跟着步骤做就没错了
follow the step below

中文/Chiness:


① 信息中心 --> 设计 --> 页面元素 --> 添加小工具 --> HTML JavaScript

② 将以下代码粘帖去 HTML JavaScript

<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">// <![CDATA[var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubblesvar bubbles=200; // maximum number of bubbles on screen

/***************************** JavaScript Bubble Cursor ** (c) 2010 mf2fm web-design ** http://www.mf2fm.com/rv ** DON'T EDIT BELOW THIS BOX *****************************/var x=ox=400;var y=oy=300;var swide=800;var shigh=600;var sleft=sdown=0;var bubb=new Array();var bubbx=new Array();var bubby=new Array();var bubbs=new Array();

window.onload=function() { if (document.getElementById) {var rats, div;for (var i=0; i<bubbles; i++) {rats=createDiv("3px", "3px");rats.style.visibility="hidden";

div=createDiv("auto", "auto");rats.appendChild(div);div=div.style;div.top="1px";div.left="0px";div.bottom="1px";div.right="0px";div.borderLeft="1px solid "+colours[3];div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");rats.appendChild(div);div=div.style;div.top="0px";div.left="1px";div.right="1px";div.bottom="0px"div.borderTop="1px solid "+colours[0];div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");rats.appendChild(div);div=div.style;div.left="1px";div.right="1px";div.bottom="1px";div.top="1px";div.backgroundColor=colours[4];div.opacity=0.5;if (document.all) div.filter="alpha(opacity=50)";

document.body.appendChild(rats);bubb[i]=rats.style;}set_scroll();set_width();bubble();}}

function bubble() {var c;if (x!=ox || y!=oy) {ox=x;oy=y;for (c=0; c<bubbles; c++) if (!bubby[c]) {bubb[c].left=(bubbx[c]=x)+"px";bubb[c].top=(bubby[c]=y)+"px";bubb[c].width="3px";bubb[c].height="3px"bubb[c].visibility="visible";bubbs[c]=3;break;}}for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);setTimeout("bubble()", 40);}

function update_bubb(i) {if (bubby[i]) {bubby[i]-=bubbs[i]/2+i%2;bubbx[i]+=(i%5-2)/5;if (bubby[i]>sdown && bubbx[i]>0) {if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {bubb[i].width=bubbs[i]+"px";bubb[i].height=bubbs[i]+"px";}bubb[i].top=bubby[i]+"px";bubb[i].left=bubbx[i]+"px";}else {bubb[i].visibility="hidden";bubby[i]=0;return;}}}

document.onmousemove=mouse;function mouse(e) {set_scroll();y=(e)?e.pageY:event.y+sleft;x=(e)?e.pageX:event.x+sdown; }

window.onresize=set_width;function set_width() {if (document.documentElement && document.documentElement.clientWidth) {swide=document.documentElement.clientWidth;shigh=document.documentElement.clientHeight;}else if (typeof(self.innerHeight)=="number") {swide=self.innerWidth;shigh=self.innerHeight;}else if (document.body.clientWidth) {swide=document.body.clientWidth;shigh=document.body.clientHeight;}else {swide=800;shigh=600;}}

window.onscroll=set_scroll;function set_scroll() {if (typeof(self.pageYOffset)=="number") {sdown=self.pageYOffset;sleft=self.pageXOffset;}else if (document.body.scrollTop || document.body.scrollLeft) {sdown=document.body.scrollTop;sleft=document.body.scrollLeft;}else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {sleft=document.documentElement.scrollLeft;sdown=document.documentElement.scrollTop;}else {sdown=0;sleft=0;}}

function createDiv(height, width) {var div=document.createElement("div");div.style.position="absolute";div.style.height=height;div.style.width=width;div.style.overflow="hidden";return (div);}// ]]></script>


③ 红色代码是颜色代码,可以自行更换颜色
     
     颜色代码 >> 在此

④ 橙色代码是泡泡数量

⑤ 储存

完成!!!
祝您成功!!!



英文/English:


① Dashboard --> Design --> Page Elements -->Add a Gadget --> HTML JavaScript

② Copy the code below and paste it to HTML JavaScript


<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">// <![CDATA[var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubblesvar bubbles=200; // maximum number of bubbles on screen

/***************************** JavaScript Bubble Cursor ** (c) 2010 mf2fm web-design ** http://www.mf2fm.com/rv ** DON'T EDIT BELOW THIS BOX *****************************/var x=ox=400;var y=oy=300;var swide=800;var shigh=600;var sleft=sdown=0;var bubb=new Array();var bubbx=new Array();var bubby=new Array();var bubbs=new Array();

window.onload=function() { if (document.getElementById) {var rats, div;for (var i=0; i<bubbles; i++) {rats=createDiv("3px", "3px");rats.style.visibility="hidden";

div=createDiv("auto", "auto");rats.appendChild(div);div=div.style;div.top="1px";div.left="0px";div.bottom="1px";div.right="0px";div.borderLeft="1px solid "+colours[3];div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");rats.appendChild(div);div=div.style;div.top="0px";div.left="1px";div.right="1px";div.bottom="0px"div.borderTop="1px solid "+colours[0];div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");rats.appendChild(div);div=div.style;div.left="1px";div.right="1px";div.bottom="1px";div.top="1px";div.backgroundColor=colours[4];div.opacity=0.5;if (document.all) div.filter="alpha(opacity=50)";

document.body.appendChild(rats);bubb[i]=rats.style;}set_scroll();set_width();bubble();}}

function bubble() {var c;if (x!=ox || y!=oy) {ox=x;oy=y;for (c=0; c<bubbles; c++) if (!bubby[c]) {bubb[c].left=(bubbx[c]=x)+"px";bubb[c].top=(bubby[c]=y)+"px";bubb[c].width="3px";bubb[c].height="3px"bubb[c].visibility="visible";bubbs[c]=3;break;}}for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);setTimeout("bubble()", 40);}

function update_bubb(i) {if (bubby[i]) {bubby[i]-=bubbs[i]/2+i%2;bubbx[i]+=(i%5-2)/5;if (bubby[i]>sdown && bubbx[i]>0) {if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {bubb[i].width=bubbs[i]+"px";bubb[i].height=bubbs[i]+"px";}bubb[i].top=bubby[i]+"px";bubb[i].left=bubbx[i]+"px";}else {bubb[i].visibility="hidden";bubby[i]=0;return;}}}

document.onmousemove=mouse;function mouse(e) {set_scroll();y=(e)?e.pageY:event.y+sleft;x=(e)?e.pageX:event.x+sdown; }

window.onresize=set_width;function set_width() {if (document.documentElement && document.documentElement.clientWidth) {swide=document.documentElement.clientWidth;shigh=document.documentElement.clientHeight;}else if (typeof(self.innerHeight)=="number") {swide=self.innerWidth;shigh=self.innerHeight;}else if (document.body.clientWidth) {swide=document.body.clientWidth;shigh=document.body.clientHeight;}else {swide=800;shigh=600;}}

window.onscroll=set_scroll;function set_scroll() {if (typeof(self.pageYOffset)=="number") {sdown=self.pageYOffset;sleft=self.pageXOffset;}else if (document.body.scrollTop || document.body.scrollLeft) {sdown=document.body.scrollTop;sleft=document.body.scrollLeft;}else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {sleft=document.documentElement.scrollLeft;sdown=document.documentElement.scrollTop;}else {sdown=0;sleft=0;}}

function createDiv(height, width) {var div=document.createElement("div");div.style.position="absolute";div.style.height=height;div.style.width=width;div.style.overflow="hidden";return (div);}// ]]></script>


③ Red Code is colour code,you can customize the colour that you want

     Colour Code >> Here

④ Orange Code is the bubble's quantity

⑤ SAVE

Done!!!
Wish you good luck!!




链接我/Link Me




sticker



6 Oreo ♥:

Ƴιиʏιи βɛℓѲʌɛ∂ said... Reply

i take lo..:)

比比 said... Reply
This comment has been removed by the author.
比比 said... Reply

很可爱哦~有爱的shape ma ^^?

OREO Queen ♥ said... Reply

@比比这个看你喜不喜欢?? 教程-->http://view-babeystory.blogspot.com/2011/08/blog-post_19.html

比比 said... Reply

都可以^^ 谢谢你吖

OREO Queen ♥ said... Reply

@比比不客气哦=)要常来逛逛^.^

Post a Comment