.deco{
width:200px;
text-align:center;
position:fixed;
text-shadow:-2px 2px 2px #000;
z-index:10;
}
/*文字牌*/
#days{
color:#f89d57;
font-size:14px;
padding:18px 14px;
margin:0 10px;
background-color:#543019;
box-shadow:-3px 2px 1px #000;
...
transform:rotate(-5deg);
...
position:relative;
top:-10px;
}
/*天数*/
#days span{
text-align:center;
font-size:24px;
}
/*绳子部分,显示左右边框,背景为照片*/
#rope{
width:50%;
margin:0 auto;
height:75px;
border-left:3px solid #543019;
border-right:3px solid #543019;
background:transparent url(../images/tang.png) no-repeat top center ;
}
其实,真没啥可说的代码,都听简单...
JS清单一:
//背景图片移动初始化
var i = 3000;
function a(){
++i || (i = 3000);
$('#clouds').css('background-position',i);
}
//设定背景图片移动的间隔时间
setInterval(a,100);
JS请单二:
//页面平滑滚动效果,并为当前页面对应的导航链接添加active类
$("#nav a").click(function(e){
//获取当前链接地址
var href = $(this).attr("href");
var pos = $(href).offset().top;
//给当前链接的li添加active类,并删除同级其它li的active类
$(this).parent('li')
.addClass("active")
.siblings().removeClass("active");
//平滑滚动,时间为1秒
$("html,body").animate({scrollTop: pos}, 1000, 'easeInOutExpo',function(){
//改变url的值但并不刷新页面
location.hash = href;
});
return false;
});
分享者:http://www.douban.com/group/yaoqingzhuce/