|
本帖最后由 萌萌哒的我 于 2014-11-2 13:10 编辑 首页走起，背景的云是慢悠悠飘着的。标题字体采用wire one，英文字体包比较小，我放在源代码中了  导航在右边，纽扣效果，css并不复杂，不贴了...看相册，以照片墙的形式显示。可以随意拖动  点击每个小图是这样的效果，这个...我用了插件...不过改了一些。再点击是大图   这是地址，用了搜狗的api，可缩放拖拉  有同学朋友要去现场的话填写下表单，用了金数据提供的服务，没办法，免费的服务器，不支持后台，不支持数据库，只能从静态页面+第三方服务下手了  祝福，这个用了多说的，修改了下样式...感谢前来撒祝福的童鞋们！  嗯，就这么几个页面，下面我忐忑地发几个部件的代码 CSS请单一：/***倒计时牌***/ .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/ |
|
|
