等待-放飞梦想 http://leotheme.cn 勤现在-乐将来 Sat, 14 Aug 2010 10:46:44 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 firefox与ie 的javascript区别 http://leotheme.cn/javascript/firefox-and-ie-javascript.html http://leotheme.cn/javascript/firefox-and-ie-javascript.html#comments Tue, 10 Aug 2010 14:09:02 +0000 Await http://leotheme.cn/?p=792 浏览器的兼容问题目前还是一个头痛的问题。除了CSS的兼容性，Javascript的兼容有时候更容易让人头痛。下面收集的一些关于Firefox和IE的区别作个记号，需要的时候看看

1. Document.form.item 问题
现有问题：
现有代码中存在许多 document.formName.item(“itemName”) 这样的语句，不能在 firefox下运行

解决方法：
改用 document.formName.elements["elementName"]

2. 集合类对象问题
现有问题：
现有代码中许多集合类对象取用时使用 ()，IE 能接受，firefox 不能。
解决方法：
改用 [] 作为下标运算。如：document.forms(“formName”) 改为 document.forms["formName"]。
又如：document.getElementsByName(“inputName”)(1) 改为 document.getElementsByName(“inputName”)[1]

3. window.event
现http://leotheme.cn/wp-admin/edit.php有问题：
使用 window.ehttp://leotheme.cn/wp-admin/edit.phpvent 无法在 firefox上运行
解决方法：
MF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：
原代码(可在IE中运行)：

<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>
            ...
            <script language="javascript">
                function gotoSubmit() {
                    ...
                    alert(window.event);    // use window.event
                    ...
                }
            </script>

新代码(可在IE和MF中运行)：

<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>
            ...
            <script language="javascript">
                function gotoSubmit(evt) {
                    evt = evt ? evt : (window.event ? window.event : null);
                    ...
                    alert(evt);             // use evt
                    ...
                }
            </script>

此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。

4. HTML 对象的 id 作为对象名的问题
现有问题
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 firefox 中不能。
解决方法
用 getElementById(“idName”) 代替 idName 作为对象变量使用。

5. 用idName字符串取得对象的问题
现有问题
在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。
解决方法
用 getElementById(idName) 代替 eval(idName)。

6. 变量名与某 HTML 对象 id 相同的问题
现有问题
在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
解决方法
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。

7. event.x 与 event.y 问题
现有问题
在IE 中，event 对象有 x, y 属性，MF中没有。
解决方法
在MF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。
故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。

如果要完全一样，可以稍麻烦些：
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x
其它
event.layerX 在 IE 与 MF 中都有，具体意义有无差别尚未试验。

8. 关于frame
现有问题
在 IE中 可以用window.testFrame取得该frame，mf中不行
解决方法
在frame的使用方面mf和ie的最主要的区别是：
如果在frame标签中书写了以下属性：

<frame src="xx.htm" id="frameId" name="frameName" />

那么ie可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
ie： window.top.frameId或者window.top.frameName来访问这个window对象
mf： 只能这样window.top.frameName来访问这个window对象

另外，在mf和ie中都可以使用window.top.document.getElementById(“frameId”)来访问frame标签
并且可以通过window.top.document.getElementById(“testFrame”).src = ‘xx.htm’来切换frame的内容
也都可以通过window.top.frameName.location = ‘xx.htm’来切换frame的内容
关于frame和window的描述可以参见bbs的‘window与frame’文章
以及/test/js/test_frame/目录下面的测试

9. 在mf中，自己定义的属性必须getAttribute()取得
10.在mf中没有 parentElement parement.children 而用 parentNode parentNode.childNodes
childNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。一般可以通过node.getElementsByTagName()来回避这个问题。 当html中节点缺失时，IE和MF对parentNode的解释不同，例如

  1. <form>
  2.    <table>
  3.         <input/>
  4.    </table>
  5.    </form>

MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点

MF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)

11.const 问题
现有问题:
在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
解决方法:
不使用 const ，以 var 代替。

12. body 对象
MF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在

13. url encoding
在js中如果书写url就直接写&不要写&例如var url = ‘xx.jsp?objectName=xx&objectEvent=xxx’;
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&
一般MF无法识别js中的&

14. nodeName 和 tagName 问题
现有问题：
在MF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象
有问题（具体情况没有测试，但我的IE已经死了好几次）。
解决方法：
使用 tagName，但应检测其是否为空。

15. 元素属性
IE下 input.type属性为只读，但是MF下可以修改

16. document.getElementsByName() 和 document.all[name] 的问题
现有问题：
在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。

17. 对象问题
1.1 Form对象
现有问题：
现有代码这获得form对象通过document.forms(“formName”)，这样使用在IE 能接受，MF 不能。
解决方法：
改用 作为下标运算。改为document.forms["formName"]
备注
上述的改用 作为下标运算中的formName是id而name

1.2 HTML对象
现有问题：
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
document.all(“itemName”)或者document.all(“itemId”)
解决方法：
使用对象ID作为对象变量名
document.getElementById("itemId")
备注
document.all是IE自定义的方法，所以请大家尽量不使用。
还有一种方式，在IE和MF都可以使用
var f = document.forms["formName "];
var o = f. itemId;

1.3 DIV对象
现有问题：
在 IE 中，DIV对象可以使用ID作为对象变量名直接使用。在 MF 中不能。
DivId.style.display = “none”
解决方法：
document.getElementById(“DivId”).style.display = “none”
备注
获得对象的方法不管是不是DIV对象，都使用getElementById方法。参见1.2

1.4 关于frame
现有问题
在 IE中 可以用window.testFrame取得该frame，mf中不行
解决方法
在frame的使用方面MF和IE的最主要的区别是：
如果在frame标签中书写了以下属性：

那么IE可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
IE： window.top.frameId或者window.top.frameName来访问这个window对象
MF：只能这样window.top.frameName来访问这个window对象
另外，在mf和ie中都可以使用window.top.document.getElementById(“frameId”)来访问frame标签
并且可以通过window.top.document.getElementById(“testFrame”).src = ‘xx.htm’来切换frame的内容
也都可以通过window.top.frameName.location = ‘xx.htm’来切换frame的内容

