JS实现自己的家具展

今天收到了宜家的会员通知，我突然想起以前改过的DEMO，小小的修改了一下，现在放出来show一下

点击这里先看看效果吧

如果觉得DEMO不错的话，可以接着看下面的代码解析：

实现物品悬浮标记：

[html]

<div id=”couch”>
<a href=”#”><img src=”../Pic/more.png”/></a>
<span>IKEA Klippan Couch</span>
</div>

[/html]

放置couch DIV 在页面上

[css]

#couch{ top:240px; left:75px;}

[/css]

通过此CSS来固定位置

[javascript]

$(“.more”).hover(function(){
$(this).stop().animate({width: ‘225px’ }, 200).css({‘z-index’ : ’10’,’padding’:’6px’});
//Change the width increase caption size
},
function () {
$(this).stop().animate({width: ’50px’ }, 200).css({‘z-index’ : ‘1’,’padding’:’5px’});
}
);

[/javascript]

上面的脚本实现了鼠标悬停功能，以及离开时的效果.

[javascript]

$(“.more a”).click(function(){
$(“#infobox”).animate({bottom: ‘233px’ }, 200);
$(“#fade_bg”).fadeIn();
return false;
});

[/javascript]

实现点击效果

其它的依次这样添加，没有技术门尴尬.一个简单的家具DEMO就这样完成了。不过我没找到图片，在弹出框里显示不出效果。如果不满足2D显示的童鞋，可以自己用3D插件来重绘~