`

JS推拽效果

CSSIEXHTMLHTML 
阅读更多

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html charset="gb2312">
<title>第一视频</title>
<link href="css/css.css" rel="stylesheet" type="text/css"/>
</head>
<body style="text-align:left;margin:0px;">

<div class="infro" style="margin-left:100px;">
  <div class="infro_rr"><span id="monitor"></span>
     <img src="image/bt4_01.gif"  alt="切换到P2P模式播放" onclick="ChangeLiveMode()"/><img class="contorlImg"  alt="全屏播放" src="image/con_01.gif"  onClick="SetPlayerFullScreen()" /><img class="contorlImg" src="image/btn_02.gif"  id="imgDoMute" onClick="DoPlayerMute()"/><img src="image/bar.gif" ><div id="ImageDrag" alt="托拽可以调整声音大小" onMouseDown="mdown_vo(ImageDrag,22,0,8)" style="position:absolute;left:170px;top:0px;cursor:hand;"><img alt="托拽可以调整声音大小" src="image/o.gif"></div> 
  </div>   
</div>

<script>
function info(str)
{
 document.getElementById("monitor").innerHTML=str;
}

var init_obj='';      //记录拽点的对象ID 
var init_x=0;         //记录拽点离它父对象的距离，具体为left的值，所以必须指定left的值。
var init_offsetx=0;   //记录拽点离背景条左侧的距离，在鼠标第一次点击时，通过传递过来的参数offsetx初始化
var bar_width=0;      //记录背景条的长度,在鼠标第一次点击时，通过传递过来的参数barwidth初始化
var drag_width=0;     //记录拽点的长度,在鼠标第一次点击时，通过传递过来的参数dragwidth初始化(目前没有使用，待用)
var init_event_x=0;   //记录鼠标初次点击时，拽点离IE左侧边框的距离，这个距离对于不同的位置是可变的，所以需要第一次点击时，记录下该值。
var offset_event_x=0; //记录鼠标拖拽拽点时，与init_event_x的偏移距离。
document.onmouseup=mup_vo;
document.onmousemove=mmove_vo;
//参数说明：
//Object 拽点对象
//barwidth 背景条的宽度
//offsetx 拽点离背景条左侧的距离
//dargwidth 拽点的宽度
//可以通过调节offsetx的值和拽点样式中的left来初始化拽点位置和运动范围。
function mdown_vo(Object,barwidth,offsetx,dragwidth)
{   
  init_obj=Object.id;
  document.getElementById(init_obj).setCapture(); 
  if(bar_width==0){bar_width=barwidth;}
  if(drag_width==0){drag_width=dragwidth;} 
  if(init_offsetx==0){init_offsetx=offsetx;} 
  if(init_x==0){var leftx=document.getElementById(init_obj).style.left;init_x=parseInt(leftx.substr(0,leftx.length-2));}   
  if(init_event_x==0){init_event_x=event.clientX;} 
}
function mmove_vo()
{
   if(init_obj!='')
   {  
    offset_event_x=event.clientX-init_event_x;
    var des_x=init_x+offset_event_x;   
    var max_x=init_x-init_offsetx+bar_width;
    var min_x=init_x-init_offsetx;
    if(des_x>max_x){des_x=max_x;}
    if(des_x<min_x){des_x=min_x;}
    document.getElementById(init_obj).style.left=des_x;       
    var offset_x=des_x-init_x+init_offsetx;  
    setVoice(offset_x);
  }
}
function mup_vo()
{
 if(init_obj!='')
 {
   document.getElementById(init_obj).releaseCapture();
   init_obj='';
 }
}
function setVoice(x)
{ 
  var percent=Math.round((x/bar_width)*100);
  info(percent);
}
</script>

</body>
</html>

分享到：
| 飘浮广告代码一
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics