2013-05-瀑布流效果的制作

这个图片墙是动态瀑布流,思路是:

1.动态计算用户视窗的宽度,计算出可显示多少列的图片;

2.监听滚动条的变化,动态算出滚动时最短的是哪一列,当最短列底部露出后,用$.getJSON()方法获取新的一批图片,并遍历每一个图片,将新图片添加到最短列中(这时最短列是动态的啦)。

3.监听视窗大小变化,动态算出窗口的新宽度值,重新对图片进行排列,并使用了动画效果。

核心代码也有点长,就不贴出来了,直接看源码呗,我写满了注释O(∩_∩)O~ Demo

//—2013-05-09-优化————————————————————————————————————————————

上面这个Demo,有一个细节,就是图片原始大小,是json文件里定义好的,即原图片大小本地计算好后写在json里,调用时直接使用了jData.width和jData.height属性,可我这样就没有灵活性了。

合理的思路是这样的:json只存储图片路径,然后使用JS去获取图片的原始尺寸进行等比例缩放。

查阅资料后确实JS发现有Image()对象,可以获得图片的原始尺寸:

[javascript]
var objImg = new Image();// 新建Image对象,获得原始图片的尺寸,增大了灵活性
objImg.onload = function() {
var iHeight = objImg .height * (iWidth / objImg .width); // iWidth恒定,使用原图片尺寸计算并设置等比例缩放后的图片高度</p>
}
[/javascript]

需要注意的是,这些计算需要放在onload函数中,保证计算时,图片已经加载完成,否则会得到iHeight为0。

可直接看源码,找到修改的地方理解,Demo2

2013-03-jquery.ajax()表单验证练习

今天学习了Json数据格式,并用$.ajax()发送表单:点击按钮发送数据到后台php文件,后台处理后返回Json,再用jquery读取Json数据

成功发送数据到后台,我模拟了后台返回的数据(笨方法:直接赋值回来):点击注册或登录按钮,就会检测表单。

PS:这个页面没有真正的表单验证,不管输入什么都会显示出错误提示,因为我只是模拟后台,处理结果都是表单输入错误。

核心代码:

1.php封装json数据,返回到前台:

2.$.ajax()处理返回的json数据,控制表单的行为:

最终效果,见Demo

2013-03-CSS和JQuery下拉菜单练习

手生,光看书不动手去写代码,就不会发现细节问题,要不断地练习,熟能生巧!

CSS和JQ分别实现下拉菜单,核心代码只有几行。

[css]

/CSS下拉菜单/
nav#css-menu>ul>li:hover ul{
display: block;/鼠标悬浮时显示下拉菜单/
}

[/css]
[javascript]

/jQuery下拉菜单/
$(document).ready(function(){
$(‘#jquery-menu>ul>li’).hover(function(){
$(this).find(‘ul’).slideDown(‘slow’);
},function(){
$(this).find(‘ul’).slideUp(‘fast’);
});
});

[/javascript]

Demo

2012-12-仿学校官网主页

仿SCUT主页,没有精细到每一个px,目的是练习布局。

其中下拉菜单用纯CSS写的,还尝试用了Sprite图片,写起来还很生疏,需要多加练习。

代码没有优化,因为赶着复习期末考试了,就先放着吧,上demo

2012-12-新练习

最近比较忙,没有坚持每日一练了,但是看了不少书,理论知识长了不少发现写起东西来也比较顺畅了,以后写练习以月为一个单位汇总吧。

1.纯CSS3或JQ实现文本框动态下拉,demo

2.写了个小页面,用来记录我的IDP计划,demo