豆瓣电影首页的分析

网址[url]http://movie.douban.com[/url]

1 先上图
[img]http://dl2.iteye.com/upload/attachment/0108/4474/df716945-930e-34c8-962a-1aac33013002.png[/img]
下面4附图的onmouseover事件会悬空触发图片介绍div 并且它每一屏的第4个li的介绍是在外面的 一般的做法是将图片介绍div绑定在ul下的li标签内 (有内在的逻辑)但是可以知道图片是在不断向左滚动的,那么就必须在unordered list(<ul>)外套一个元素使多出的ul隐藏,但隐藏ul也会隐藏介绍div 故不能这么做 必须逃脱中间兰的限制 所以把它放在了最后,通过appendChild的形式进行显示
先获取每一个li的绝对left top 再在它的基础上设介绍div的位置
注意到有延迟显示 故代码中有setTimeout
2 右上角douban app onmouseover 居然只显示了一部分 其实可以看做是一个矩形除去右上角的登陆注册 故把登陆注册设为z-Index :10 即可有这种效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值