项目总结 美丽说 2016.12.5

项目：美丽说部分页面。

美丽说购买页效果图：

主要特效：

一、小图切换大图：

原理：当鼠标经过小图时，替换大图的src为小图的src，即$('.img').attr('src','img/coat/img'+index+'.jpg');

二、锚点跳转

原理：鼠标点击时找到需要跳转的目标，使屏幕的scrolltop变成目标的offsettop，即$(window).scrollTop($('#effect').offset().top);

三、鼠标滚动某部分对应的样式改变

原理： 同鼠标滚动出现返回顶部按钮一样，判断屏幕scrolltop的大小，改变对象的属性。

难点：

布局繁琐，小细节多，图片多，工作量大。

解决方法：

努力。

收藏页面效果图：

因为此处用了选项卡的功能，故有两个图片页面。

主要特效：

一、DOM操作

原理：当点击右上角的删除图标时，获取当前按钮的父元素节点，删除他，即

    $('.good_box>.delete').click(function(){
        $(this).parent('div').remove();
    })

二、删除借点改变数值

原理：删除元素后，获取父元素中此元素的个数（长度），并用此数值替换需改变的元素的text值，即

$('.collect_count span').text($('.good_box').length);

难点：

因为布局复杂，节点操作繁琐，很容易产生冒泡事件。

解决方法：

使用cancelBubble取消冒泡事件。