Browsing all articles in JavaScript
七
4
1

我们来做一个会呼吸的菜单吧!!

Author Jessica     Category CSS, JavaScript     Tags , ,

我看到了网上有一些例子..我就来凑个热闹..说下我自己的做法..

大家先可以看一下最终的效果 http://resume.skiyo.cn/

我的做法相对比较简单..大部分工作都是css来做的..

首先我们需要看上去差不多是下面的一张菜单图片..你可以点击之后看大图..

然后我们就来写HTML了..注意.重点就在这里..我让a在li的上面..遮盖住li..

View Code
1
2
3
4
5
6
7
8
9

<div id="menu">
  <ul>
    <li id="nv_about"><a href="#about_anchor"> </a></li>
    <li id="nv_skill"><a href="#skill_anchor"> </a></li>
    <li id="nv_works"><a href="#works_anchor"> </a></li>
    <li id="nv_introduce"><a href="#introduce_anchor"> </a></li>
    <li id="nv_contact"><a href="#contact_anchor"> </a></li>
  </ul>
</div>

CSS为:

read more

五
10
8

jQuery中getJSON跨域原理详解

Author Jessica     Category JavaScript, 本站原创     Tags , ,

前几天我再开发一个叫 河蟹工具条 的时候，其中有个功能就是获取本页面的短网址。

这个想法是好的，可是在我付诸于行动的时候，发现这个需要跨域。

起初我的想法就是，跨域的最简单的方法就是增加一个script标签，因为script标签是允许跨域的。

但是问题又来了，对方的API返回的是个json对象，用script标签只能执行，却不能获取到里面的东西，也就是说返回的东西是不可控的。

随后我就想到了jQuery中的getJSON的方法，学习了一下，没想到里面的文章这么大。

jQuery非常聪明，他也意识到只靠script请求是无法接受到返回的东西的，所以他就设计了一个全局的callback函数，发送请求的时候把这个callback函数也传进去。

服务器判断是否有这个callback函数，如果没有就返回一个对象，如果有就返回一个函数名（对象）。

我们可以通过下面这个地址来看一下

read more

四
30
48

Web辅助工具条(原名:河蟹工具条CrabBar)0.1发布

Author Jessica     Category JavaScript, 本站原创     Tags ,

什么是Web辅助工具条

Web辅助工具条(原名:河蟹工具条CrabBar)可以使你在任何一个网页上面输入的文字变成其他的代码，比如菊花文、短网址等。

Web辅助工具条可以工作在IE系列或者FireFox浏览器中，作者已经在IE6(有BUG待修复)、IE7、IE8和FireFox3.5中进行测试。

经过测试.Web辅助工具条可以工作在utf-8 gbk gb2312等编码的网站中.

如何使用Web辅助工具条

使用Web辅助工具条非常简单方便！比如你正在浏览我的博客 http://www.skiyo.cn/ 中的某篇文章，并且你想对其进行评论，这时候请在地址栏中输入以下代码：

View Code
1

javascript:void((function(){var e=document.createElement('script');e.setAttribute('src','http://crabbar.googlecode.com/svn/trunk/crabbar.js');document.body.appendChild(e);})())

稍等3秒左右，等待工具条加载完毕后，会在你浏览器中正中央出现Web辅助工具条。这时候你就可以在我的博客中的评论框中进行评论，然后选中你想要改变的文字，并且点击工具条上的“菊花文”，这些文字就变成菊花文了。

短网址服务是将你当前所看网页的URL转换为短网址.

下面是试用: read more

三
11
6

JavaScript Packer & UnPacker

Author Jessica     Category JavaScript, 收集整理     Tags , ,

以前总是用到的时候网上搜 后来索性用开源的做了一个..

自己方便大家也方便..

这个不用说什么了 大家可以去测试下:)

地址:http://www.skiyo.cn/jspack/

三
2
0

SkiyoSpinner for jQuery

Author Jessica     Category JavaScript     Tags ,

没什么要说的 工作需要 就做了一个简单的:)

下载和Demo地址:http://demo.skiyo.cn/skiyospinner/

一
18
2

SkiyoTabs更新:加入了自动切换的功能

Author Jessica     Category JavaScript, 本站原创     Tags

其实这个功能早就有了 一直很忙没发出来 囧..

不多说了 大家直接去demo页看吧 提供了下载

http://demo.skiyo.cn/skiyotabs/

十一
20
0

实现Form Serialize

Author Jessica     Category JavaScript     Tags ,

在做Punny的form GET hook的时候遇到的这个问题..不想用框架.

找了一下 网上没有现成的代码..

然后分析了下jQuery.form插件的formSerialize..

然后自己总结了下 我测试已经完美 包括IE下的select控件

read more

十
20
2

应网友要求 把SkiyoTabs更新了一下.

Author Jessica     Category JavaScript     Tags

当使用AJAX时第二次激活tab不再AJAX读取.节省资源.加入了默认tab选项等多个参数，可在源码中查看。

不多说了 大家直接看源码吧.

演示和下载:

http://demo.skiyo.cn/skiyotabs/

九
10
2

document.ready

Author Jessica     Category JavaScript, 收集整理     Tags ,

实现jQuery的document.ready功能

    

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 

  3. <head> 
    4. 

  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5. 

  5. <title>document.ready</title> 
    6. 

  6. <script type="text/javascript"> 
    7. 

  7. (function () {  
    8. 

  8.     var ie  = !!(window.attachEvent && !window.opera);  
    9. 

  9.     var wk  = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);  
    10. 

  10.     var fn  = [];  
    11. 

  11.     var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); };  
    12. 

  12.     var d   = document;  
    13. 

  13.     d.ready = function (f) {  
    14. 

  14.         if (!ie && !wk && d.addEventListener)  
    15. 

  15.             return d.addEventListener('DOMContentLoaded', f, false);  
    16. 

  16.         if (fn.push(f) > 1) return;  
    17. 

  17.         if (ie)  
    18. 

  18.             (function () {  
    19. 

  19.                 try { d.documentElement.doScroll('left'); run(); }  
    20. 

  20.                 catch (err) { setTimeout(arguments.callee, 0); }  
    21. 

  21.             })();  
    22. 

  22.         else if (wk)  
    23. 

  23.             var t = setInterval(function () {  
    24. 

  24.                 if (/^(loaded|complete)$/.test(d.readyState))  
    25. 

  25.                     clearInterval(t), run();  
    26. 

  26.             }, 0);  
    27. 

  27.     };  
    28. 

  28. })();  
    29. 

  29. document.ready(function(){  
    30. 

  30.     document.getElementById('test').innerHTML = 'document.ready test!';  //找到  
    31. 

  31. });  
    32. 

  32. alert(document.getElementById('test')); //null 没找到  
    33. 

  33. </script> 
    34. 

  34. </head> 
    35. 

  35.  
    36. 

  36. <body> 
    37. 

  37. <div id="test"></div> 
    38. 

  38. </body> 
    39. 

  39. </html> 
    40.

演示地址(右键源码):http://www.skiyo.cn/demo/js/document.ready.html

五
19
4

仿开心QQ邮箱的INPUT组件..

Author Jessica     Category JavaScript     Tags

觉得很有意思..自己就模仿了一个..没有看他们的源码..只是按照自己的想法做的..

还不是十分完善..但是大体的样子出来了..:)

等以后慢慢完善吧..

演示地址:http://www.skiyo.cn/demo/input/

下载就没有了..右键看源码就可以了..:)

Older

分类目录

最近文章

最近评论

文章索引模板

标签

.net AJAX button Comet CSS Discuz! DIV+CSS Flash Form Google HTML编辑器 IE8 Java JavaScript jQuery JSP md5 MySQLReback Oracle PHP php-fpm PNG Punny SkiyoTabs tab TagCloud Vista Web2.0 Windows7 上传 加密 变量 图标 本站原创 模板 模板引擎 源码 登录 短网址 石家庄 算法 类 编译 面向对象 魔术方法

链接表