1.5 窗口
现有问题
IE中可以通过showModalDialog和showModelessDialog打开模态和非模态窗口，但是MF不支持。
解决办法
直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要传递参数，可以使用frame或者iframe。

2. 总结
2.1 在JS中定义各种对象变量名时，尽量使用id，避免使用name。
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能，所以在平常使用时请尽量使用id，避免只使用name，而不使用id。

2.2 变量名与某 HTML 对象 id 相同的问题
现有问题
在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
解决方法
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。

1. document.all
Firefox可以兼容document.all， 但会生成一条警告。可以用getElementById(“*”) 或者 getElementByTagName(“*)来代替
不过对于document.all.length等属性，则完全不兼容。
2. parentElement
这个也不兼容。比方说， obj.parentElement.name 则应改成 obj.parentNode.attributes.getNamedItem(“name”).nodeValue （不知道如何写得更简洁些）
3. event
W3C不支持windows.event
比方说:
在IE里面

<div class="menu" id="menu" onclick="onMenuClick(); ">.....</div>
      function onMenuClick()
      {
        collapseMenu(event.srcElement);
      }

工作正常。不过在Firefox中，则改成：

<div class="menu" id="menu" onclick="onMenuClick(event); ">
        function onMenuClick(evt)
      {
        if(evt == null)
              evt = window.event; // For IE
          var srcElement = evt.srcElement? evt.srcElement : evt.target; // IE使用srcElement, 而Firefox使用target
        collapseMenu(srcElement);
}

1：innerText
IE支持，FIREFOX不支持
解决办法：用innerHTML,2种浏览器都识别innerHTML

2：document.createElement
document.appendChild
在往表里插入行时
FIREFOX支持，IE不支持
解决办法：把行插入到TBODY中，不要直接插入到表

3：setAttribute(‘style’,'color:red;’)
FIREFOX支持(除了IE，现在所有浏览器都支持)，IE不支持
解决办法：不用setAttribute(‘style’,'color:red’)
而用object.style.cssText = ‘color:red;’(这写法也有例外)
最好的办法是上面种方法都用上，万无一失 ^_^
4:class
setAttribute(‘class’,'styleClass’)
FIREFOX支持，IE不支持(指定属性名为CLASS，IE不会设置元素的CLASS属性，相反只使用SETATTRIBUTE时IE自动识别CLASSNAME属性)
解决办法：
setAttribute(‘class’,'styleClass’)
setAttribute(‘className’,'styleClass’)
2种都用上

5:用setAttribute设置事件
var obj = document.getElementById(‘objId’);
obj.setAttribute(‘onclick’,'funcitonname();’);
FIREFOX支持，IE不支持
解决办法：
IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数
如下：
var obj = document.getElementById(‘objId’);
obj.onclick=function(){fucntionname();};
这种方法所有浏览器都支持

6：建立单选钮
IE以外的浏览器

var rdo = document.createElement('input');
rdo.setAttribute('type','radio');
rdo.setAttribute('name','radiobtn');
rdo.setAttribute('value','checked');

IE:

var rdo =document.createElement("<input type='radio' name='radiobtn' value='checked'>";

解决办法：
这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有IF-ELSE了
万幸的是，IE可以识别出document的uniqueID属性，别的浏览器都不可以识别出这一属性。问题解决。

0：共同的一些技巧
在动态建立INPUT型输入元素时，一般是先加入，在设置TYPE。这就有可能出错

好习惯：var btn = document.createElement('input');
btn.setAttribut('type','button');
document.getElementById('formId').appendChild(btn);

来源于：http://blog.csdn.net/zqian1987/archive/2008/03/02/2140055.aspx

相关文章

  • 2009-06-03 -- CSS实现自动换行的小技巧 (4)
    大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！ 对于div 1.（IE浏览器）white-space:normal; word-...
  • 2009-08-30 -- CSS 3.0 参考手册 (中文版) (9)
    作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
  • 2009-07-24 -- 能支持IE6的前端更牛，还是敢对IE6说不的更牛？ (25)
    作为一个前端，是能够支持更多的浏览器比较牛，还是勇于对IE6说不，更牛一些呢？IE6在其特定历史时期内起到了举足轻重的作用。而如今，是时候让他寿终正寝，离开历史舞台的时候了，他却欲罢还休不离不弃。面对...
  • 2009-06-11 -- jQuery 实现 tab 切换一例 (11)
    对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用...
  • 2009-05-27 -- jQuery性能优化指南 (6)
    现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开...
]]> http://leotheme.cn/javascript/firefox-and-ie-javascript.html/feed 8 不刷新（AJAX）获取文章的内容 http://leotheme.cn/javascript/ajax-load-post-content.html http://leotheme.cn/javascript/ajax-load-post-content.html#comments Mon, 30 Nov 2009 15:27:19 +0000 Await http://leotheme.cn/?p=782 相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处，不用在刷新页面就能发表评论。实时提交，实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了，很多人都作了详细的讲解。在这想跟大家分享下。AJAX加载文章的内容。当然，这里还是基于JQ的load方法来实现。OK，来看效果：

load1

load2

load3

首先，定义三个变量：

  1. var objTag= $(".post");//定义要获取内容所在的节点
  2. var num= objTag.length;//定义节点的数量
  3. var _cache=new Object;//建立一个缓存对像

然后构建一个加载的函数：

  1. function loadentry(n){
  2.     var _url=$(objTag[n]).children(".archive-post-title").children("h2").children("a").attr("href");//定义要加载文章的地址
  3.     $('<div class="details"><div style="width:160px;margin-top:8px;padding:0 2px;font-size:12px;background: #01E343; color:#FFF;">正在加载文章内容，请稍等！</div></div>').insertBefore($(objTag[n]).children(".singledata"));//插入提示信息
  4.     if(_cache[_url]==null){//判断是否有缓存
  5.         $(objTag[n]).children(".details").load(_url+" .post .entry",function(){
  6.             _cache[_url]=$(objTag[n]).children(".details").html();
  7.             $('<span class="archive-arrow"><span title="收起全文" class="hide fRight" onclick="closentry(&quot;'+n+'&quot;);">收起全文↑</span></span>').insertAfter($(objTag[n]).children(".details"));
  8.         });//加载文章内容
  9.     }else{
  10.         $(objTag[n]).children(".archive-post-title").children(".archive-arrow").remove();
  11.         $(objTag[n]).children(".details").html(_cache[_url]);//直接显示缓存对像的内容
  12.         $('<span class="archive-arrow"><span title="收起全文" class="hide fRight" onclick="closentry(&quot;'+n+'&quot;);">收起全文↑</span></span>').insertAfter($(objTag[n]).children(".details"));
  13.     }
  14.     $(objTag[n]).children(".archive-post-title").children(".archive-arrow").remove();
  15. }

这部分对于不懂JQ的人来说可能有点复杂。懂JQ的人看起来一定很简单。就是一个对DOM的操作。通过动态的插入清除节点来实现我们需要的效果。关健在于“.load()”的用法。

到这已经实现了加载了。接着需要做个删除也就是收起全文；相比加载，删除要简单的多了，就是直接删除节点就行了。

  1. function closentry(n){
  2.     $(objTag[n]).children(".details").animate({height: 'toggle'}, "slow",function(){$(this).remove()});
  3.     $(objTag[n]).children(".archive-arrow").remove();
  4.     $('<div class="archive-arrow"><span title="阅读全文" class="show" onclick="loadentry(&quot;'+n+'&quot;);">阅读全文↓</span></div>').insertAfter($(objTag[n]).children(".archive-post-title").children("p"));
  5. }

这段代码就是一个基本的节点操作。在这就不作说明了；当然，最后我们需要插入节点并绑定事件。

  1. $(document).ready(function(){
  2.     for(a=0;a<num;a++){
  3.         $(objTag[a]).children(".archive-post-title").children(".archive-arrow").append('<span class="show" title="阅读全文" onclick="loadentry(&quot;'+a+'&quot;);">阅读全文↓</span>');
  4.     }
  5. });

OK，到这里这个AJAX加载效果就完成了。详细的效果可以点击侧边栏的分类导航。

相关文章

  • 2008-11-27 -- 给你的侧边栏添加一个登陆入口 (12)
    个人一直觉得wordpress的登陆很麻烦，要打开一个新窗口才行。而且默认的那个窗口看起来并不怎么漂亮。所以决定给它整整，搞个适合偶主题的登陆框才行。之前我已经写过一篇文章，但那个是用jQuery实现...
  • 2008-09-15 -- jquery基础教程二[伸缩、隔行变色...] (3)
    在上一篇介绍中已经讲了一些基本的应用，今天继续。先看一下面这个例子 Demo_5：收缩展开功能[如无法运行请多刷新几次或保存到本地运行] 可伸缩块 p,d...
  • 2008-09-11 -- jquery基础教程一[click,addClass,show,hide] (3)
    原创内容—转载请说明出处. jQuery我想很多人都知道，但用WP的好像很少有人说到这个。今天开始和大家一起来研究下如何用jQuery来为我们的WP添加实用的功能。至于jQuery的相关背景和资...
  • 2008-08-28 -- 利用WP自带的JS库打造超酷的侧边栏 (5)
    从这篇文章开始，我们来认识下wordpress自带的JS库，下面这张图是WP自动的JS文件夹。可以看出有很多JS文件，当然包括大名鼎鼎的jquery和prototype。利用这些我们能实现很多很酷的效...
  • 2009-11-28 -- WordPress评论表单验证 (16)
    wordpress的评论只是个很简单的表单。WP本身也有一个自身的验证系统。但自带的这个验证是基于后台的验证。当表单不符合规格时跳转到另一个页面。我们需要返回上一页才能继续填写表单。这样对于用户的体验...
]]> http://leotheme.cn/javascript/ajax-load-post-content.html/feed 49 WordPress评论表单验证 http://leotheme.cn/wordpress/wordpress-comment-form-proof.html http://leotheme.cn/wordpress/wordpress-comment-form-proof.html#comments Sat, 28 Nov 2009 02:50:40 +0000 Await http://leotheme.cn/?p=772 wordpress的评论只是个很简单的表单。WP本身也有一个自身的验证系统。但自带的这个验证是基于后台的验证。当表单不符合规格时跳转到另一个页面。我们需要返回上一页才能继续填写表单。这样对于用户的体验并不友好；所以一个基于前端的验证很需要。大家平时也一定有见过各种各样的表单验证。有些表单的验证很复杂，也很强大。不过WP的验证很简单。只需要验证“昵称”、“E-mail”、和评论就行了。http地址因为不是必须的。所以只需要在用户有输入的情况下判断下地址是否符合正常的格式就行了。来看下这个简单的验证效果：

form1

form2

form3
下面来说说这个简单的表单验证。当然，还是基于jQuery的。

  1. var Msg = new Array(
  2.                 "用户名不能为空",
  3.                 "昵称不能少于3个字符",
  4.                 "E-mail地址不能为空",
  5.                 "请输入正确的E-Mail地址",
  6.                 "url地址不正确",
  7.                 "评论内容不能少于5个字符",
  8.                 "输入正确"
  9.             );

首先定义一个提示信息的数组。

  1. if( $(this).is('#author') ){
  2.             $(this).next().remove();
  3.             if( this.value==""){
  4.                 $('<span class="formtips onError">'+Msg[0]+'</span>').insertAfter(this);
  5.             }
  6.             else if(this.value.length < 3 ){
  7.                 $('<span class="formtips onError">'+Msg[1]+'</span>').insertAfter(this);
  8.             }
  9.             else {
  10.                 $('<span class="formtips onok">'+Msg[6]+'</span>').insertAfter(this);
  11.             }
  12.         }

验证昵称：如果用户输入的字符为空，或少于3个。刚显示相应的错误信息，否则显示输入正确。

  1. //验证邮件地址
  2.         if( $(this).is('#email') ){
  3.             $(this).next().remove();
  4.             if( this.value==""){
  5.                 $('<span class="formtips onError">'+Msg[2]+'</span>').insertAfter(this);
  6.             }
  7.             else if( this.value!="" && !/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.value)){
  8.                 $('<span class="formtips onError">'+Msg[3]+'</span>').insertAfter(this);
  9.             }
  10.             else {
  11.                 $('<span class="formtips onok">'+Msg[6]+'</span>').insertAfter(this);
  12.             }
  13.         }

验证E-mail地址：和验证昵称一样。这里是用正则去匹配地址是否正确；

  1. //验证url
  2.         if( $(this).is('#url') ){
  3.             $(this).next().remove();
  4.             if( this.value!="" && !/^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/.test(this.value)){
  5.                 $('<span class="formtips onok">'+Msg[4]+'</span>').insertAfter(this);
  6.             }
  7.         }

验证url地址，因为这个不是必须的，所以只在有输入的情况下才去判断地址是否正确

  1. //提交，最终验证
  2.     $('#submit').click(function(){
  3.         $("#commentform :input").trigger('blur');
  4.         //验证评论内容
  5.         if( $("textarea").val() == ""|| $("textarea").val().length < 5){
  6.             tipsWindown("提示","text:评论内容不能为空或少于5个字符!","250","150","false","2000","false","msg");
  7.             return false;
  8.         }
  9.         var numError = $('form .onError').length;
  10.         if(numError){
  11.             tipsWindown("提示","text:请正确填写表单内容","250","150","false","2000","false","msg");
  12.             return false;
  13.         }else{
  14.             tipsWindown("提示","text:正在提交评论...","250","150","false","2000","false","msg");
  15.             $(".formtips").remove();
  16.         }
  17.     });

最后。绑定事件，然后验证评论内容是否为空或小于5个字符。如果为true则弹出提示层，并阻止表单的提交。否则弹出提示：正在提交评论…然后清除提示信息；OK，一个基于JQ的简单的表单验证完成了；

相关文章

  • 2008-09-15 -- jquery基础教程二[伸缩、隔行变色...] (3)
    在上一篇介绍中已经讲了一些基本的应用，今天继续。先看一下面这个例子 Demo_5：收缩展开功能[如无法运行请多刷新几次或保存到本地运行] 可伸缩块 p,d...
  • 2009-11-30 -- 不刷新（AJAX）获取文章的内容 (49)
    相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处，不用在刷新页面就能发表评论。实时提交，实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了，很多人都作了详细的讲...
  • 2009-11-25 -- 一个jQuery弹出层(tipsWindown) (46)
    弹出层效果网上很多很多，也没啥好说的了。写这个只是作为学习JQ的一些记录。此插件的一些方法参考了花匠的dialog；在此表示感谢。 接着说说这种弹出层的原理或者说是做法。总结下经验；首先需要一个遮罩...
  • 2009-08-28 -- jQuery实现背景图渐变切换 (6)
    链接的背景图切换一般都用CSS的HOVER来控制，虽然很方便，但效果不怎么酷，没有平滑效果，显得有点突然。在这篇文章里给大家介绍下如何用jQuery来实现一个平滑的渐变式背景切换。效果大家可以看下这个...
  • 2009-06-11 -- jQuery 实现 tab 切换一例 (11)
    对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用...
]]> http://leotheme.cn/wordpress/wordpress-comment-form-proof.html/feed 16 一个jQuery弹出层(tipsWindown) http://leotheme.cn/javascript/jquery-plugins-tipswindown.html http://leotheme.cn/javascript/jquery-plugins-tipswindown.html#comments Tue, 24 Nov 2009 16:24:44 +0000 Await http://leotheme.cn/?p=765 弹出层效果网上很多很多，也没啥好说的了。写这个只是作为学习JQ的一些记录。此插件的一些方法参考了花匠的dialog；在此表示感谢。
接着说说这种弹出层的原理或者说是做法。总结下经验；首先需要一个遮罩层来实现灰色背景。我们可以创建一个z-index高于其他层的DIV。然后设为绝对定位。接着获取页面的高度并把它作为这个DIV的高度。这样背景层的问题就OK了；

