CSS expression VS Script event
国庆来了,手机加油站(http://www.sjjyz.com)的首页也想带给访问客人一点喜悦的感觉,于是美工做了两个flash分别放在网页的两边空白的地方,同时想让它们随页面滚动而滚动,有浮动的感觉。
在实现滚动的效果时,我开始按习惯用了js的事件body onscroll来做。但做好后发现在滚动时两个flash有点卡卡的感觉,像抽筋一样,给人感觉很不好,我就尝试着用css 的expression来实现效果,发现结果要好得多,抽筋的感觉一点也没有了。
代码如下:
<style>
#flashRight { POSITION: absolute; TOP: expression(lockTop()); LEFT:expression(lockLeft(false)); }
#flashLeft { POSITION: absolute; TOP: expression(lockTop()); LEFT:expression(lockLeft(true)); }
</style>
#flashRight { POSITION: absolute; TOP: expression(lockTop()); LEFT:expression(lockLeft(false)); }
#flashLeft { POSITION: absolute; TOP: expression(lockTop()); LEFT:expression(lockLeft(true)); }
</style>
<script language="javascript">
function lockTop()
{
var _body=document.body;
return _body.scrollTop;
}
function lockLeft(left)
{
if(left)
{
return (screen.availWidth - 777)/2 - 134;
}
else
{
return (screen.availWidth - 777)/2 + 770;
}
}
</script>
function lockTop()
{
var _body=document.body;
return _body.scrollTop;
}
function lockLeft(left)
{
if(left)
{
return (screen.availWidth - 777)/2 - 134;
}
else
{
return (screen.availWidth - 777)/2 + 770;
}
}
</script>
可以看到代码也变得很简单
<div id="flashRight">
</div>
<div id="flashLeft">
</div>
</div>
<div id="flashLeft">
</div>
具体效果可以到http://www.sjjyz.com上去看,这两天会把这个改动拿上去。