js封装、简单实例源码记录

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

1、运动封装：doMove ( obj, attr, dir, target, endFn ) 加入回调、&&、||用法注释

通用动画js

2、ajax封装

ajax封装

//最好将监听放在open、send方法前面调用。xhr.onreadystatechange=function(){...};

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="ajax.js"></script>
<script>
window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { /*ajax({
url : 'getNews.php',
success : function(data) {
//...
}
});*/ ajax('get','getNews.php','',function(data) {
var data = JSON.parse( data ); var oUl = document.getElementById('ul1');
var html = '';
for (var i=0; i<data.length; i++) {
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html;
}); setInterval(function() {
ajax('get','getNews.php','',function(data) {
var data = JSON.parse( data ); var oUl = document.getElementById('ul1');
var html = '';
for (var i=0; i<data.length; i++) {
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html;
});
}, 1000); }
}
</script>
</head><body>
<input type="button" value="按钮" id="btn" />
<ul id="ul1"></ul>
</body>
</html>

定时刷新

3、定宽瀑布流

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body {margin: ;}
#ul1 {width: 1080px; margin: 100px auto ;}
li { width: 247px; list-style: none; float: left; margin-right: 10px; }
li div {border: 1px solid #; padding: 10px; margin-bottom: 10px;}
li div img { width: 225px; display: block;}
</style>
<script src="ajax.js"></script>
<script>
window.onload = function() {
var oUL=document.getElementById('ul1');
var aLi=oUL.getElementsByTagName('li');
var iPage=;
var b = true; getList(); function getList() { ajax('get', 'getPics.php', 'cPage='+iPage, function(data){ var data=JSON.parse(data); if ( !data.length ) {
//后续没有数据了
return ;
} for(var i=; i<data.length; i++) {
//获取高度最短的li
var _index = getShort(); //创建3个节点div/img/p
var oDiv = document.createElement('div');
var oImg = document.createElement('img');
var oP = document.createElement('p');
oImg.src = data[i].preview;
oImg.style.width = '225px';// 同比例缩放
oImg.style.height = data[i].height * ( / data[i].width ) + 'px';
oDiv.appendChild( oImg );
oP.innerHTML = data[i].title;
oDiv.appendChild( oP );
//最后节点永远放在高度最小的那列
aLi[_index].appendChild( oDiv );
}
b=true;
});
} window.onscroll = function() {
var _index = getShort();
var oLi = aLi[_index]; var scrollTop=document.body.scrollTop||document.documentElement.scrollTop; if(getTop( oLi ) + oLi.offsetHeight < document.documentElement.clientHeight + scrollTop) {
if(b) {
b=false;
iPage++;
getList();
}
} }; function getShort(){
var index=;
var s=aLi[index].offsetHeight;
for(var i=; i<aLi.length; i++) {
if(s>aLi[i].offsetHeight) {
index=i;
s=aLi[i].offsetHeight;
}
}
return index;
} //最小的高度obj的top值
function getTop(obj) {
var iTop = ;
while(obj) {
iTop += obj.offsetTop;
obj = obj.offsetParent;
}
return iTop;
}};
</script>
</head><body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

ajax定宽瀑布流

4、ajax留言（调用后台）

另外跨域域名下加'Access-Control-Allow-Origin' 'http://www.a.com'; //这是允许访问该资源的域（服务器设置响应头信息，标准支持，ie不支持）

jsonp解决跨域

//ie支持此种跨域，标准不支持
  var oXDomainRequest = new XDomainRequest();
  oXDomainRequest.onload = function() {
   alert(this.responseText);
  }
  oXDomainRequest.open('get', 'http://www.b.com/ajax.php', true);
  oXDomainRequest.send();

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 300px; height: 30px; border: 1px solid #000; position: relative;}
#div2 {width: 0; height: 30px; background: #CCC;}
#div3 {width: 300px; height: 30px; line-height: 30px; text-align: center; position: absolute; left: 0; top: 0;}
</style>
<script>
window.onload = function() { var oBtn = document.getElementById('btn');
var oMyFile = document.getElementById('myFile');
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3'); oBtn.onclick = function() { //alert(oMyFile.value); //获取到的是file控件的value值，这个内容是显示给你看的文字，不是我们选择的文件 //oMyFile.files file控件中选择的文件列表对象
//alert(oMyFile.files); //我们是要通过ajax把oMyFile.files[0]数据发送给后端 /*for (var attr in oMyFile.files[0]) {
console.log( attr + ' : ' + oMyFile.files[0][attr] );
}*/ var xhr = new XMLHttpRequest(); //
xhr.onload = function() {
//alert(1);
//var d = JSON.parse(this.responseText); //alert(d.msg + ' : ' + d.url); alert('OK,上传完成');
} //获得ajax上传对象upload。
var oUpload = xhr.upload;
oUpload.onprogress = function(ev) {
//console.log(ev.total + ' : ' + ev.loaded);
//上传比例,loaded 已经上传大小， total总大小
var iScale = ev.loaded / ev.total;
oDiv2.style.width = 300 * iScale + 'px';
oDiv3.innerHTML = Math.floor(iScale * 100) + '%'; }
//上传一般都用post上传
xhr.open('post', 'post_file.php', true);
//设置发送文件的请求头
xhr.setRequestHeader('X-Request-With', 'XMLHttpRequest;');
var oFormData = new FormData(); //通过FormData来构建提交数据
oFormData.append('file', oMyFile.files[0]);
xhr.send(oFormData); }}
</script>
</head><body>
<input type="file" id="myFile" /><input type="button" id="btn" value="上传" />
<div id="div1">
<div id="div2"></div>
<div id="div3">0%</div>
</div>
<form action="pp_files.php" method="post" enctype="multipart/form-data">

