CssRain-前端技术

用jQuery实现图片预加载.

网站系列中常用的图片预加载技术。
我将此技术用到了小图 显示大图， 效果还可以。
通过这个插件你可以 完成更多的 效果，比如图片相册，幻灯片 等等。。。
期待更多朋友利用此插件 开发更多效果。
演示：

http://cssrain.cn/demo/preloadimages/preload.html

下载：

http://cssrain.cn/demo/preloadimages/preloadimages.rar

用jQuery解决iframe自适应高度问题.

iframe高度自适应问题在项目中经常遇到，下面的例子就是一个解决方案，
通过iframe的onload方法，然后动态设置高度。
演示1：

http://cssrain.cn/demo/iframeHeight/index.html

http://cssrain.cn/demo/iframeHeight/plugin/index.html

下载：

http://cssrain.cn/demo/iframeHeight/iframeHeight.rar

用jQuery解决弹出层的问题2.

jove [2009-03-26 10:25 AM | 220.165.246.34 | ] ：
请教一个问题，鼠标移入链接时弹出菜单层，鼠标移出链接或弹出的菜单层时隐藏菜单层，如果菜单层不是链接的子元素，应该如何绑定mouseout事件？
如果光是这样写：$(“#link”).hover(function(){，当鼠标仅仅只是移除链接的时候菜单层就消失了。
针对这位朋友提的问题，请看下面的解决方案：
演示：

http://www.cssrain.cn/demo/popDiv2/popDiv1.html

http://www.cssrain.cn/demo/popDiv2/popDiv2.html

下载：

http://www.cssrain.cn/demo/popDiv2/popDiv2.rar

http://cssrain.cn/article.asp?id=1317

关于jQuery的动画制作.

其实做动画 就像 电影院 放电影一样， 通过图片一张张的快速滑过幕布， 从而成像。
做动画原理很简单，一个相对定位 + 一个绝对定位 + 固定宽度 + overflow:hiden 即可。
看下面的例子，一步步来完成动画的制作：
教程1：

http://cssrain.cn/demo/animateDev/t1/d1.html

http://cssrain.cn/demo/animateDev/t1/d2.html

http://cssrain.cn/demo/animateDev/t1/d3.html

http://cssrain.cn/demo/animateDev/t1/d4.html

http://cssrain.cn/demo/animateDev/t1/d5.html

http://cssrain.cn/demo/animateDev/t1/d6.html

教程2：

http://cssrain.cn/demo/animateDev/t2/demo1.html

http://cssrain.cn/demo/animateDev/t2/demo2.html

http://cssrain.cn/demo/animateDev/t2/demo3.html

实例1：

http://cssrain.cn/demo/animateDev/t3/demo1.html

下载：

http://cssrain.cn/demo/animateDev/animateDev.rar

用jQuery解决弹出层的问题.

在BS 项目中 经常需要用到这种弹出层。
做这种弹出层一般都会遇到下面几个问题：
0，弹出层必须定义在input的下边显示。
1，点击input弹出div层。
2，点击div层外面任何地方，关闭div层。
3，ie6下，div层与下拉框的优先级问题。
下面这个例子就是解决这些问题的，大家可以参考参考，有什么更好的解决方案，请留言。
超级简单版 演示：

http://cssrain.cn/demo/popDiv/easyPopDiv.html

实例版 演示：

http://cssrain.cn/demo/popDiv/popDiv.html

下载：

http://cssrain.cn/demo/popDiv/popDiv.rar

关闭层后，给document bind的click事件 应该unbind。
此弹出框特点：
1,弹出层出现在 文本框 下面.
2,点击弹出层内部 不关闭层，点击外面关闭弹出层.
3,ie6依然能遮住下拉框.
当时遇到的问题以及解决方案 ：
1,获取文本框的高度，当初用的.height()，结果发现有问题，border等都没算进去，后来改用.outerHeight(true)解决。
2,阻止事件冒泡，当初用的return false;结果弄的多选框不能选了，
因为return false包括e.stopPropagation()和e.preventdefault(),e.preventdefault()会阻止元素的默认动作，
所以多选框不能选中了。改用e.stopPropagation()后，一切正常。
3,$(“body”)和$(document)的区别，因为body的高度未知，所以导致click()事件无效，改为$(document) 解决。
4,ie6下，层与下拉框的问题，采用jquery.bigframe插件解决。

jQuery插件—倒计时.

这个倒计时的构思比较巧妙，呵呵，我自认为的。
计时调用 通过jquery的animate()方法。
计时停止 通过jquery的stop()方法。
而重新开始计时则使用了 jquery的data()方法记录一些变量，使之重新开始。
Demo：

http://cssrain.cn/demo/timecount.html

源代码注释：
jQuery.fn.countDown = function(settings,to) {
if(!to && to != settings.endNumber) { to = settings.startNumber; }
this.data(“CR_currentTime”,to);
$(this).text(to).animate({“none”:”none”},settings.duration,'',function() {
if(to > settings.endNumber + 1) {
$(this).countDown(settings,to – 1);
}else{
settings.callBack(this);
}
});
return this;
};
//计时&&重新计时
jQuery.fn.CRcountDown = function(settings) {
settings = jQuery.extend({
startNumber: 10,
endNumber: 0,
duration: 1000,
callBack: function() { }
}, settings);
this.data(“CR_duration”,settings.duration);
this.data(“CR_endNumber”,settings.endNumber);
this.data(“CR_callBack”,settings.callBack);
return this.stop().countDown(settings);
};
//计时暂停
jQuery.fn.pause = function(settings) {
return this.stop();
};
//暂停后，重新开始
jQuery.fn.reStart = function() {
return this.pause().CRcountDown({
startNumber : this.data(“CR_currentTime”),
duration : this.data(“CR_duration”),
endNumber : this.data(“CR_endNumber”),
callBack : this.data(“CR_callBack”)
});
};
使用方法：
// 开始 && 重新开始
$(“#start”).click(function(){
$(“#test”).CRcountDown({
startNumber:15,
callBack:test
})
.css(“color”,”red”);
});
// 暂停
$(“#pause”).click(function(){
$(“#test”).pause();
});
// 暂停后 重新开始
$(“#again”).click(function(){
$(“#test”).reStart();
});
function test(){
$(“

计时1结束!

“)
.hide()
.fadeIn(1000)
.appendTo(“body”);
}
2 ，jquery 倒计时插件（刷新保持计时状态）　
用到jquery的cookie插件。感谢农民的升级。
下载地址：http://jquerylab.googlecode.com/files/2.rar

