国庆节刚刚休完婚假,现在分享下为自己结婚时制作的网页~~希望能得到大家的指点~~代码很羞涩,主要是设计~~ 准备结婚的童鞋们,有没有做一个求祝福的网页的想法呢?看这里:http://insekkei.com/drabbit/ 首页走起,背景的云是慢悠悠飘着的。标题字体采用wire one,英文字体包比较小,我放在源代码中了。
另外,关于主婚纱照的抠图,那是我历史上抠得最细致的一张图片,没有之一,放大到每个块长宽为半厘米... ...
导航在右边,纽扣效果,css并不复杂,不贴了...看相册,以照片墙的形式显示。可以随意拖动。
点击每个小图是这样的效果,这个...我用了插件...不过改了一些。再点击是大图。
这是地址,用了搜狗的api,可缩放拖拉...
有同学朋友要去现场的话填写下表单,用了金数据提供的服务,没办法,免费的服务器,不支持后台,不支持数据库,只能从静态页面+第三方服务下手了...
祝福,这个用了多说的,修改了下样式...感谢前来撒祝福的童鞋们!么么哒~~:P
嗯,就这么几个页面,下面我忐忑地发几个部件的代码... 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;
- });
有什么更好的建议,欢迎走过路过的童鞋提出,谢谢! |