一个桌面播放器,html+script

更新时间：2016年9月20日 19:06 点击：1219

<html>
<head>
<title>ThreeAnts Player</title>
<base target="_self">
<meta name="author" content="episome">
<meta name="keywords" content="Player,cdf,desktop toy">
</head>
<style>
body{
border:#0099cc 2px solid;
background-color:WhiteSmoke;
margin:5px;
}
body,td{
font-family:Tahoma,Georgia;
font-size: 8pt;
white-space: nowrap;
}
#percent{
font-size:7pt;
color:green;
font-weight: bold;
}
.ctrlBar td{
filter: Alpha(Opacity=100, FinishOpacity=30, Style=1, StartX=0, StartY=0, FinishX = 0, FinishY = 50);
font-weight: bold;
font-size: 7pt;
color:darkblue;
border:#0099cc 1px solid;
background-color:#FFF;
}
A:visited,A:link{
color:darkblue;
cursor: hand;
text-decoration: none;
}
A:hover{
color:red;
cursor: hand;
text-decoration: none;
}
.content td{
width:100%;
table-layout: fixed;
filter: Alpha(Opacity=100, FinishOpacity=40, Style=1, StartX=0, StartY=0, FinishX = 0, FinishY = 50);
cursor: hand;
border:#0099cc 1px solid;
border-top:0px;
background-color:white;
height: 24px;
}
.hilite_content td{
width:100%;
table-layout: fixed;
color:red;
cursor: hand;
border-right:#0099cc 1px solid;
border-left:#0099cc 1px solid;
border-bottom:#0099cc 1px solid;
background-color:#ddedfb;
height: 24px;
}
</style>
<script language="JavaScript">
var scrollcount=0;
var dragy;
var scrollarrowtop;
function initdrag() {
scrollcount=1;
dragy=event.clientY;
document.body.setCapture();
}
function startdrag() {
if (scrollcount==1) {
  window.scrollBy(0,dragy-event.clientY);
  document.body.style.cursor='hand';
  dragy=event.clientY;
}
}
function enddrag() {
document.body.style.cursor='';
scrollcount=0;
document.body.releaseCapture();
}
</script>
<body
scroll=no
ondragstart = "return false;"
onselect = "return false;"
onselectstart="return false;"
onmousedown="initdrag()"
onmousemove="startdrag()"
onmouseup="enddrag()"
>
<script>
var PlayType = ",wma,wmv,avi,mpg,mpeg,m1v,mp2,wav,mp3"
var nowPlayingID
var lastSelected
var lastPlayed

<html>
<head>
</head>
<body>
<marquee behavior="alternate" height="400" direction="up" scrollamount="3" scrolldelay="30" width="500" bgcolor="#3399FF">
<marquee behavior="alternate" height="50" direction="left" scrollamount="3" scrolldelay="30" width="100%">
<font style="font-size: 35px">MARQUEE</font>
</marquee>
</marquee>
</body>
</html>

在微软IE 5.0版本的浏览器发布以前，网页编程中面对的最大挑战就是不能轻易地创建组件，以达到代码重用和多页面共享的目的。这个问题一直困扰着DHTML（动态 HEML）的网页编程者。他们只能不断地重复书写HTML、CSS和javascript的代码，以满足多个页面上的重复或相似的功能。自IE 5.0浏览器发布后，这种情况得到了改善，它带给我们一个新的指令组合方法，可把实现特定功能的代码封装在一个组件内，从而实现多页面的代码重用，使网页编程进入一个全新的天地。这个新的技术就是我们要谈到的DHTML中的“行为”（Behaviors）。
　　“行为”作为一个简单易用的组件，它封装了页面上特定的功能或动作。当把一个“行为”附到WEB页面中的一个元件上时，这个元件的原有行为就会有所改变。因此，网页编程者可以开发通用的DHTML指令，并改变原有对象的一些属性，用“行为”来增强一个对象的功能，同时也简化了页面的HTML代码。而且“行为”的创建和使用也非常简单方便，所需的知识也只是原来已经习惯使用的CSS样式表、HTML指令和javascript脚本语言。只要你对此有所了解，有过实际编程的经历，学习并掌握“行为”的使用完全没有问题。我们将以一个改变字体效果的“行为”组件为例来说明如何编写和使用一个“行为”，并体验“行为”给页面编辑带来的优点和方便之处。

