js 怎么实现一条轴下显示时间，随着鼠标的移动会显示不同的时间
日期：2014-05-16 浏览次数：20479 次
js 如何实现一条轴上显示时间，随着鼠标的移动会显示不同的时间
比如有个div层<div style="width:766px;height:10px;float:left;"></div>,这长度表示一天的时间，鼠标在这层上移动时会显示出鼠标位置的时间。这个如何实现呢，求指点！！
。有类似的代码示例最好了
------解决方案--------------------
添加onmouseover事件 然后获取鼠标的位置 计算出鼠标距离轴开始点的长度 然后用该长度与全长的比例来确定档期的时间
------解决方案--------------------
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
div{
background-color:#FF6600;
width:4000px;
height:10px;
}
</style>
<script type="text/javascript">
function getPosition(obj){
var style="";
if(document.defaultView&&document.defaultView.getComputedStyle){
style=document.defaultView.getComputedStyle(obj);
}else{
style=obj.currentStyle;
}
return{
'y':style.top=="auto"?obj.offsetTop:style.top,
'x':style.left=="auto"?obj.offsetLeft:style.left
}
}
function getMousePosition(e){
var a=e
------解决方案--------------------
window.event;
var x=a.pageX
------解决方案--------------------
(a.clientX+(document.documentElement.scrollLeft
------解决方案--------------------
document.body.scrollLeft));
var y=a.pageY
------解决方案--------------------
(a.clientY+(document.documentElement.scrollTop
------解决方案--------------------
document.body.scrollTop));
return {
'x':x,
'y':y
}
}
function init(){
var div=document.getElementById("test");
var div2=document.getElementById("test2");
var k=getPosition(div);
div.onmousemove=function(e){
var t=getMousePosition(e);
div2.innerHTML=t.x-k.x+":"+(t.y-k.y);
}
}
window.onload=init;
</script>
</head>
<body>
<div id="test"></div>
<div id="test2"></div>
</body>
</html>
类似这样试试
------解决方案--------------------
jquery的mouseover事件可以提取里面的width数值。然后再按24小时比例来换算即可
比如有个div层<div style="width:766px;height:10px;float:left;"></div>,这长度表示一天的时间，鼠标在这层上移动时会显示出鼠标位置的时间。这个如何实现呢，求指点！！
。有类似的代码示例最好了
------解决方案--------------------
添加onmouseover事件 然后获取鼠标的位置 计算出鼠标距离轴开始点的长度 然后用该长度与全长的比例来确定档期的时间
------解决方案--------------------
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
div{
background-color:#FF6600;
width:4000px;
height:10px;
}
</style>
<script type="text/javascript">
function getPosition(obj){
var style="";
if(document.defaultView&&document.defaultView.getComputedStyle){
style=document.defaultView.getComputedStyle(obj);
}else{
style=obj.currentStyle;
}
return{
'y':style.top=="auto"?obj.offsetTop:style.top,
'x':style.left=="auto"?obj.offsetLeft:style.left
}
}
function getMousePosition(e){
var a=e
------解决方案--------------------
window.event;
var x=a.pageX
------解决方案--------------------
(a.clientX+(document.documentElement.scrollLeft
------解决方案--------------------
document.body.scrollLeft));
var y=a.pageY
------解决方案--------------------
(a.clientY+(document.documentElement.scrollTop
------解决方案--------------------
document.body.scrollTop));
return {
'x':x,
'y':y
}
}
function init(){
var div=document.getElementById("test");
var div2=document.getElementById("test2");
var k=getPosition(div);
div.onmousemove=function(e){
var t=getMousePosition(e);
div2.innerHTML=t.x-k.x+":"+(t.y-k.y);
}
}
window.onload=init;
</script>
</head>
<body>
<div id="test"></div>
<div id="test2"></div>
</body>
</html>
类似这样试试
------解决方案--------------------
jquery的mouseover事件可以提取里面的width数值。然后再按24小时比例来换算即可
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
