87,904
社区成员
发帖
与我相关
我的任务
分享怎样实现一个随鼠标拖动而实时提示的效果？
比如，有个坐标轴，拖动鼠标，旁边的提示信息（可能是在一个方框里）跟着刷新，显示1，2，3等，幅度是根据纵轴坐标来定的。
...全文
请发表友善的回复…
发表回复
sun_zhicheng 2009-10-30
- 打赏
- 举报
学习
BeenZ 2009-10-30
- 打赏
- 举报
不知道你要的是否这个效果
BeenZ 2009-10-30
- 打赏
- 举报
如果是显示坐标的话,在后面建立个影射div来获取(其实就是把你的屏幕坐标影射对应成html画的坐标),然后显示出来
id=pointline 的div就是这个作用
这里还是简单的html实现,如果功能复杂还是借助框架好些
id=pointline 的div就是这个作用
这里还是简单的html实现,如果功能复杂还是借助框架好些
<html><head>
<META http-equiv=Content-Style-Type content=text/css>
<style>
rv\:* { behavior:url(#default#VML); }
</style>
<script>
function arrowLine(x1,y1,x2,y2,lnclr,lnsw){
return '<rv:line style="position:absolute;" from="'+x1+','+y1+'" to="'+x2+','+y2+'" strokecolor="'+lnclr+'" strokeweight="'+lnsw+'"><rv:stroke dashstyle="solid" endarrow="classic" /></rv:line>';
}
function line(x1,y1,x2,y2,lnclr,lnsw){
return '<rv:line style="position:absolute;" from="'+x1+','+y1+'" to="'+x2+','+y2+'" strokecolor="'+lnclr+'" strokeweight="'+lnsw+'" />';
}
window.onload=function(){
draw();
drawAxis()
}
function draw(){
document.getElementById("wave").innerHTML= arrowLine(0,500,0,0,"red",1)+arrowLine(0,500,500,500,"red",1);
}
function drawAxis(){
var xaxis=document.getElementById("xaxis");
var yaxis=document.getElementById("yaxis");
var tmpx=[];
var tmpy=[]
for(var i=0;i<=5;i++){
tmpx.push('<span style="position:relative;');
tmpx.push(';width:98px">');
tmpx.push(i); //值
tmpx.push('</span>');
if(i!=5)
tmpx.push(line(0,-10,0,-5,"red",2)); //刻度
}
for(var j=0;j <=10;j++){
tmpy.push(' <span style="position:absolute;height:49px;top:');
tmpy.push(500-49*j);
tmpy.push('">');
tmpy.push(j); //值
tmpy.push('</span>');
if(j!=0)
tmpy.push(line(15,500-49*j,20,500-49*j,"red",2)); //y刻度
}
xaxis.innerHTML=tmpx.join("");
yaxis.innerHTML=tmpy.join("");
}
function mouseMove(ev){
ev = ev || window.event;
var CursorPos = parseInt( ev.x - document.getElementById("pointline").offsetLeft );
var xpos=CursorPos/100;
document.getElementById("xpos").style.left=parseInt(ev.offsetX)+20;
var ypos=10-(ev.offsetY)/50
document.getElementById("xpos").style.top=ev.offsetY;
document.getElementById("xpos").innerHTML=xpos+" , "+(ypos).toFixed(2);
}
</script>
</head>
<body>
<div id="wave" style="position:absolute;left:100px;"></div>
<div id="yaxis" style="position:absolute;left:80px;height:600px;width:40px"></div>
<div id="xaxis" style="position:absolute;top:520px;width:600px;left:95px"></div>
<div style="position:absolute;top:0px;left:95px;width:500px;height:500px;top:25px;" id="pointline" onmousemove=" mouseMove(event)">
<span id="xpos" style="position:absolute;border:1px solid black"></span>
</div>
</body>
</html>
abcdefg171459 2009-10-30
- 打赏
- 举报
[Quote=引用 1 楼 beenz 的回复:]
就用我上次给你的坐标事例,在里面跟踪横坐标,然后计算
其实也不难,等下给你个示例
ps.有空结下贴,谢谢
[/Quote]
呵呵，我是看大家讨论的热情高涨，所以想再等会，已经结了。
给个示例吧，谢谢！
就用我上次给你的坐标事例,在里面跟踪横坐标,然后计算
其实也不难,等下给你个示例
ps.有空结下贴,谢谢
[/Quote]
呵呵，我是看大家讨论的热情高涨，所以想再等会，已经结了。
给个示例吧，谢谢！
wldzjj 2009-10-30
- 打赏
- 举报
<html>
<head>
<title>显示鼠标坐标</title>
<style type="text/css">
<!--
body { font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 4px; margin-right: 0px}
A { COLOR: black; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: none }
A:hover { COLOR: red; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: underline }
a:active { font: 9pt "宋体"; cursor: hand; color: #FF0033 }
--></style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#fef4d9" onMousemove="micro$oftMouseMove()">
<br>
<br>
<center><font color=red face="隶书" size=6>显示鼠标坐标</font></center>
<br>
<center>
<SCRIPT LANGUAGE="JavaScript">
if (navigator.appName == 'Netscape')
{
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = netscapeMouseMove;
}
function netscapeMouseMove(e) {
if (e.screenX != document.test.x.value && e.screenY != document.test.y.value)
{
document.test.x.value = e.screenX;
document.test.y.value = e.screenY;
}
}
function micro$oftMouseMove() {
if (window.event.x != document.test.x.value && window.event.y != document.test.y.value)
{
document.test.x.value = window.event.x;
document.test.y.value = window.event.y;
}
}
</SCRIPT>
<FORM NAME="test">
X: <INPUT TYPE="TEXT" NAME="x" SIZE="4"> Y: <INPUT
TYPUE="TEXT" NAME="y" SIZE="4">
</FORM>
</td></tr></table></center>
<br>
<br>
<center>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
function goHist(a)
{
history.go(a);
}
//-->
</script>
<FORM METHOD="post">
<INPUT TYPE="button" VALUE="返回" onClick="goHist(-1)" style="background-color: #8000FF; color: rgb(255,255,255)">
</form>
</center>
<br>
<center>
试试这个是你要的效果不
sundotLei 2009-10-30
- 打赏
- 举报
<body>
<script type="text/javascript">
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
document.getElementById('xxx').innerHTML = mousePos.x;
document.getElementById('yyy').innerHTML = mousePos.y;
document.getElementById('zzz').style.top= (mousePos.y+10)+"px";
document.getElementById('zzz').style.left= (mousePos.x)+10+"px";
}
document.onmousemove = mouseMove;
</script>
<div style="position:absolute;top:0px;left:0px;" id="zzz">
<span id="xxx"></span> <span id="yyy"/></span>
</div>
</body>
James__Zhan 2009-10-30
- 打赏
- 举报
仁兄还是用上次那个YUI框架吧。这个需要更改resize.js脚本库。
找到 this._status.innerHTML = '<strong>' + parseInt(h, 10) + ' x ' + parseInt(w, 10) + '</strong><em>' + ((diffH > 0) ? '+' : '') + diffH + ' x ' + ((diffW > 0) ? '+' : '') + diffW + '</em>';
这句，改成你自己的业务逻辑。有问题继续contact me。
找到 this._status.innerHTML = '<strong>' + parseInt(h, 10) + ' x ' + parseInt(w, 10) + '</strong><em>' + ((diffH > 0) ? '+' : '') + diffH + ' x ' + ((diffW > 0) ? '+' : '') + diffW + '</em>';
这句，改成你自己的业务逻辑。有问题继续contact me。
James__Zhan 2009-10-30
- 打赏
- 举报
顶一个...
BeenZ 2009-10-30
- 打赏
- 举报
就用我上次给你的坐标事例,在里面跟踪横坐标,然后计算
其实也不难,等下给你个示例
ps.有空结下贴,谢谢
其实也不难,等下给你个示例
ps.有空结下贴,谢谢