　　首先新建一个名为font_efftce.htc的文本文件，组成“行为”组件的文件都是以.htc为扩展名，这个文件中的内容就是我们对这个“行为”的描述。它的创建和使用步骤如下：
（1）首先给这个“行为”增加几个事件响应，语句书写格式如下：
< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()" / >
< PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >
　　“EVENT”对应所需事件名，在这里分别为：onmouseover,onmouseout,onmousedown,onmouseup四个事件名，你当然可以再增加其它的事件名来满足你的特定需求。“ONEVENT”对应着个自的事件句柄，即事件触发时所调用的函数名称。glowit()函数使字体周围产生一个红色的辉光。noglow()函数是消除字体的辉光效果。Font2yellow()函数是把字体颜色改为黄色。Font2blue()函数是把字体颜色改为蓝色。四个事件的定义都是相似的。
（2）接下来，再给这个“行为”增加二个“方法”定义，内容如下。
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME="move_right" / >
　　“NAME”参数对应的是给定的“方法”名称。move_down和move_right分别是向下和向右移动的“方法”对应的函数名称。注意，在方法名的后面不要带“( )”括号，即不要写成“move_down()”这个样子，这在“方法”定义的语法上是不允许的。

（3）接下来的工作就是在我们熟悉的DHTML环境下，用javascript脚本语句编写“事件句柄”和“方法”所对应的函数内容，实现预期的效果。具体内容参考下面的源程序。其中的“element”参数指的是这个“行为”所附着的对象，因为“行为”总是被附着到页面的元件上面，并通过这个元件发挥作用。其它语句都是DHTML的编程内容，就不再多说了。如有不明之处，可参考微软的MSDN开发文档中有关IE浏览器的内容，上面有详细的DHTML编程参考内容、属性和方法使用说明等，并包含了大量的文章和举例程序。经常访问微软的MSDN文档，尤其对于初学者来说是一个良好的学习习惯，你几乎可以得到任何你想找的答案，它的网址为：http://msdn.microsoft.com/ie/。
　　完整的“行为”文档“font_effect.htc”的内容如下：
////////////////////////////“行为”文档开始///////////////////////////////////
//给“行为”增加四个鼠标事件
< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()" / >
< PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >
//给“行为”定义二个方法
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME="move_right" / >
< SCRIPT LANGUAGE="JScript" >
//定义一个保存字体颜色的变量
var font_color;
//定义向下移动文字的方法
function move_down()
{
element.style.posTop+=2;
}
//定义向右移动文字的方法
function move_right()
{
element.style.posLeft +=6;
}
//定义鼠标onmouseup事件的调用函数
function font2blue(){
if (event.srcElement == element)
{
element.style.color='blue';
}
}
//定义鼠标onmousedown事件的调用函数
function font2yellow(){
if (event.srcElement == element)
{
element.style.color='yellow';
}
}

//定义鼠标onmouseover事件的调用函数
function glowit()
{
if (event.srcElement == element)
{
font_color=style.color;
element.style.color='white';
element.style.filter="glow(color=red,strength=2)";
}
}

//定义鼠标onmouseout事件的调用函数
function noglow()
{
if (event.srcElement == element)
{
element.style.filter="";
element.style.color=font_color;
}
}
< /SCRIPT >
//////////////////“行为”文档结束///////////////////////////////

