手机站
网通分站
电信主站
密 码:
用户名:
当前位置 : 主页>网页制作>css>列表

Opera 中的 CSS 妙用 ── Flash block

来源:互联网 作者:west263.com 时间:2008-02-23
西部数码-全国虚拟主机10强!40余项虚拟主机管理功能,全国领先!双线多线虚拟主机南北访问畅通无阻!免费赠送企业邮局,.CN域名,自助建站480元起,免费试用7天,满意再付款! P4主机租用799元/月.月付免压金!

其实 Opera 比 IE 或 Firefox 都更好用。User Style Sheet 和 User Script 就是很贴心的设计。

什么是用户脚本和用户样式表?

很多网页本身就夹带有脚本,样式表就更不用说了,但这些东西可能不太合你的胃口。有些脚本写得很糟糕,你肯定遇到过导致 CPU 占用率升到 100% (系统停滞了)的网页吧,多半是网页脚本捣的鬼。你可能还遇到过颜色搭配很差的网页,丑陋的就不说了,最差的是字体大小、颜色调得不好的,看这真是费眼啊。

Opera 就提供一种方式来解决此问题──用户脚本和用户样式表。只要你会写脚本和样式表,一切由你控制(不会写也不要紧,网上现成的多的是)。你不仅可以让浏览器对所有网页使用你的脚本和样式表,还可以对指定的网页使用指定的脚本和样式表。例如

这里介绍的 DIY Flash Block。

对 Flash 说再见

Flash 做的 MTV 曾经疯的流行过一阵,过了这阵风之后,Flash 愈发惹人厌了。现在网页里的 Flash 绝大多数都是广告,看着碍眼。

我记得 Firefox 有个扩展──好象叫 Flash Block。有了这个清道夫,网页上的 Flash 都被“屏蔽”了,原来是 Flash 的地方都变成了一个个按钮。如果你确定某个 Flash 特别有趣,想看看,按下相应的按钮,Flash 就有又出来了。

其实 Opera 也有这个功能,而且是与生俱来的,不依赖任何扩展。只要你会用用户脚本和用户样式表。

简简单单

下面就是在 Opera 实现 Flash Block 用到的脚本和样式表:

用户样式表:

embed[type="application/x-shockwave-flash"] {
content:"Flash";
outline: 1px dotted gray;
color: #CCCC00;
background-color: #FFF;
font: normal 16px sans-serif;
padding: 3px;
}
embed[type="application/x-shockwave-flash"].zichtbaar {
content: normal;
outline: none;
}

sup.btn {
border: 1px solid #f33;
color: #f33;
padding: 0 2px; margin: 0;
font-size: 10px;
}
sup.btn:hover {
border-color: #900;
color: #900;
}

用户脚本:

window.onclick=function() {
var srcElem = window.event.srcElement;
if ( srcElem.tagName == 'EMBED' ) {
srcElem.setAttribute("class", "zichtbaar");

if ( oCloseBtn == null ) {
var oCloseBtn = document.createElement("sup");
oCloseBtn.setAttribute("class", "btn");
oCloseBtn.setAttribute("onclick", "closeFlash(this)");
if ( oText == null ) {
var oText = document.createTextNode("X");
}
oCloseBtn.appendChild(oText);
}
else {
if ( oText == null ) {
var oText = document.createTextNode("X");
oCloseBtn.appendChild(oText);
}
}

srcElem.parentNode.parentNode.insertBefore(oCloseBtn, srcElem.parentNode.nextSibling);
}
}

function closeFlash(srcElem) {
srcElem.previousSibling.getElementsByTagName("EMBED")[0].setAttribute("class", "");
srcElem.parentNode.removeChild(srcElem);
}

效果图:

原来显示 Flash 的地方变空了。里面有个 |Flash| 按钮,点击它试试看。

Flash 又出来了,旁边(有时在下方)多了个红叉叉──再次关闭此 Flash 的按钮。

怎么使用用户脚本和用户样式表?答:Google 知道。(:P 对不起了,没时间写 Opera 的基础教程啊。深度论坛 Opera 版可能有些资料。要在以前,my.opera.com 里有中文用户论坛,看完里面的精华贴基本上就出师了,可惜被和谐了)

已经会用用户脚本和样式表、并且有闲的朋友可以继续看。

写在后面

关于 Opera 的 Flash Block,在网上可以搜出不少,雷同的居多。有些是纯用户样式表实现的,在 Opera 9 里已经不能用了。脚本和样式表配合用的还行:《Opera中用css过滤flash,点击可显示flash》。我就是参考他的。改进是添加了关闭按钮。其实纯用脚本实现也不错。

Opera 的官方论坛是知识汇聚的地方,现在和谐了。有个 Opera Browser Wiki 还不错,不怕英文的朋友可以去看看。

CSS 里有一类选择器:E[xxxxxx],一般网页里很少碰得到,在这个例子里可有用武之地了。

文章整理:西部数码--专业提供域名注册虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!