</form>
</body>
</html>

ajax上传文件

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言本</title>
<link rel="stylesheet" href="css.css" type="text/css" />
<script src="ajax.js"></script>
<script src="guestbook.js"></script>
</head><body>
<div id="header"></div> <div id="container"> <div id="list">

</div>
<div id="showMore">显示更多...</div> <div id="sidebar"> <div id="user" style="margin-bottom: 10px;">
<h4><span id="userinfo"></span> <a href="" id="logout">退出</a></h4>
</div> 
<div id="reg">
<h4>注册</h4>
<div>
<p>用户名：<input type="text" name="username" id="username1"></p>
<p id="verifyUserNameMsg"></p>
<p>密码：<input type="password" name="password" id="password1"></p>
<p><input type="button" value="注册" id="btnReg" /></p>
</div>
</div> 
<div id="login">
<h4>登陆</h4>
<div>
<p>用户名：<input type="text" name="username2" id="username2"></p>
<p>密码：<input type="password" name="password2" id="password2"></p>
<p><input type="button" value="登陆" id="btnLogin" /></p>
</div>
</div> 
<div id="sendBox">
<h4>发表留言</h4>
<div>
<textarea id="content"></textarea>
<input type="button" value="提交" class="btn1" id="btnPost" />
</div>
</div>
</div> </div></body>
</html>

留言HTML

留言ajax

5、canvas旋转并缩放

window.onload=function(){
var can=document.getElementById('canvas');
var canvas=can.getContext('2d');
var num=0;
var num2=0;
var value=1;
canvas.translate(100,100); setInterval(function(){
num++;
canvas.save();
canvas.clearRect(0,0,can.width,can.height);
if(num2==100) vlaue=-1;
else if(num2==0) value=1;
num2+=value;
canvas.translate(-50,-50);
canvas.rotate(num*Math.PI/180);
canvas.scale(num2*1/50,num2*1/50);
canvas.fillRect(0,0,100,100,false);
canvas.restore();
canvas.stroke();
}, 30);};