关于jQuery Sizzle选择器跟普通选择器的区别.

大家都知道 jQuery1.3.x更换了选择器引擎，选择了Sizzle。
那么Sizzle相对于jQuery以前的选择器有什么优势呢？ 为什么速度能提升这么高？
最近我在国外的网站看到点内容，大概意思是这样说的。
至于Sizzle代码是怎么实现的，我也没去研究，但我可以给大家讲一个实例，也许这样大家更容易理解。
举个一个选择器来说： $(“div p”);
每个更换选择器之前，查找步骤如下：
1，先查找页面上所有的div 。
2，循环所有的div，查找每个div下的p 。
3，合并结果 。
采用Sizzle选择器之后，查找步骤如下：
1，先查找页面上所有的p 。
2，循环所有的p，查找每个p的父元素，
1)如果不是div，遍历上一层。
2)如果已经是顶层，排除此p。
3)如果是div，则保存此p元素。
从上面对比来看，最重要的是Sizzle 没有了 第三步 合并结果， 所以导致查找速度大幅提升。

jQuery教程—20行代码的购物车效果.

演示：

http://www.cssrain.cn/demo/addCart/cart1.html

代码注释：
$(function(){
$(“#productlist ul li a”).click(function(){
//删除页面中已经有的 阴影
$(“#cart_shadow”).remove();
//创建阴影div
var $shadow = $('

').prependTo(“body”);
//获取当前点击的前一个img标签
var $img = $(this).prev(“img”);
//利用img标签的宽度，高度，上边距等属性来设置阴影div
$shadow.css({
'width' : $img.css('width'),
'height': $img.css('height') ,
'position' : 'absolute',
'top' : $img.offset().top,
'left' : $img.offset().left,
'opacity' : 0.6
})
.show();
//获取购物车标签
var $cart = $(“#cart”);
//利用购物车表情按的宽度，高度，上边距等属性来设置阴影div的动画效果
$shadow.animate({
width: $cart.innerWidth(),
height: $cart.innerHeight(),
top: $cart.offset().top,
left: $cart.offset().left,
opacity: 0
}, { duration: 600 , complete: function(){
$cart.append(“

“);
}
})
//阻止超链接跳转
return false;
});
});