Monthly Archive for 十月, 2010

算是自己写的第一个jQuery插件，js代码很早就写好了，但是因为一个css问题被困住了，直到今天才重新想起。

Xslider：基于jQuery的拉样片特效插件，也可以用作jQuery Tab选项卡，目前支持四种切换特效：X轴、Y轴、渐变和基本，这里是Demo。
使用方法很简单：

$("#slider1").Xslider();

自定义选项：

$("#slider1").Xslider({
    affect: 'scrollx', //效果  有scrollx|scrolly|fade|none
    speed: 800, //动画速度
    space: 5000, //时间间隔
    auto: true, //自动滚动
    trigger: 'mouseover', //触发事件 注意用mouseover代替hover
    conbox: '.conbox', //内容容器id或class
    ctag: 'a', //内容标签 默认为a
    switcher: '.switcher', //切换触发器id或class
    stag: 'a', //切换器标签 默认为a
    current:'cur', //当前切换器样式名称
    prebtn: '.pre', //TODO 前一张按钮
    nextbtn:'.next', //TODO 下一张按钮
    recycle:true, //TODO 是否循环
    rand:false //TODO 是否随机指定首张幻灯图片
});

最后说一句，IE6很邪恶，但我爱它的盒子模型。

As is known to us,jQuery是一个短小精悍的javascript library。它以”Write less,do more”的宗旨，以及提供许多成熟的插件及实现，俘获了无数爱偷懒的Programmers的心。今天和大家分享我在项目中使用jQuery编写的一处页面特效，我姑且自顾自的把它称作滑块导航菜单，是一种类似LavaLamp的特效，菜单按钮的背景会有鼠标跟随、以及弹簧动画的特效，很有意思（ps:大家如果有更好的命名方式，荒淫指出，哈哈）。
全部源代码如下，此外Demo地址，荒淫指教：
javascript（除了jQuery，还使用了easing扩展）:

$(function(){
	$('#nav_btn_bg').fadeIn(0.2);
	$('#nav_btn').mouseover(function(e){ //这里用到了比事件绑定更高级的事件委托机制
		if(e.target.id=='home') {
			var ml = -5;
		}else if(e.target.id=='sk') {
			var ml = 145;
		}else if(e.target.id=='lottery') {
			var ml = 290;
		}
		$('#nav_btn_bg').stop(true).animate({marginLeft:ml},{easing: 'easeOutBack'});
	});
	$('#nav_btn').mouseleave(function(){
		$('#nav_btn_bg').stop(true).animate({marginLeft:[290,'easeOutBounce'],duration: 800}); //jQuery1.4以后才能这么写
	});
});

HTML（How To Make Love）:

CSS样式：

@charset "utf-8";
/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:”;
}
abbr,acronym { border: 0;
}
#header{
	width:100%;
	height:175px;
	background:url('head_bg.jpg') repeat-x;
}
#nav{
	width:960px;
	margin:0 auto;
	position:relative !important;
}
#logo{
	display:inline-block;
	width:325px;
	height:70px;
	margin-top:15px;
	float:left;
}
#nav_btn{
	height:60px;
	width:420px;
	float:left;
	margin-top:35px;
	margin-left:45px;
	background:url('nav_btn_bg_06.gif') no-repeat;
	position:relative;
}
#nav_bar{
	position:absolute;
	z-index:2;
}
#nav_btn a{
	display:inline-block;
	width:133px;
	height:55px;
}
#nav_btn_bg{
	width:120px;
	height:55px;
	background:#cccccc;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	position:absolute;
	z-index:1;
	left:0px;
	top:2px;
	opacity:0.2;
	filter:alpha(opacity=20);
	margin-left:290px;
	display:none;
}