利用css裏expression來實現界面對象的批量控制
| <script type="text/javascript"> var arrBaiduCproConfig=new Array(); arrBaiduCproConfig['uid'] = 2214; arrBaiduCproConfig['n'] = 'sayyescpr'; arrBaiduCproConfig['tm'] = 48; arrBaiduCproConfig['cm'] = 100; arrBaiduCproConfig['um'] = 50; arrBaiduCproConfig['rad'] = 1; arrBaiduCproConfig['w'] = 336; arrBaiduCproConfig['h'] = 280; arrBaiduCproConfig['bd'] = '#ffffff'; arrBaiduCproConfig['bg'] = '#ffffff'; arrBaiduCproConfig['tt'] = '#0000ff'; arrBaiduCproConfig['ct'] = '#000000'; arrBaiduCproConfig['url'] = '#666666'; arrBaiduCproConfig['bdl'] = '#CCCCCC'; arrBaiduCproConfig['wn'] = 1; arrBaiduCproConfig['hn'] = 4; arrBaiduCproConfig['ta'] = 'center'; arrBaiduCproConfig['tl'] = 'top'; arrBaiduCproConfig['bu'] = 1; </script><script src="http://cpro.baidu.com/cpro/ui/ui.js" type="text/javascript"> </script><script type="text/javascript"> <!-- document.write(baiduCproIFrame()); --> </script> |
問題說明: 用過css樣式我們就知道, 可以定義一批對象的class屬性來指定同一個樣式來統一界面. 但如何統一同類型的對象的事件? 比如:界面有無數個 <img src="**.jpg"> 如何實現鼠標經過此圖片, 圖片的src變成是**_over.jpg?
解決方法: 使用css的expression方法,
具體實現要看看.css的寫法:
/*替換圖片CSS*/
#imgScript { /*這裏使用對象ID來通配樣式, 也可以定義一個css函數*/
star:expression(
onmouseover = function()
{
/*替換圖片*/
if(this.hover != null){
this.name = this.src;
this.src = this.src.replace('.jpg', '_over.jpg');
this.HasChg = 1;
}
},
onmouseout = function()
{
/*還原本來的圖片*/
if(this.HasChg != null){
this.src = this.name;
this.HasChg = null;
}
}
)
}/*end imgScript*/
應用樣式的img:
<img src="a.jpg">
請將鼠標放在a.jpg上看看效果