旋转缩放

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
var aInput=document.getElementsByTagName('input');
var oImg=document.getElementById('img1'); var yImg=new Image(); yImg.onload=function() {
draw(oImg);
}; yImg.src=oImg.src; function draw(obj){
var oC=document.createElement('canvas');
var canvas=oC.getContext('2d');
var iNow=1;
oC.width=obj.width;
oC.height=obj.height;
obj.parentNode.replaceChild(oC,obj);
canvas.drawImage(obj,0,0); aInput[1].onclick=function(){ if(iNow==3) iNow=0; else iNow++; toChange();
};
aInput[0].onclick=function(){
if(iNow==0) iNow=3; else iNow--;
toChange();
};
function toChange(){
switch(iNow){
case 1:
oC.width=obj.height;
oC.height=obj.width;
canvas.rotate(90*Math.PI/180);
canvas.drawImage(obj,0,-obj.height);
break; case 2:
oC.width=obj.width;
oC.height=obj.height;
canvas.rotate(180*Math.PI/180);
canvas.drawImage(obj,-obj.width,-obj.height);
break;
case 3:
oC.width=obj.height;
oC.height=obj.width;
canvas.rotate(270*Math.PI/180);
canvas.drawImage(obj,-obj.width,0);
break;
case 0:
oC.width=obj.width;
oC.height=obj.height;
canvas.rotate(0*Math.PI/180);
canvas.drawImage(obj,0,0);
break;
}
}
}
};
</script>
</head><body>
<input type="button" value="左"/>
<input type="button" value="右"/>
<div><img src="iBannerText.png" id="img1" /></div>
</body>
</html>

旋转

window.onload=function(){
var oc=document.getElementById('canvas');
var canvas=oc.getContext('2d');
canvas.fillRect(0,0,100,100);
var oImg=canvas.getImageData(0,0,100,100); //返回图像像素 for(var i=0; i<oImg.width*oImg.height; i++) {
oImg.data[4*i]=255; //data数组中的每个像素都rgba四个构成， length=4*w*h
oImg.data[4*i+1]=0;
oImg.data[4*i+2]=0;
oImg.data[4*i+3]=50;
} canvas.putImageData(oImg, 100,100); //绘制图像像素至canvas中
};

canva像素操作

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
var oc=document.getElementById('canvas');
var canvas=oc.getContext('2d'); var aLi=document.getElementsByTagName('li');
for(var i=0; i<aLi.length; i++){
aLi[i].onclick=function() {
var str=this.innerHTML;
var h=180;
canvas.clearRect(0, 0, oc.width, oc.height);
canvas.font=h+'px impact';
canvas.textBaseline='top';
canvas.fillStyle='red';
var w=canvas.measureText(str).width;
canvas.fillText(str, (oc.width-w)/2, (oc.height-h)/2);
var oImg=canvas.getImageData((oc.width-w)/2, (oc.height-h)/2, w,h);
canvas.clearRect(0,0,oc.width,oc.height);
var arr=randomArr(w*h,w*h/10);
var newImg=canvas.createImageData(w,h); //创建一个新的img图片像素
for(var i=0; i<arr.length; i++) {
//旧的像素数组，赋值给新的像素数组当中
newImg.data[4*arr[i]]=oImg.data[4*arr[i]];
newImg.data[4*arr[i]+1]=oImg.data[4*arr[i]+1];
newImg.data[4*arr[i]+2]=oImg.data[4*arr[i]+2];
newImg.data[4*arr[i]+3]=oImg.data[4*arr[i]+3];
} //绘制像素图片到canvas中
canvas.putImageData(newImg, (oc.width-w)/2, (oc.height-h)/2); };
} //函数功能：iAll，iNow(原数组长度，新数组长度) 返回新的数组
function randomArr(iAll, iNow){
var arr=[];
var newArr=[];
for(var i=0; i<iAll; i++) {
arr.push(i);
}
for(var i=0; i<iNow; i++) {
newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
}
return newArr;
} };
</script>
</head> <body> <canvas id="canvas" width=500 height=500></canvas>
<ul style="float:left">
<li>我</li>
<li>爱</li>
<li>你</li>
<li>吗</li>
</ul>
</body>
</html>