背景层结构：

<div id="windownbg" style="height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;z-index: 999901"></div>

然后是弹出层的结构：

  1. <div id="windown-box">
  2.     <div id="windown-title">
  3.         <h2></h2>
  4.         <span id="windown-close">关闭</span>
  5.     </div>
  6.     <div id="windown-content-border">
  7.         <div id="windown-content"></div>
  8.     </div>
  9. </div>

我们把这个结构通过 jQuery 的 “append” 方法追加到 body 里面；然后对它进行定位；这个定位有点复杂。固定垂直居中的方法很简单，大家都知道可以把它的position设为fixed，然后把的top、left设为50%，然后margin负 1/2 本身的宽度的一半就行了。但在IE6下，不支持fixed，而且在IE6里它的top算法也和FF不一样。FF下。top:50%是以当前页的可视内容最顶上的开始计算；而IE6下则是以整个文档的最上边开始计算。假如你把滚动条拉到最底部。然后弹出窗口。你会发现在IE6弹出的层看不见。因为它在上面。也就是在第一屏没有滚动滚动条时那个居中位置。所以在IE6下，这个高度要另外计算。它的top实际上是等于它本身的高度除以2再加上滚动条滚去的高度。

  1. if ( _version == 6.0 ) {
  2.     $("#windown-box").css({left:"50%",top:(parseInt((ch)/2)+est)+"px",marginTop: -((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
  3. }else {
  4.     $("#windown-box").css({left:"50%",top:"50%",marginTop:-((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
  5. };

定位问题解决了就好办了。剩下的就是获取内容和一些附加效果了。内容这里可以设定的类型有5种。分别是：text、ID、img、url、iframe 这个就不说了。附加效果就拖拽和自动关闭。拖拽这个东西有点复杂。但了解原理后也就不复杂了。首先是获取对像的offsetLeft和offsetTop这两个值。这两个值是对像距离浏览器窗口左边和上边的距离。然后绑定鼠标事件，当按下的时候计算鼠标当前的座标clientX、clientY。并计算这两个参数的差值得到新的座标moveX、moveY。当鼠标拖动的时候。计算当前鼠标的座标与之前得到的moveX、moveY之间的差值。这个值就是对像的新的座标了。把它符值给对像的top、left就实现了拖拽。

  1. DragHead.onmousedown = function(e) {
  2.     if(drag == "true"){moveable = true;}else{moveable = false;}
  3.     e = window.event?window.event:e;
  4.     var ol = Drag_ID.offsetLeft, ot = Drag_ID.offsetTop-moveTop;
  5.     moveX = e.clientX-ol;
  6.     moveY = e.clientY-ot;
  7.     document.onmousemove = function(e) {
  8.         if (moveable) {
  9.             e = window.event?window.event:e;
  10.             var x = e.clientX - moveX;
  11.             var y = e.clientY - moveY;
  12.             if ( x > 0 &&( x + sw < cw) && y > 0 && (y + sh < ch) ) {
  13.                 Drag_ID.style.left = x + "px";
  14.                 Drag_ID.style.top = parseInt(y+moveTop) + "px";
  15.                 Drag_ID.style.margin = "auto";
  16.             }
  17.         }
  18.      }
  19. }

自动关闭就很简单了。就是一个setTimeout
自动关闭代码：

  1. var closeWindown = function() {
  2.         $("#windownbg").remove();
  3.         $("#windown-box").fadeOut("slow",function(){$(this).remove();});
  4.     }
  5.     if( time == "" || typeof(time) == "undefined") {
  6.         $("#windown-close").click(function() {
  7.             $("#windownbg").remove();
  8.             $("#windown-box").fadeOut("slow",function(){$(this).remove();});
  9.         });
  10.     }else { 
  11.         setTimeout(closeWindown,time);
  12.     }

胡乱的说了一通。不知道大家能不能看明白…详细的演示请点击下面的链接

http://leotheme.cn/wp-content/uploads/Example/js/tipswindown/

相关文章

  • 2009-11-30 -- 不刷新（AJAX）获取文章的内容 (49)
    相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处，不用在刷新页面就能发表评论。实时提交，实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了，很多人都作了详细的讲...
  • 2009-11-28 -- WordPress评论表单验证 (16)
    wordpress的评论只是个很简单的表单。WP本身也有一个自身的验证系统。但自带的这个验证是基于后台的验证。当表单不符合规格时跳转到另一个页面。我们需要返回上一页才能继续填写表单。这样对于用户的体验...
  • 2009-08-28 -- jQuery实现背景图渐变切换 (6)
    链接的背景图切换一般都用CSS的HOVER来控制，虽然很方便，但效果不怎么酷，没有平滑效果，显得有点突然。在这篇文章里给大家介绍下如何用jQuery来实现一个平滑的渐变式背景切换。效果大家可以看下这个...
  • 2009-06-11 -- jQuery 实现 tab 切换一例 (11)
    对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用...
  • 2009-05-27 -- jQuery性能优化指南 (6)
    现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开...
]]> http://leotheme.cn/javascript/jquery-plugins-tipswindown.html/feed 46 细线表格的处理 http://leotheme.cn/javascript/thin-table.html http://leotheme.cn/javascript/thin-table.html#comments Sat, 14 Nov 2009 01:12:02 +0000 Await http://leotheme.cn/?p=747 最近的工作中老要用到表格。说真的，我现在很不习惯表格；看到就头痛；但没办法，有需要就得满足。囧！~说到表格最常用的就是细线表格了，每次都要都搜索下细线表格；虽然很简单但却一直主不住。郁闷。所以转了篇文章作个记录；在HTML中，我们设置border=”1″ 时，表格边框实际大小是2px，那如果我们要做成1px的细线表格要怎么办？以前在做1px的表格的时候，我会用表格背景颜色，然后再用另一种颜色设计单元格的背景，再把表格间距设置成1px，这样就能达到我们的1px表格了，如下例：

<table align="center" bgcolor="#f90" border="0" cellpadding="0" cellspacing="1" width="80%">
<tr>
<td bgcolor="#ffc"></td>
<td bgcolor="#ffc"></td>
<td bgcolor="#ffc"></td>
</tr>
<tr>
<td bgcolor="#ffc"></td>
<td bgcolor="#ffc"></td>
<td bgcolor="#ffc"></td>
</tr>
<tr>
<td bgcolor="#ffc"></td>
<td bgcolor="#ffc"></td>
<td bgcolor="#ffc"></td>
</tr>
</table>

这种方法虽然可以实现，但是页面里的代码多了很多，而且要控制局部也相对麻烦些。

下面的这种方法及其简单，html代码也减少了很多，结构更加的清晰。

  1. <style type="text/css">
  2. <!--
  3. table{
  4. border-collapse:collapse;
  5. }
  6. td{
  7. background:#ffc;
  8. border:solid 1px #f90;
  9. height:22px;
  10. }
  11. -->
  12. </style>

html代码：

<table width="80%" align="center">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

本文转载自：http://www.chunzhen.org.cn/2008/07/thin-table.html

随机日志

  • 2008-09-05 -- Google Chrome浏览器的隐藏功能和彩蛋 (2)
    Google浏览器大家已经都用着了，速度和性能都很不错。其实chrome还有一些很酷的功能隐藏在里面，下面列出一些google浏览器的about：页面，在地址栏输入下面的代码会有一些很实用的Chr...
  • 2008-11-09 -- CSS中关于背景图的应用技巧 (5)
    在CSS中对背景图的作法.一般都是这样: background: url(images/*.gif) no-repeat; 但有时候有很多图片的时候,像我的Maxthon主题,就用了很多的背景图和...
  • 2008-11-25 -- 用jQuery处理文本框的焦点[focus]状态 (3)
    我们知道，浏览器的文本框的聚焦(focus)样式可以通过CSS的伪类:focus来设置。假设我们有这么一段代码： Name: Password: Textarea: ...
  • 2009-06-08 -- 浅议Web网页Form表单设计技巧 (2)
    “输入框(Input)应当符合逻辑地划分为小组，这样大脑就可以很好的处理大堆区域间的关系。”——《HTML权威指南》 Web应用程序总是利用表单来处理数据录入和配置，但并不是所有的表单都保持一致...
  • 2008-10-24 -- 推荐一个可爱的字体——方正喵呜体 (3)
    方正喵呜体，特别适合用在卡通漫画上。 点击下载字体 ...
]]> http://leotheme.cn/javascript/thin-table.html/feed 6 布局中的固定定位 http://leotheme.cn/javascript/layout-fixed-position.html http://leotheme.cn/javascript/layout-fixed-position.html#comments Fri, 13 Nov 2009 03:29:36 +0000 Await http://leotheme.cn/?p=749 有时候会有某个特殊的需求。如想让某个元素，某块内容固定在页面的某个位置不动，也就是不随滚动条的滚动而滚动。它相对于其他的元素始终是固定的。最近在项目中就有这么一个需求；我们先来熟悉下CSS中关于定位的一些属性:

在CSS中关于定位的内容是：position:relative | absolute | static | fixed

参数：

static : 无特殊定位，对象遵循HTML定位规则，不能通过z-index进行层次分级。

absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。
relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。
fixed : 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。IE5.5及NS6尚不支持此属性。

CSS中定位的层叠分级：z-index: auto | namber;

auto 遵从其父对象的定位
namber 无单位的整数值。可为负数

我们知道，要让某个元素固定不动，可以设置这个元素的position属性为fixed；这个属性很好用很强大。但可惜的是万恶的IE6确不支持这个属性。这时候我们得请出传说中的Hack来了：

  1. body { 
  2.     margin: 0;
  3.     padding: 0; 
  4.     height: 100%;
  5.     overflow :auto;
  6. }
  7. #fixedid { 
  8.     position: fixed;
  9.     _position: absolute; /* Hack for IE6*/
  10.     right: 0;
  11.     _right: 16px; /* Hack for IE6*/
  12.     top: 300px;
  13.     width: 200px;
  14.     padding: 10px;
  15.     text-align: center;
  16.     font-weight: bold;
  17.     background: #0F0;
  18. }
  19. html { 
  20.     _overflow: hidden;/* Hack for IE6*/
  21. }

完整的示例：

提示：你可以先修改部分代码再运行。

至此，一个固定布局完成了。但别急着高兴，这个看似简单又完美的东西好是不是真的那么完美呢？答案是：NO；在实际使用中发现了一个问题，如果之前有一天写好了的页面。要你把这个页面的“footer”改成固定布局，当你高兴的把这个任务完成后。高兴的一点刷新的时候。问题来了；如果之前这个页面里有相对定位和绝对定位的布局，你会发现，IE6之前的布局乱了。这个固定定位影响了之前的布局；怎么办？重写之前的布局？一个页面还好说。多了呢？那将会相当麻烦。那有没有更好的办法呢？答案是：YES；有问题就会有解决的办法，不是吗？通过搜索，找到了一个基于JQ的插件。下面来看下这个插件：

jquery插件：任意位置浮动固定层

/*调用：

1 无参数调用：默认浮动在右下角

$(”#id”).floatdiv();

2 内置固定位置浮动

//左下角
$(”#id”).floatdiv(”leftbottom”);
 
//右下角
$(”#id”).floatdiv(”rightbottom”);
 
//左上角
$(”#id”).floatdiv(”lefttop”);
 
//右上角
$(”#id”).floatdiv(”righttop”);
 
//居中
$(”#id”).floatdiv(”middle”);

另外新添加了四个新的固定位置方法

middletop（居中置顶）、middlebottom（居中置低）、leftmiddle（靠左居中）、rightmiddle（靠右居中）

3 自定义位置浮动

$(”#id”).floatdiv({left:”10px”,top:”10px”});

以上参数，设置浮动层在left 10个像素,top 10个像素的位置

可以看出这个插件相当强大。至少对于固定某个元素来说是非常强大。内置了常见的位置。支持自定义位置；而且解决了上面的那个问题。更详细的说明和下载请点击这里

随机日志

  • 2008-10-21 -- jQuery 对checkbox的操作 (4)
    很久没有写JQuery的文章了。今天来看下JQ对天Checkbox复选框的操作。 看下面的一个小例子。在这个例子中包括了以下几个功能 1. 全选 2. 取消全选 3. 选中所有奇数 ...
  • 2008-09-15 -- WordPress“主题壁纸” (5)
    闲着没事做，随意整了两张，全当充数，因为自己不善于文字上的述说。就多发些图了，以后有时间继续多做些和大家一起分享。(两种规格:1024*768 | 1440*900) 点击下载...
  • 2009-06-13 -- 主题Dreamy更新到v2.0 [06-18 00:08] (57)
    距离这个主题发布上一版已经差不多两个月了，而这个主题我一直在修修改改。虽然很多同学问我要我BLOG用的版本，但很多地方没有完善，所以一直没有发布自己用的版本。但现在好了，终于可以发布这个新的版本了。这...
  • 2008-09-11 -- Opera中国版开发代号：朱雀 (0)
    Opera 中国版开发代号已在内部确定，中文名朱雀，英文名Ibis，将基于 Opera 9.60 开发，采用 Presto 2.x 内核。 随着 Ibis 的确定，Opera 中国版正式进入...
  • 2008-08-14 -- JavaScript实现WordPress自由颜色主题切换 (1)
    关于自由切换颜色的主题目前有些主题自带这个功能了见下图： 现在来谈谈怎么实现这样一个功能。其实很简单的。不管是换颜色和主题，原理都是一样的，即通个调用不同的CSS来替换掉当前的CSS而实...
]]> http://leotheme.cn/javascript/layout-fixed-position.html/feed 3 左右两栏等高实现方法 http://leotheme.cn/javascript/css-to-realize-accordant.html http://leotheme.cn/javascript/css-to-realize-accordant.html#comments Wed, 11 Nov 2009 03:21:51 +0000 Await http://leotheme.cn/?p=744 等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简单，但毕境麻烦。现在有了个更简单的方法。这个方法的原理是事先通过正内边距来使其拥有足够高度，然后通过负外边距来使得其的位置不变。通过给父元素溢出隐藏，我们可以隐藏掉事先占据的足够高的空间。由两列实际的内容高度来决定整个父元素的高度，从而实现了等高。

提示：你可以先修改部分代码再运行。

这里考滤到一个意外，就是右边的内容比左边多的时候；其实只需对左右两边都进行正内边距和负外边距设置就行了。这样不管是左边还是右边高，两边的高度始终都是一样的。利用这个原理，我们还可以实现三列多列等高布局。

顺便讲下JQ的实现方法。也很简单，原理就是取得左右两边的高度，然后判断这个值，把大的值赋给小的就行了。看代码：

  1. jQuery(document).ready(function() {
  2.     var _leftheight = jQuery(".left").height();
  3.         _rightheight = jQuery(".right").height();
  4.         if(_leftheight > _rightheight ) {
  5.             jQuery(".right").height(_leftheight);
  6.         }
  7.         else {
  8.             jQuery(".left").height(_rightheight);
  9.         }
  10.     })

好了，到这里相信大家已经都会了。其实还有一些方法可以实现等高的，比如说背景，大家没事研究研究吧；

相关文章

  • 2009-08-30 -- CSS 3.0 参考手册 (中文版) (9)
    作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
  • 2009-07-07 -- 如何使你的CSS样式更易阅读? (13)
    在做wordpress主题的时候，样式是最重要的一部分。作为主题的制作者，我们不但要考滤页面的还原完整度，还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美，但每个人都想主题更...
  • 2009-06-18 -- 关于CSS的书写习惯 (7)
    其实每个人都有自己喜欢的书写格式习惯，我在刚学CSS的时候，什么都不知道，只是要实现什么效果，我后就写个ID或类进去。放哪个位置也不管，丢进去就行了。反正效果实现了；后来当需要修改某些地方的时候，才发...
  • 2009-06-03 -- CSS实现自动换行的小技巧 (4)
    大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！ 对于div 1.（IE浏览器）white-space:normal; word-...
  • 2008-11-25 -- CSS清除浮动的一些方法 (5)
    CSS的浮动为我们的布局带来了很大的好处，利用浮动我们可以很方便的写出各种版式。但浮动同时也带来很多问题；这些问题基本上都因为没有及时的或者在适当的位置清楚浮动。下面来说下常用的清除浮动方法： ...
]]> http://leotheme.cn/javascript/css-to-realize-accordant.html/feed 4 新工作，新起点。 http://leotheme.cn/diary/newworknewstartingpoint.html http://leotheme.cn/diary/newworknewstartingpoint.html#comments Sat, 05 Sep 2009 15:36:57 +0000 Await http://leotheme.cn/?p=727 时间过得真快，转眼来北京已经一个月了。可记忆中好像就是昨天才蹋上这片陌生的土地；一直以来，从没想过有天会离开那个熟悉的城市，到另一个完全陌生的城市。当蹋上开往北京的列车的那一刻，心里有很多很多种滋味。有憧憬、有期待、也有点迷茫；有不舍、还有点忧愁；
而此刻，一切都已成为过去。终于见到了一直都在帮我的酋长，还有WOPUS的小胖，乖，SA。也有了新的工作，新的同事，虽然还没有习惯这个城市的生活和节奏，虽然工作有点忙，但我相信我会习惯的。

随机日志

  • 2008-10-27 -- WordPress模板常用调用函数 (1)
    虽然都是些基本的东西,但今天想要用的时候却记不了怎么多.没办法,只好百度一下.SO... 在这做下笔记,方便以后查询. WordPress基本模板文件 一套完整的WordPress模板应至少...
  • 2008-09-11 -- Opera中国版开发代号：朱雀 (0)
    Opera 中国版开发代号已在内部确定，中文名朱雀，英文名Ibis，将基于 Opera 9.60 开发，采用 Presto 2.x 内核。 随着 Ibis 的确定，Opera 中国版正式进入...
  • 2008-10-21 -- 搜狗拼音输入法漂亮皮肤 LeftSide (5)
    输入法大概是我们平常每天都会接触到的了，使用搜狗拼音输入法的人应该也不会少吧。虽然我基本上是用五笔。但有时候总会碰到一些难打的字。之前也用过很多的拼音输入法。最后还是绝定用搜狗。搜狗拼音输入法是支...
  • 2008-08-19 -- CSS常用缩写语法总结 (1)
    使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下： 1.颜色 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如： #000000可以缩写为...
  • 2008-08-17 -- 如何每天多给自己一小时？ (0)
          1.早晨，强迫自己躺在床上消磨几分钟。“前不久，我发现一个窍门，它可以让我每天节省20分钟～50分钟时间。”一个大忙人对我说，“就是等我彻底睡醒后再起床，如果不逗留一会儿起床，那你将得不到...
]]> http://leotheme.cn/diary/newworknewstartingpoint.html/feed 16 CSS 3.0 参考手册 (中文版) http://leotheme.cn/javascript/css-3-0-chm.html http://leotheme.cn/javascript/css-3-0-chm.html#comments Sun, 30 Aug 2009 06:55:34 +0000 Await http://leotheme.cn/?p=735 作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助你更好的学习和理解CSS3。
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。


手册难点

1. 中文资料少，对英文翻译功底要求较高；
2. 基础语法要求字斟句酌，避免产生歧义；
3. 兼容性列表涉及浏览器及版本众多；
4. 草案中的Grid布局被业界同仁普遍认为比“天书”还难…

CSS3 还是草案，中文资料少之又少，基本上都是一篇内容转来转去，而我们的手册从基础语法到示例制作，都是根据W3C工作草案进行翻译，并结合自身的沉淀制作示例。

备受期待的 CSS 3 新功能

圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa – 加入透明色、文字阴影等等
CSS3 的出现，让代码更简洁、页面结构更合理，性能和效果得到兼顾。

CSS 3.0 参考手册 (中文版) 预览：

css3_scrn

下载：

CSS 3.0 参考手册 (中文版) 下载 (366k)

相关文章

  • 2008-08-24 -- 给你的BLOG添加漂亮的登陆效果 (8)
    不知道大家的对WP的登陆是怎么看的，反正我是很不喜欢点个链接到另一个页面去登陆的这种做法。嘿嘿今天给大家带来点小东西，放弃WP默认的登陆方式，打了更加人性化更加酷的登陆方式。同时，由这篇文章开始，引入...
  • 2008-08-20 -- Maxthon v1.0[最新修改] (8)
    Maxthon v1.0[最新修改] 1.对所有代码进一步优化，去掉了作品展示部分。 [详细]：对CSS代码进一步优化。和重组，打开后能发现现的在CSS变得很干净。方便大家修改...
  • 2008-08-15 -- 去掉链接时虚线框的几个方法 (5)
    我想很多朋友都遇到这个问题，当点击一个链接的时候，总会出现一个虚线框。 在这介绍几种去除的方法： 1.直接给链接加是onfocus="this.blur()". 链接 2.CSS实现 ...
  • 2008-08-14 -- JavaScript实现WordPress自由颜色主题切换 (1)
    关于自由切换颜色的主题目前有些主题自带这个功能了见下图： 现在来谈谈怎么实现这样一个功能。其实很简单的。不管是换颜色和主题，原理都是一样的，即通个调用不同的CSS来替换掉当前的CSS而实...
  • 2010-08-10 -- firefox与ie 的javascript区别 (8)
    浏览器的兼容问题目前还是一个头痛的问题。除了CSS的兼容性，Javascript的兼容有时候更容易让人头痛。下面收集的一些关于Firefox和IE的区别作个记号，需要的时候看看 1. Docum...
]]> http://leotheme.cn/javascript/css-3-0-chm.html/feed 9 jQuery实现背景图渐变切换 http://leotheme.cn/javascript/jquery-dragoninteractive-navi.html http://leotheme.cn/javascript/jquery-dragoninteractive-navi.html#comments Fri, 28 Aug 2009 15:07:54 +0000 Await http://leotheme.cn/?p=728 链接的背景图切换一般都用CSS的HOVER来控制，虽然很方便，但效果不怎么酷，没有平滑效果，显得有点突然。在这篇文章里给大家介绍下如何用jQuery来实现一个平滑的渐变式背景切换。效果大家可以看下这个站（http://dragoninteractive.com/）。如图所示。

nav

上面的网站在中有很多地方都应用了这种效果。看起来是不是很酷。OK，进入正题；
在这里我用一个简单的实例来分析下，先看下我们要用到的这张图。

logo

我们把背景切换的两张图做成一张。这样的好处我以前也有说过了。详见“CSS中关于背景图的应用技巧”；接下来要做的是写结构和样式部分。

body { margin: 0; padding: 0; text-align: center; }
    #logo {
            position: absolute;
            display: block;
            width: 156px;
            height: 49px;
            /*这部分是让元素相对浏览器垂直居中
            left: 50%;
            top: 50%;
            margin-left: -156px;
            margin-top: -49px;
            -----------------------------------------*/
            background: url(logo.png) top left no-repeat;
            }
    #logo span {
            text-indent: -9999em;
            /*隐藏文字，就是以图替换文字的一种方法*/
            }
    #logo .hover {/*这个样式是为JQ准备的*/
            position: absolute;
            width: 156px;
            height: 49px;
            top: 0;
            left: 0;
            background: url(logo.png) 0 -49px no-repeat;
            }

这里的样式，应该不需要作解释了。很简单的一个样式！下面是结构；

<a href="http://www.wopus.org/" id="wopus"><span>wopus</span></a>

关健是JQ部分，我们来看代码：

jQuery(function() {
        jQuery("#logo").append("<span class='hover'></span>");
        //在ID为logo的标签里内部插入一个样式为hover的span
        jQuery('.hover').css('opacity', 0);
        //设置hover的透明度为0
        jQuery('.hover').parent().hover(
        function() {
            jQuery('.hover').stop().animate({opacity: '1'},1000);
        },
        function() {
            jQuery('.hover').stop().animate({ opacity: '0'},1000);
        });
        //这是一个JQ里常用的hover()效果。当鼠标放在class为hover的父元素上时。停止当前标签上的所有动画并执行后面的自定义效果—hover的透明度由0渐变成100%;当鼠标离开后反之。
    });

看起来是不是很简单。其原理就在链接内部再插入一个元素。并通过改变这个元素的透明度来实现。有点像FLASH里的遮罩效果。最后点击下面的链接来看下效果；

http://leotheme.cn/wp-content/uploads/Example/js/dragoninteractive/

相关文章

  • 2009-06-11 -- jQuery 实现 tab 切换一例 (11)
    对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用...
  • 2008-11-20 -- 增强用户体验之文章内的链接 (29)
    我们在写文章的时候，难免会少不了添加一些链接。这些链接有的是指向自己的BLOG内的，有的是指向好友的BLOG，或一篇文章。指向自己BLOG的称为内部链接，指向外部的称为外部链接，我们习惯是外部链接在新...
  • 2009-11-30 -- 不刷新（AJAX）获取文章的内容 (49)
    相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处，不用在刷新页面就能发表评论。实时提交，实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了，很多人都作了详细的讲...
  • 2009-11-28 -- WordPress评论表单验证 (16)
    wordpress的评论只是个很简单的表单。WP本身也有一个自身的验证系统。但自带的这个验证是基于后台的验证。当表单不符合规格时跳转到另一个页面。我们需要返回上一页才能继续填写表单。这样对于用户的体验...
  • 2009-11-25 -- 一个jQuery弹出层(tipsWindown) (46)
    弹出层效果网上很多很多，也没啥好说的了。写这个只是作为学习JQ的一些记录。此插件的一些方法参考了花匠的dialog；在此表示感谢。 接着说说这种弹出层的原理或者说是做法。总结下经验；首先需要一个遮罩...
]]> http://leotheme.cn/javascript/jquery-dragoninteractive-navi.html/feed 6