按照ffish的方法做的，需要修改样式

Mar 27, 2007 Author: | Filed under: Uncategorized

</p> <p><script src="http://www.prototypejs.org/assets/2007/1/18/prototype.js" type="text/javascript"></script></p> <style type="text/css"> <p> #loading{</p> <p> position: absolute;</p> <p> top: 30%;</p> <p> left: 0%;</p> <p> height: 25%;</p> <p> width: 100%;</p> <p> text-align: center;</p> <p> line-height: 0;</p> <p> }</p> <p>#loadingback{</p> <p> position: absolute;</p> <p> top: 10%;</p> <p> left: 0%;</p> <p> height: 100%;</p> <p> width: 100%;</p> <p> text-align: center;</p> <p> line-height: 0;</p> <p> background-color:blue;</p> <p> opacity:.1;</p> <p> filter:alpha(opacity=10)</p> <p> }</p> </style> <p><script ></p> <p>function showSelectBoxes(){</p> <p> selects = document.getElementsByTagName("select");</p> <p> for (i = 0; i != selects.length; i++) {</p> <p> selects[i].style.visibility = “visible”;</p> <p> }</p> <p>}</p> <p>// —————————————————</p> <p>function hideSelectBoxes(){</p> <p> selects = document.getElementsByTagName(”select”);</p> <p> for (i = 0; i != selects.length; i++) {</p> <p> selects[i].style.visibility = “hidden”;</p> <p> }</p> <p>}</p> <p>function start()</p> <p>{</p> <p> //alert(’aaaa’);</p> <p> hideSelectBoxes();</p> <p> Element.show(’loadingback’);</p> <p> //Element.show(’loading’);</p> <p>}</p> <p>function end()</p> <p>{</p> <p> showSelectBoxes();</p> <p> Element.hide(’loadingback’);</p> <p>}</p> <p></script></p> <p><body></p> <div id="loadingback" style="display:none;"> <div id="loading" style=""> <p> <img src="images/loading.gif"></p> </div> </div> <p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p> <p><button onclick="start()">test</button> <button onclick="end()">end test</button></p> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试<br /> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <p></body></p> <p></html></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

现在的问题是，我怎么把loadingback设置为半透明？ loading背景全透明

ffish添加: 你要的是这个效果吗?

</p> <p><script src="http://www.prototypejs.org/assets/2007/1/18/prototype.js" type="text/javascript"></script></p> <style type="text/css"> <p>#content</p> <p>{</p> <p> position:absolute;</p> <p>}</p> <p>#loadingback{</p> <p> position: relative;</p> <p> z-index:2;</p> <p> top: 0;</p> <p> left: 0;</p> <p> height: 100%;</p> <p> width: 100%;</p> <p> text-align: center;</p> <p> background-color:blue;</p> <p> opacity:.5;</p> <p> filter:alpha(opacity=50);</p> <p>}</p> <p>#loading{</p> <p> position: absolute;</p> <p> z-index:3;</p> <p> top: 100px;</p> <p> left: 100px;</p> <p> height: 30%;</p> <p> width: 30%;</p> <p> text-align: center;</p> <p> border:solid 1px red;</p> <p> background-color:yellow;</p> <p>}</p> </style> <p><script ></p> <p>function start()</p> <p>{</p> <p> Element.show('loadingback');</p> <p> Element.show('loading');</p> <p>}</p> <p>function end()</p> <p>{</p> <p> Element.hide('loadingback');</p> <p> Element.hide('loading');</p> <p>}</p> <p></script></p> <p><body></p> <div id="content">网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页<br /> <select><option>12333333333333333333333333333333333333333333333333</option></select> <select><option>12333333333333333333333333333333333333333333333333</option></select> <p>内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容网页内容</p> <p><button onclick="start()">test</button> </div> <div id="loadingback" style="display:none;"></div> <div id="loading" style="display:none;"> Loading….<button onclick="end()">end test</button></div> <p></body></p> <p></html></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

要注意的几个地方:

1. 内容需放到一个单独的div里,并设为绝对定位,(z-index=0缺省)

2. loadingback要设为全屏大小,以覆盖整个背景内容

3. loading的z-index值要设的比loadingback大

4. content,loadingback,loading为平行关系,不是包含关系

在这种实现中, 包含背景内容的div收不到鼠标事件, 所以不需要特殊处理其中的控件, flash会怎样没有测试过.

Flickr PhotoStream

郭爽的网页设计资料

按照ffish的方法做的，需要修改样式

Leave a reply

Flickr PhotoStream

Recent Posts

Recent Comments

Pages

Categories

Tags

Archives

Blogroll

Meta

Advertising

Most Popular

Recent Comments

Latest Entries