图片像素生产10%的图片文字

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
var oc=document.getElementById('canvas');
var canvas=oc.getContext('2d'); var aLi=document.getElementsByTagName('li');
for(var i=0; i<aLi.length; i++){
aLi[i].onclick=function() {
var str=this.innerHTML;
var h=180;
var timer=null;
var iNow=0;
clearInterval(timer);
canvas.clearRect(0, 0, oc.width, oc.height);
canvas.font=h+'px impact';
canvas.textBaseline='top';
canvas.fillStyle='red';
var w=canvas.measureText(str).width;
canvas.fillText(str, (oc.width-w)/2, (oc.height-h)/2);
var oImg=canvas.getImageData((oc.width-w)/2, (oc.height-h)/2, w,h);
canvas.clearRect(0,0,oc.width,oc.height);
var arr=randomArr(w*h,w*h/10);
var newImg=canvas.createImageData(w,h); //创建一个新的img图片像素
timer=setInterval(function(){
for(var i=0; i<arr[iNow].length; i++) {
//旧的像素数组，赋值给新的像素数组当中
newImg.data[4*arr[iNow][i]]=oImg.data[4*arr[iNow][i]];
newImg.data[4*arr[iNow][i]+1]=oImg.data[4*arr[iNow][i]+1];
newImg.data[4*arr[iNow][i]+2]=oImg.data[4*arr[iNow][i]+2];
newImg.data[4*arr[iNow][i]+3]=oImg.data[4*arr[iNow][i]+3];
}
//绘制像素图片到canvas中
canvas.putImageData(newImg, (oc.width-w)/2, (oc.height-h)/2);
if(iNow==9) {
iNow=0;
clearInterval(timer);
}
else iNow++;
}, 200); };
} //函数功能：iAll，iNow(原数组长度，新数组长度) 返回复合的数组，allArr存的就是10个元素，每个元素也是一位数组，leng=w*h;
function randomArr(iAll, iNow){
var arr=[];
var allArr=[];
for(var i=0; i<iAll; i++) {
arr.push(i);
} for(var j=0; j<iAll/iNow; j++) {
var newArr=[];
for(var i=0; i<iNow; i++) {
newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
}
allArr.push(newArr);
} return allArr;
}};
</script>
</head><body><canvas id="canvas" width=500 height=500></canvas>
<ul style="float:left">
<li>我</li>
<li>爱</li>
<li>你</li>
<li>吗</li>
</ul>
</body>
</html>

动态生产每次10%文字像素

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
var oc=document.getElementById('canvas');
var canvas=oc.getContext('2d');
canvas.fillRect(0,0,100,100);
var oImg=canvas.getImageData(0,0,100,100);
alert(getXY(oImg, 3, 5));
for(var i=0; i<oImg.width; i++){
setXY(oImg, i, 5, [255,0,0,255]);
canvas.putImageData(oImg,100,100);
}
function getXY(obj, x, y){
var arr=[];
var w=obj.width;
var h=obj.height;
var d=obj.data; arr[0]=d[4*(y*w+x)];
arr[1]=d[4*(y*w+x)+1];
arr[2]=d[4*(y*w+x)+2];
arr[3]=d[4*(y*w+x)+3];
return arr;
} function setXY(obj, x, y,color){
var arr=[];
var w=obj.width;
var h=obj.height;
var d=obj.data; d[4*(y*w+x)]=color[0];
d[4*(y*w+x)+1]=color[1];
d[4*(y*w+x)+2]=color[2];
d[4*(y*w+x)+3]=color[3];
}
}
</script>
</head><body><canvas id="canvas" width=500 height=500></canvas>
</body>
</html>

