您现在的位置: 圆点视线 >> 教程 >> 网页设计 >> CSS样式表 >> 文章正文
[图文]Opera 中的 CSS 妙用 ── Flash block           ★★★
Opera 中的 CSS 妙用 ── Flash block
作者:网页教学…  文章来源:网页教学网  点击数:  更新时间:2007-10-24 18:36:01 
 页面功能:【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口 【字体:

其实 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);
}

[1] [2] 下一页

 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 文章录入:Rainsion    责任编辑:Rainsion  【字体:
 
  • 上一篇文章:

  •  
  • 下一篇文章:
  • 最新文章
    相关文章
    XHTML+CSS的目的和好处(WEB标准的目的和好处
    常见的CSS问题的“一站式”的解决方案
    国外译文:网页设计如何使用CSS的选择器模式
    CSS实现图片阴影效果三部曲(译文)
    CSS实现不定高度DIV绝对居中
    25条CSS制作网页编写的提醒及小技巧整理
    什么是用户定义的样式表?
    制作网页时手写CSS应该注意的一点技巧
    网页中用于构造图表的一些基本CSS代码
    ul和li标签结合CSS样式表的进行网页布局
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    发表评论:
     姓  名: 评 分: 1分 2分 3分 4分 5分
     评论内容: ·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
    ·用户需对自己在使用本网服务过程中的行为承担法律责任
    ·本站管理员有权保留或删除评论内容。
    ·评论内容只代表机友个人观点,与本网站立场无关。
     
    最 新 推 荐
     
    百度主题推广
    最 新 热 门