工具 | 鼠标冒出泡泡

Is TUTORIAL' s time

  *鼠标会出这样的泡泡...会变大的哦~


终于发教程啦。大家都要这个教程 >。<
热门到~

1. 去设计》页面元素》添加小工具》HTML/Java Script

2. 把这些代码paste进去:
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/bubblecursor.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#B1E1F8", "#B1E1F8", "#B1E1F8", "#B1E1F8", "#B1E1F8"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // 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>

蓝色字的是颜色代码,可以任意更改哦~


颜色代码可以来这里看  点我

66 条评论:

  1. 苹果 , 问你噢 .
    你的 back to top 是怎样弄的 ? 可以放教程吗 ? ;)
    还有 , 你之前的那个教程 ( 字体放影子 ) 是什么的噢 ? 是弄标题的吗 ? 字体放影子的话 , 彩虹效果还有在吗 ?
    不要意思噢 . 麻烦你 :)

    回复删除
  2. 好长 omo

    我想问你,你会像伟业blog的那种,把每个人的留言隔开的那种吗?

    回复删除
  3. 就是说咯~><
    早上是多么好睡得时间丫TT

    回复删除
  4. Thx you very very very much la^^

    回复删除
  5. EeAI Kueh
    back to top的可以啊。
    字体放影子的是哪个啊?

    回复删除
  6. 请问你的标题是怎样放中间的?
    还有怎样放分线图?

    回复删除
  7. 標題的我遲點放教程吧~
    什麽是分線圖?

    回复删除
  8. 請問你有chat box的代理號碼嗎?

    回复删除
  9. 想要将旁边的分割线删掉 = = 但是不会 /.\

    回复删除
  10. 苹果啊!麻烦你一下。。。。我的博是就模版的。。。可是它的宽度很小。。怎样弄旧模版的宽度吖? =)谢谢你的教程&期待下一次的教程哦。。。




    你的粉丝:

    回复删除
  11. 哈哈~~
    我没睡到酱迟咯><
    都是我妈咪拉我起床的~
    真是毁了我的美梦XDD

    回复删除
  12. 好新鲜~^ ^
    那走了哦~

    回复删除
  13. 请问一下你的鼠标在哪里找的?可以放程式吗?
    (不是泡泡的!!)

    回复删除
  14. apple > 就这篇的 .
    >> http://yes-apple.blogspot.com/2011/04/blog-post_24.html

    是什么的 ? 是弄标题有影子 , 还是怎样的 ?
    还有啊 , 为什么我们指你的标题的时候 , 有分线图 ? 怎样弄的 ? 可以放教程吗 ?

    回复删除

  15. 什么是代理号码?

    烂慧慧
    蛤?哪里旁边?


    谢谢你啊 :D
    你要弄宽可以去/* Outer wrapper那边的width改。

    小lie
    好的 :D

    Bii
    你去google找可以找到很多哦 :D

    回复删除
  16. EeAi Kueh
    那篇我是教在帖子里放影子的啦~
    不过要放在标题也可以啊~哈哈
    我的blog是指着链接是有------在链接下面,不是分线图来的 :)

    回复删除
  17. 就你的标题下面还有一条线的图··

    回复删除
  18. hohoho 你的部落格很漂亮啊啊啊 :D
    感觉很舒服~
    教程很不错啊 :D

    回复删除
  19. Apple >> 我要那个链接有 ( ----- ) 的教程 .
    还有 , 那个字体放影子的 . ( 标题的 )
    还有 还有 XD 你的 back to top 的教程 .

    有问题你问你下 . 如果标题放影子的话 , 彩虹效果还有在吗 ?

    谢谢你噢 :D 感激不尽 :)

    回复删除
  20. EeAi Kueh
    好的,我会放教程~
    那个我就不懂哦,没试过 :P
    等我放了教程你再试看咯,哈哈

    回复删除
  21. 没有了··谢谢~我做到了··=)

    回复删除
  22. 苹果...
    为什么我的鼠标不会出现泡泡??T.T

    回复删除
  23. 请问一下你的鼠标在哪里找的可以告诉我吗?

    回复删除
  24. 为什么我放了那个冒出泡泡的代码
    还是没有东西的???

    回复删除
  25. 为什么我的那么少的?又不明显的?

    回复删除
  26. 妹妹
    哈哈~欢迎抱走 :D

    junjun
    我去google找的 :D

    尛呗♥
    我给的代码每个人的都一样多的啊,
    只是有时看起来很少 <3

    寂寞天使
    你的blog很忙,放到太多东西了
    很能影响到吧~

    回复删除
  27. 去 Google 要打什么才能找到这种鼠标噢 ?

    回复删除
  28. 这里有
    http://www.totallyfreecursors.com/

    回复删除
  29. 請問你的鼠标在哪可找到???

    回复删除
  30. 我想问如何让泡泡变大?

    回复删除
  31. 不好意思~~我想请问下~~为什么我的鼠标没有冒泡泡?
    我的部落格>>>>http://limapple123.blogspot.com
    O(∩_∩)O谢谢~~

    回复删除
  32. 我想问哦··
    全部都copy paste 下去呀?>.<

    回复删除
  33. 我也不懂。你的部落格很lag
    建议你不要放到那么多东西~

    回复删除
  34. Woah X)
    谢谢你的教程 , 真的真的棒了我们很多 X)
    为了报答你 , 我以后再也不会吃苹果了 :P <3

    回复删除
  35. 哈哈哈,你说的哦,不要偷吃呐 :P
    在此我代表全天下的苹果向你致谢~

    回复删除
  36. 请问一下。。。。。要放音乐怎样放??

    回复删除
  37. sammy
    看这里
    http://yes-apple.blogspot.com/2011/09/youtube-player.html

    回复删除
  38. 你不会哪里呢?
    这教程很容易罢了哦~

    回复删除
  39. 鼠标除了会冒出泡泡,还有其它的吗?

    回复删除
  40. 还有会冒出love的~不过我还没分享 :P

    回复删除
  41. 可以分享吗?
    如果要找,有什么网站吗?

    回复删除
  42. 我也不知道什么地方找@@
    因为我以前看到了就会把代码save起来先的 :)

    回复删除
  43. 哦~
    那麻烦你了~
    谢谢 =)

    回复删除
  44. apple
    我想问一下
    如果我要让泡泡一出来就比较大一点的能吗??

    回复删除
  45. 为什么还是没有的?全部的东西我都试了很多了,还是没有~!><

    回复删除
  46. 会不会是你搞错哪里呢?
    因为大家都弄到哦><

    回复删除
  47. 想请问下哦为什么我弄了不是泡泡他出现的是(3px )的?

    回复删除

你的留言将在审核后发布。谢谢 ♥