jquery动画效果浏览图片

今天看了陶国荣老师写的《jquery权威指南》这本书关于动画效果的章节,对最后的测试案例感受颇深。

案例要求:不同尺寸的照片先以缩略图的形式统一显示在页面中,然后点击任意图片进行查看,图片会动态放大,点击缩小后图片会动态缩小,如果有一张图片已经处于放大状态,则放大另一张图片的时候该张放大的图片会自定缩小。

该案例主要学习animate()函数的使用方法$(selector).animate(styles,options).

测试代码中由于在遍历所有元素时并没有等待图片加载完成就记录了图片的width和height属性,因此这样可能会得到意想不到的效果,一下代码是在原代码基础上稍作修改,在图片全部load结束后在加载图片信息。




    
    浏览图片
    
    


    

风景1

风景2

风景3

风景4


你可能感兴趣的:(JavaScript)