项目:美丽说部分页面。
美丽说购买页效果图:
主要特效:
一、小图切换大图:
原理:当鼠标经过小图时,替换大图的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取消冒泡事件。