（4）如何在一个页面上使用“行为”
　　在页面上使用“行为”组件，并不需要学习新的知识。所需的知识的也不过是CSS样式表和HTML的设置而已，请看下面的语句。
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
< /STYLE >
　　可以看出，这和以前我们已经熟知的样式表设置完全相同。上面的语句定义了一个样式名：“myfilter”，其中对我们来说比较新的内容是：“behavior:url(font_effect.htc);”，“behavior”是新增的“行为”属性名，这就是“行为”在样式表中的设置方式。括号中的内容是“行为”文档的文件名，本例中表明“行为”文档在与页面文件在同一个目录下，如果“行为”文档安置在其它目录下，在此参数的前面要加上相应的路径名，以保证可以正确地定位“行为”文档的位置。此“样式”中的其它内容就是普通的样式属性设置，可根据你的需要增减，但在此例中，由于使用了“glow”滤镜效果，至少要设置一个宽度（width）属性。通过以上的样式指定，我们就有了一个名为：“myfilter”的样式，它附带一个有字体变化效果的“行为”。如果你想要在一个页面元件上使用这个附带“行为”的样式，同样也很简单，只要把这个“样式名”安置在元件的属性设置区域即可，见下面的语句。
< span id="myspan" class='myfilter' >行为产生的文字效果< /span >< br >
< span class='myfilter' >鼠标指向后产生辉光< /span >
　　以上语句里面没有什么新的内容，class='myfilter'就是我们所熟悉的样式设置。在第一个“span”标记的属性中还定义了一个“id”标记，稍后就会看到，这是用来演示调用“行为”内的“方法”而设置的。这样设置后，“span”元件中的内容就可以显示出“行为”组件内的预定效果：
1．鼠标指针移动到文字内容上时，在文字周围产生红色的辉光效果，同时文字变成白色。
2．当鼠标按钮按下时，文字颜色改变为黄色。
3．鼠标按钮抬起后，文字颜色又改变为蓝色。
4．当鼠标指针移动到文字区域以外时，去掉了红色辉光效果，文字恢复原样。
　　另外，我们在定义“行为”时设置了二个“方法”，“move_down”和“move_right”。为调用这二个“方法”，定义了二个按钮：
< button onclick="myspan.move_right();" >向右移动第一行文字< /button >< br >
< button onclick="myspan.move_down();" >向下移动第一行文字< /button >
　　用按钮的onclick事件去调用这二个“方法”，先前定义的“id”标记就作为元件的对象名称，用“myspan.move_down”来调用“方法”，操纵这个对象。可以看到，在按下相应的按钮后，会使第一行的文字产生向下或向右的移动。虽然只是用第一行文字做了示范，实际上，只要做相应的设置，你也可以移动其它对象。页面源文档的完整内内容如下：
< html >
< HEAD >
< TITLE >行为效果演示< /TITLE >
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
< /STYLE >
< /HEAD >
< BODY >
< span id="myspan" class='myfilter' >行为产生的文字效果< /span >< br >
< span class='myfilter' >鼠标指向后产生辉光< /span >< br >
< span class='myfilter' >同时文字变白< /span >< br >
< span class='myfilter' >按下鼠标后文字变黄< /span >< br >
< span class='myfilter' >抬起鼠标后文字变蓝< /span >< br >
< span class='myfilter' >鼠标离开后文字恢复原状< /span >< br >
< button onclick="myspan.move_right();" >向右移动第一行文字< /button >< br >
< button onclick="myspan.move_down();" >向下移动第一行文字< /button >
< /BODY >
< /html >
　　通过以上的简单介绍，可以看出，我们很容易地在一个“行为”中同时组合了多种文字变化效果，通过简单的“样式”设置，任意地将它与页面元件相关连，体现了“行为”组件的优点和强大功能。一个“行为”组件，不仅能在一个页面内重复使用，也可供同一站点上的所有页面使用。试想一下，如果不使用“行为”来完成上述的效果，虽然可以在页面内调用一组预定的函数来完成同样的功能，但页面内每一个使用文字效果的元件都要附加四个鼠标事件，如果在多个页面内使用相同的效果，被调用的函数也需要在每一个页面内重复设置。相比之下，孰优孰劣是很明显的。所以，使用“行为”组件，可以制作出简洁、高效、通用和便于维护的页面。本文的举例只是为了说明“行为”组件的编写和使用过程，使读者对“行为”编程有一个概括的了解，并以此基础制作出自己所需要的“行为”组件，或直接引用满足个人需要的现成“行为”组件，因为“组件共享”的概念也是“行为”开发者的初衷。最后，愿本文能起到“抛砖引玉”的目的，使读者步入精彩的DHTML网页编程天地。

说明:
HTC是HTML component的缩写,
是IE5.0的主要扩展之一,
除了具备一般组件的可重用优点之外,
还具有易于开发使用等优点,
因为需要引入外部文件,这里就不举例了,宝库里有例子.

