CSS expression VS Script event

国庆期间,手机加油站首页美工添加两个Flash,想实现随页面滚动的浮动效果。最初用JS的body onscroll事件实现,滚动时有卡顿感。后尝试用CSS的expression实现,效果更好且代码更简单,具体效果可到对应网址查看。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

国庆来了,手机加油站(http://www.sjjyz.com)的首页也想带给访问客人一点喜悦的感觉,于是美工做了两个flash分别放在网页的两边空白的地方,同时想让它们随页面滚动而滚动,有浮动的感觉。
在实现滚动的效果时,我开始按习惯用了js的事件body onscroll来做。但做好后发现在滚动时两个flash有点卡卡的感觉,像抽筋一样,给人感觉很不好,我就尝试着用css 的expression来实现效果,发现结果要好得多,抽筋的感觉一点也没有了。

代码如下:

None.gif         <style> 
ExpandedBlockStart.gifContractedBlock.gif            #flashRight 
{dot.gif} { POSITION: absolute; TOP: expression(lockTop());    LEFT:expression(lockLeft(false)); }  
ExpandedBlockStart.gifContractedBlock.gif            #flashLeft 
{dot.gif} { POSITION: absolute; TOP: expression(lockTop());    LEFT:expression(lockLeft(true)); }  
None.gif        </style> 


 

None.gif          < script language = " javascript " >  
None.gif        
function  lockTop() 
ExpandedBlockStart.gifContractedBlock.gif        
dot.gif
InBlock.gif            
var _body=document.body; 
InBlock.gif            
return _body.scrollTop; 
ExpandedBlockEnd.gif        }

None.gif        
function  lockLeft(left)
ExpandedBlockStart.gifContractedBlock.gif        
dot.gif {
InBlock.gif            
if(left)
ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{
InBlock.gif                
return    (screen.availWidth - 777)/2 - 134;
ExpandedSubBlockEnd.gif            }

InBlock.gif            
else
ExpandedSubBlockStart.gifContractedSubBlock.gif            
dot.gif{
InBlock.gif                
return    (screen.availWidth - 777)/2 + 770;        
ExpandedSubBlockEnd.gif            }

ExpandedBlockEnd.gif        }

None.gif        
</ script >  

 可以看到代码也变得很简单

None.gif          < div  id ="flashRight" >
None.gif            dot.gifdot.gif
None.gif         
</ div >
None.gif         
< div  id ="flashLeft" >
None.gif            dot.gifdot.gif
None.gif        
</ div >


具体效果可以到http://www.sjjyz.com上去看,这两天会把这个改动拿上去。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值