<html>
<head>
<title>播放器 By Roger Li</title>
<script language="javascript">
function goto(t)
{
t.setCapture();
var ox=event.clientX;
foreDiv.style.width = ox-138;
t.releaseCapture();
}
function updatetime()
{
// 一秒钟的长度
var unit = 500/30;
var currentPosition = parseInt(foreDiv.style.width);
if (currentPosition < 500)
{
if (currentPosition + unit > 500)
{
foreDiv.style.width = 500;
point.style.left = 485;
}
else
{
foreDiv.style.width = currentPosition + unit;
point.style.left = currentPosition + unit - 15;
}
setTimeout("updatetime()",1000);
}
else
{
foreDiv.style.width = 0;
point.style.left = 0;
}
}
</script>
</head>
<body onload="updatetime();">
<div style="HEIGHT:16px; position:absolute; left:136px; bottom:13px; width:500px; z-index:1; border:1px solid blue;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align=left valign="baseline" style="cursor:hand" onmouseout="noshowtime()" onmousemove="showtime(this)" onclick="goto(this)">
<div id="foreDiv" style="background-color:lightblue;HEIGHT:16px; position:absolute; left:0px; top:0px; width:1px; z-index:1;">
</div>
<div id="point" style="background-color:green;HEIGHT:16px; position:absolute; left:0px; top:0px; width:15px; z-index:1;">
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
分享到：
相关推荐
Flash 中制作带播放进度条的动画 本资源摘要信息将详细介绍 Flash 中制作带播放进度条的动画的知识点。 一、插入影片剪辑和制作动画 在 Flash 中，首先需要插入一个影片剪辑，并在其中制作一段动画。动画的时间...
android自定义环形播放进度条源码，供需要的人下载。
接下来说一说我的思路，上面的进度拖动条有自定义的Thumb，在Thumb正上方有一个PopupWindow窗口，窗口里面显示当前的播放时间。在SeekBar右边有一个文本框显示当前播放时间/总时间。 step1、先来看一看PopupWindow...
其次，播放进度条的显示需要实时更新播放状态。这可以通过监听`MediaPlayer`的`onProgressUpdate()`回调来实现，该回调会在播放过程中周期性地触发，提供当前的播放位置和总长度。开发者可以将这些信息传递给UI，...
在这个场景中，我们关注的是`JQuery`在移动端实现视频播放进度条的功能，这包括可拖拽和点击的操作，以及时间的显示与转换。 首先，让我们了解`JQuery`如何实现播放进度条的基本原理。进度条通常由一个HTML元素（如...
本项目“jQuery带播放进度条水平时间轴”是利用jQuery实现的一个功能丰富的界面元素，旨在为用户提供一种直观的时间线展示方式，同时结合播放进度，使用户能够清晰地看到时间轴上的日期、星期以及当前播放的位置。...
在这个“jQuery带播放进度条水平时间轴”的项目中，我们重点关注的是如何利用这些技术来创建一个功能丰富的交互式用户体验。下面将详细阐述这个项目中涉及的核心知识点。 1. **jQuery库**：jQuery是一个广泛使用的...
《jQuery可拖动播放进度条插件：实现与优化详解》 在网页开发中，用户交互体验至关重要，其中，媒体播放器的控制功能是提升用户体验的重要环节。jQuery作为一个轻量级、高性能的JavaScript库，提供了丰富的API和...
《jQuery带播放进度条水平时间轴特效源码详解》 在网页开发中，为了提升用户体验，经常需要添加各种动态效果，比如播放进度条和时间轴特效。本篇文章将深入解析"jQuery带播放进度条水平时间轴特效源码"，帮助开发者...
本示例关注的是“自定义圆形播放进度条”，它不同于系统默认的那种持续转动的圆形进度条，而是呈现出一种更加独特、直观的视觉效果。 自定义圆形播放进度条的核心在于创建一个自定义View，这个View需要继承自...
在音乐播放应用中，制作一个音乐播放进度条是至关重要的功能，它能让用户直观地了解歌曲的播放状态。本文将详细讲解如何实现这样的功能，主要针对MP3格式的音频文件。 首先，我们要理解音乐播放进度条的基本原理。...
这个“jQuery带日期的时间轴播放进度条特效代码”是一个利用jQuery实现的特定功能，适用于创建具有时间轴和播放进度条效果的网页应用，常见于多媒体播放器或者数据展示页面。 在这款特效中，时间轴通常表现为一条...
自定义view 实现音乐播放进度条，可以快进快退
在iOS开发中，创建一个仿网易云音乐的播放进度条是一项常见的任务，它涉及到UI设计、动画处理以及用户交互等多个方面。在这个项目中，我们主要关注三个方面：播放状态的显示、进度条的拖动功能以及视觉效果的实现。 ...
**jQuery可拖动播放进度条插件** 在Web开发中，为音频或视频元素添加自定义的播放进度条是提高用户体验的重要方式。jQuery提供了一种简单而强大的方式来实现这样的功能，通过创建交互式的拖动进度条，用户可以直观...
在本示例中，我们可能看到的是如何使用`Position`属性来创建一个自定义的播放进度条，以直观地显示媒体的播放状态。 创建播放进度条首先需要一个TProgressBar组件，它是Delphi中的标准控件，用于显示进度或状态。...
这个"jQuery实现的可拖动播放进度条特效源码.zip"压缩包包含了一个利用jQuery来创建可拖动播放进度条的示例代码。这个功能常见于音乐播放器、视频应用或者任何需要用户自定义播放进度的场景。 首先，让我们深入理解...