控件和组件
HTC提供了一个简单机制以在脚本中实现DHTML行为。一个HTC文件和HTML文件没有任何差别，并且以“.htc”为后缀，

可以使用HTC实现以下行为：
设定属性和方法。通过“PROPERTY”和“METHOD”元素定义
设置自定义事件。通过“EVENT”元素实现，用该元素的“fire()”方法释放事件，
通过“createEventObject()”方法设置事件环境。
访问所包含该HTC的的HTML页的DHTML对象模型，使用HTC的“element"对象，返回
一个附加行为的元素，使用该对象，HTC可以访问包含文挡及它的对象模型（属性、方法、事件）。
收取通知，使用”ATTACH“元素实现，浏览器不但通知HTC标准的DHTML事件，而且通知HTC两种特殊事件：oncontentready事件和ondocumentready事件。

定义标记和命名空间
HTC的基础是自定义标记
要为页面定义自定义标记，必须为该标记提供命名空间
要使用该标记必须在该标记前加上正确的XML命名空间前缀
例如:

定义一个新标记RIGHT的例子
代码片断如下：<HTML XMLNS:DOCJS>
<HEAD>
<STYLE>
@media all {
DOCJS:RIGHT {text-align:right; width:100}
}
</STYLE>
</HEAD>
<BODY>
<DOCJS:RIGHT>
Read Doc JavaScript's columns, tips, tools, and tutorials
</DOCJS:RIGHT>
</BODY>
</HTML>

可以在单个HTML标记
中定义多个命名空间：
<HTML XMLNS:DOCJS XMLNS:DOCjavascript>

组件定义
组件的名字是由HTC文档里定义在第一行的XML命名空间决定的
该页不用调用其他的HTC话,就只有一个命名空间定义
实际上，HTML组件的定义就是自定义标签行为的定义
该行为包括一个属性和一个事件：

<HTML xmlns:MyTag>
<HEAD>
<PUBLIC:COMPONENT tagName="MyTag">
<PROPERTY NAME="value"></PROPERTY>
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"<>/ATTACH>
</PUBLIC:COMPONENT>
<STYLE>//为组件定义样式表
.cssMyTag{
}
</STYLE>
<SCRIPT language=javascript>
function MyTagBehavior1(){} //为组件定义方法
</SCRIPT>
</HEAD>
<BODY onclick=MyTagBehavior1> //为组件定义响应事件
</BODY>
</HTML>

其中的oncontentready是在组件被调用者完全导入时触发
再看看fnInit()

function fnInit() {
document.body.innerHTML = element.value;//设定组件显示内容
document.body.className = "clsMyTag"; //设定显示样式表,
defaults.viewLink = document; //使本组件对其他文档可见
element.aProperty = element.value; //设置组件的属性值
}

组件的调用

<HTML xmlns:MyCom>
<HEAD>
<?IMPORT NAMESPACE="MyCom" IMPLEMENTATION="MyTag.htc"/>
</HEAD>
<BODY>
<MyCom:MyTag></MyCom:MyTag>
</BODY>
</HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New document</title>
<style type="text/css">

</style>
</head>
<body>
<div id="div1">
Gradient滤镜效果。
</div>
</body>
</html>

1.加入收藏,设为首页:

<a href="javascript:window.external.AddFavorite('http://www.bydragon.com','百龙设计工作室')">加入收藏</a>

<a
href="#"
onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http:
//www.bydragon.com');">设为首页</a>

2.2秒后关闭当前页:
<script language="JavaScript">

</script>

3.IE地址栏前换成自己的图标:
在首页<head></head>之间加上如下代码
<link rel="Shortcut Icon" href="favicon.ico">

4.在收藏夹中显示出你的图标:
在首页<head></head>之间加上如下代码
<link rel="Bookmark" href="favicon.ico">

5.改变滚动条颜色:
在首页<head></head>之间加上如下代码
<style>
body{
scrollbar-face-color:147faf; scrollbar-shadow-color:147faf;
scrollbar-highlight-color:147faf; scrollbar-3dlight-color:ffffff;
scrollbar-darkshadow-color:ffffff; scrollbar-track-color:ffffff;
scrollbar-arrow-color:ffffff;}
</style>