封装通过xy坐标生成像素图片

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
var oc=document.getElementById('canvas');
var canvas=oc.getContext('2d');
var yImg=new Image();
yImg.onload=function() {
draw(this);
};
yImg.src='2.png'; function getXY(obj, x, y){
var arr=[];
var w=obj.width;
var h=obj.height;
var d=obj.data; arr[0]=d[4*(y*w+x)];
arr[1]=d[4*(y*w+x)+1];
arr[2]=d[4*(y*w+x)+2];
arr[3]=d[4*(y*w+x)+3];
return arr;
} function setXY(obj, x, y,color){
var arr=[];
var w=obj.width;
var h=obj.height;
var d=obj.data; d[4*(y*w+x)]=color[0];
d[4*(y*w+x)+1]=color[1];
d[4*(y*w+x)+2]=color[2];
d[4*(y*w+x)+3]=color[3];
} function draw(obj) {
oc.width=obj.width;
//oc.height=2*obj.height;
canvas.drawImage(obj,0,0,obj.width, obj.height);
var oImg=canvas.getImageData(0,0,obj.width, obj.height);
var w=oImg.width;
var h=oImg.height;
var newImg=canvas.createImageData(w,h);
//先循环列
for(var i=0; i<h; i++) {
//循环行
for(var j=0; j<w; j++) {
var result=[];
var color=getXY(oImg, j, i);
result[0]=255-color[0];
result[1]=255-color[1];
result[2]=255-color[2];
result[3]=255*i/h;
setXY(newImg, j,h-i, result);
}
} canvas.putImageData(newImg, 0, obj.height);
}};
</script>
</head><body><canvas id="canvas"></canvas>
</body>
</html>

canvas实现图片反色、渐变、倒影

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
var oc=document.getElementById('canvas');
var canvas=oc.getContext('2d');
var yImg=new Image();
yImg.onload=function() {
draw(this);
};
yImg.src='2.png'; function getXY(obj, x, y){
var arr=[];
var w=obj.width;
var h=obj.height;
var d=obj.data; arr[0]=d[4*(y*w+x)];
arr[1]=d[4*(y*w+x)+1];
arr[2]=d[4*(y*w+x)+2];
arr[3]=d[4*(y*w+x)+3];
return arr;
} function setXY(obj, x, y,color){
var arr=[];
var w=obj.width;
var h=obj.height;
var d=obj.data; d[4*(y*w+x)]=color[0];
d[4*(y*w+x)+1]=color[1];
d[4*(y*w+x)+2]=color[2];
d[4*(y*w+x)+3]=color[3];
} function draw(obj) {
//num分块图片 w/num, h/num
var num=10;
oc.width=obj.width;
//oc.height=2*obj.height;
canvas.drawImage(obj,0,0,obj.width, obj.height);
var oImg=canvas.getImageData(0,0,obj.width, obj.height);
var w=oImg.width;
var h=oImg.height;
var newImg=canvas.createImageData(w,h);
//具体分块
var stepW=w/num;
var stepH=h/num;
for(var i=0; i<stepH; i++) {
for(var j=0; j<stepW; j++) {
//提取颜色
var color=getXY(oImg, j*num+Math.floor(Math.random()*num),i*num+Math.floor(Math.random()*num));
//根据num块循环，块是个二维数组（如如很多方格）
for(var k=0; k<num; k++) {
for(var l=0; l<num; l++) {
setXY(newImg, j*num+l, i*num+k, color);
}
}
}
}
canvas.putImageData(newImg,0, obj.height);
}};
</script>
</head><body><canvas id="canvas"></canvas>
</body>
</html>

canvas实现图片马赛克

6、html5实现的播放器

属性：
controls : 显示或隐藏用户控制界面
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放
currentTime : 开始到播放现在所用的时间
duration : 媒体总时间(只读)
volume : 0.0-1.0的音量相对值
muted : 是否静音
autobuffer : 开始的时候是否缓冲加载，autoplay的时候，忽略此属性
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
error : 媒体发生错误的时候，返回错误代码 (只读)
currentSrc : 以字符串的形式返回媒体地址(只读)
poster : 视频播放前的预览图片
width、height : 设置视频的尺寸
videoWidth、 videoHeight : 视频的实际尺寸(只读)方法：
play() : 媒体播放
pause() : 媒体暂停
load() : 重新加载媒体
事件：
loadstart progress suspend emptied stalled play pause loadedmetadata loadeddata waiting playing canplay canplaythrough seeking seeked timeupdate ended ratechange durationchange volumechange

HTML5 viedo属性方法事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#div1{ width:300px; height:30px; background:#666; overflow:hidden; position:relative;}
#div2{ width:60px; height:30px; background:red; position:absolute; left:0; top:0;}#div3{ width:300px; height:10px; background:#666; overflow:hidden; position:relative; top:10px;}
#div4{ width:60px; height:10px; background:yellow; position:absolute; left:240px; top:0;}</style>
<script>window.onload = function(){
var oV = document.getElementById('v1');
var aInput = document.getElementsByTagName('input'); var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
var oDiv4 = document.getElementById('div4'); var disX = 0;
var disX2 = 0; var timer = null; aInput[0].onclick = function(){ if( oV.paused ){ oV.play(); this.value = '暂停'; nowTime();
timer = setInterval(nowTime,1000); }
else{ oV.pause(); this.value = '播放'; clearInterval(timer); } }; aInput[2].value = changeTime(oV.duration); aInput[3].onclick = function(){ if( oV.muted ){ oV.volume = 1; this.value = '静音'; oV.muted = false; }
else{ oV.volume = 0; this.value = '取消静音'; oV.muted = true; } }; aInput[4].onclick = function(){
oV.mozRequestFullScreen();
}; function nowTime(){ aInput[1].value = changeTime(oV.currentTime); var scale = oV.currentTime/oV.duration; oDiv2.style.left = scale * 240 + 'px'; } function changeTime(iNum){ iNum = parseInt( iNum ); var iH = toZero(Math.floor(iNum/3600));
var iM = toZero(Math.floor(iNum%3600/60));
var iS = toZero(Math.floor(iNum%60)); return iH + ':' +iM + ':' + iS; } function toZero(num){
if(num<=9){
return '0' + num;
}
else{
return '' + num;
}
} oDiv2.onmousedown = function(ev){
var ev = ev || window.event;
disX = ev.clientX - oDiv2.offsetLeft; document.onmousemove = function(ev){
var ev = ev || window.event; var L = ev.clientX - disX; if(L<0){
L = 0;
}
else if(L>oDiv1.offsetWidth - oDiv2.offsetWidth){
L = oDiv1.offsetWidth - oDiv2.offsetWidth;
} oDiv2.style.left = L + 'px'; var scale = L/(oDiv1.offsetWidth - oDiv2.offsetWidth); oV.currentTime = scale * oV.duration; nowTime(); };
document.onmouseup = function(){
document.onmousemove = null;
};
return false;
}; oDiv4.onmousedown = function(ev){
var ev = ev || window.event;
disX2 = ev.clientX - oDiv4.offsetLeft; document.onmousemove = function(ev){
var ev = ev || window.event; var L = ev.clientX - disX2; if(L<0){
L = 0;
}
else if(L>oDiv3.offsetWidth - oDiv4.offsetWidth){
L = oDiv3.offsetWidth - oDiv4.offsetWidth;
} oDiv4.style.left = L + 'px'; var scale = L/(oDiv3.offsetWidth - oDiv4.offsetWidth);
oV.volume = scale; };
document.onmouseup = function(){
document.onmousemove = null;
};
return false;
};};</script>
</head><body>
<video id="v1"> <source src="Intermission-Walk-in.ogv"></source>
<source src="Intermission-Walk-in_512kb.mp4"></source></video><br />
<input type="button" value="播放" />
<input type="button" value="00:00:00" />
<input type="button" value="00:00:00" />
<input type="button" value="静音" />
<input type="button" value="全屏" />
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3">
<div id="div4"></div>
</div></body>
</html>