scrollbar-face-color表示滚动条面的颜色
scrollbar-shadow-color表示滚动条右斜面的颜色
scrollbar-highlight-color表示滚动条左斜面的颜色
scrollbar-3dlight-color表示滚动条上边和左边边沿的颜色
scrollbar-darkshadow-color表示滚动下边和右边边沿的颜色
scrollbar-track-color表示滚动条底板的颜色
scrollbar-arrow-color表示滚动条两端箭头的颜色

6.鼠标移到单元格颜色改变:
<table width=200><tr>
<td
bgcolor="#738278" style="cursor:hand"
onMouseOver="this.style.backgroundColor='red'"
onMouseOut="this.style.background='#738278'">移

[!--infotagslink--]

上一篇: iframe 的用法与注意事项

下一篇: ASP操作xml--显示xml文件中的所有节点

如何使用JavaScript实现无缝滚动自动播放轮播图效果
这篇文章主要介绍了如何使用JavaScript实现“无缝滚动自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-08-20
远程桌面一连就断的解决方法(经常掉线)
远程桌面一连就断..到网上转了一大个圈回来终于找到解决方法....2016-01-27
C#实现刷新桌面的方法
这篇文章主要介绍了C#实现刷新桌面的方法,涉及C#基于shell32.dll动态链接库实现系统桌面刷新的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
详解Howler.js Web音频播放终极解决方案
这篇文章主要介绍了详解Howler.js Web音频播放终极解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-08-24
vue+video.js实现视频播放列表
这篇文章主要为大家详细介绍了vue+video.js实现视频播放列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-10-29
原生JS实现音乐播放器
这篇文章主要为大家详细介绍了原生JS音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-01-26
jQuery开发仿QQ版音乐播放器
这篇文章主要介绍了jQuery开发仿QQ版的音乐播放器，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-10
c#实现windows远程桌面连接程序代码
本篇文章主要介绍了c#实现windows远程桌面连接程序代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
WINDOWS 2008 r2 远程桌面账户登录限制(一个帐户两个人使用)
在WINDOWS 2008 R2中，一个帐户是只能默认开启一个远程登录会话，有时候我们需要两个人同时登录服务器就会被挤掉，那么参考下面的方法设置一下即可,需要的朋友可以参考下...2017-07-06
Vue+node实现音频录制播放功能
这篇文章主要介绍了Vue+node实现音频录制播放,功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-03-25
Win2012服务器远程桌面帐户允许多用户同时登录的配置方法
这篇文章主要介绍了Win2012服务器远程桌面帐户允许多用户同时登录的配置方法,需要的朋友可以参考下...2016-11-01
Android GSYVideoPlayer视频播放器功能的实现
这篇文章主要介绍了Android GSYVideoPlayer视频播放器功能的实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-03-31
通过软件修改Win2008默认远程桌面连接端口3389
这篇文章主要介绍了通过软件修改Win2008默认远程桌面连接端口3389,需要的朋友可以参考下...2016-10-02
vue项目中播放rtmp视频文件流的方法
这篇文章主要介绍了vue项目中播放rtmp视频文件流 ,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-09-17
基于jQuery实现音乐播放试听列表
这篇文章主要介绍了基于jQuery实现音乐播放试听列表的相关资料,需要的朋友可以参考下...2016-04-17
html5中嵌入视频自动播放的问题解决
这篇文章主要介绍了html5中嵌入视频自动播放的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-30
Android小程序实现音乐播放列表
这篇文章主要为大家详细介绍了Android小程序实现音乐播放列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-05-23
php获取优酷土豆页面中视频swf播放器地址
下面我来给各位同学介绍一个php获取优酷土豆页面中视频swf播放器地址，临时写的不够完善各位朋友可完善与我分享哦。代码如下复制代码项...2016-11-25
解析WPF实现音频文件循环顺序播放的解决方法
本篇文章是对WPF实现音频文件循环顺序播放的方法进行了详细的分析介绍，需要的朋友参考下...2021-09-22
WinForm实现仿视频播放器左下角滚动新闻效果的方法
这篇文章主要介绍了WinForm实现仿视频播放器左下角滚动新闻效果的方法,涉及WinForm窗口滚动字幕设置的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25

一个桌面播放器,html+script

相关文章

阁下可能感兴趣的内容

推荐阅读