我想在页面上画一个圆圈，然后鼠标正好在这个圆圈的中心原点，要求按左键缩小这个圆圈，按右键放大这个圆圈，请问能实现吗？

ATCG 2003-08-08 11:41:12
我想在页面上画一个圆圈，然后鼠标正好在这个圆圈的中心原点，要求按左键缩小这个圆圈，按右键放大这个圆圈，请问能实现吗？
...全文
264 30 打赏 收藏 转发到动态 举报
写回复
用AI写文章
30 条回复
切换为时间正序
请发表友善的回复…
发表回复
liuruhong 2003-08-10
  • 打赏
  • 举报
 回复
这个我就懒得写了，你们自己发挥去，别告诉我你一点都不熟悉DOM和Javascript
ATCG 2003-08-10
  • 打赏
  • 举报
 回复
还有，我只要按住鼠标拖拉一下圆圈，那个圆圈就会自动缩小或放大了
ATCG 2003-08-10
  • 打赏
  • 举报
 回复
强啊，感动！
但是我发觉当我用鼠标去拖拉滚动条时，那个圆圈就会自己自动缩小或放大！
liuruhong 2003-08-10
  • 打赏
  • 举报
 回复
重新修改过了，我直接使用<body onmouseup moumousedown oncontextmenu这几个事件
如果有别的javascript，建议修改成document.attachEvent("onmousedown",myhandle)这样的形势
---------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title></title>
<STYLE> v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script>
//document.attachEvent("onmousemove",OnMouseMove);
function OnMouseMove(){
mouse.style.left=window.event.clientX - parseInt(mouse.style.width) /2 +document.body.scrollLeft;
mouse.style.top=window.event.clientY - parseInt(mouse.style.height) /2 +document.body.scrollTop;
}
var iHandle=null;
var flag=true;
var mouseX=null;
var mouseY=null;
function StartZoom(){
mouseX=window.event.clientX;
mouseY=window.event.clientY;
Zoom()
}
function Zoom(){
if(flag==true){
mouse.style.width =parseInt(mouse.style.width) +2;
mouse.style.height=parseInt(mouse.style.height) +2;
}
else{

mouse.style.width =parseInt(mouse.style.width) -2
mouse.style.height =parseInt(mouse.style.height) -2
if(parseInt(mouse.style.width)<=20){
mouse.style.width=20;
}
if(parseInt(mouse.style.height)<=20){
mouse.style.height=20;
}
}
mouse.style.left=mouseX - parseInt(mouse.style.width) /2 +document.body.scrollLeft;
mouse.style.top=mouseY - parseInt(mouse.style.height) /2 +document.body.scrollTop;

iHandle=setTimeout("Zoom()",50);
}

function cancelZoom(){
clearTimeout(iHandle);
}

function MouseDown(){
var btn=window.event.button;

if(btn==1){
flag=true;

}
else{
flag=false;
}
StartZoom();
}

</script>
</head>
<body onmousemove="OnMouseMove()" bgcolor="green" onmousedown="MouseDown()" oncontextmenu="return false" onmouseup="cancelZoom()">
<v:oval filled="false" style="WIDTH:30px;POSITION:absolute;HEIGHT:30px" id="mouse" coordsize="21600,21600"></v:oval><FONT face="宋体"></FONT><FONT face="宋体"></FONT>


<div style="position:absolute;left:1500;top:900">sdf</div>
</body>
</html>
ATCG 2003-08-10
  • 打赏
  • 举报
 回复
DOM我不懂，javascript会一点，还是很谢谢你了！
ATCG 2003-08-09
  • 打赏
  • 举报
 回复
谢谢蓝色街灯
但我发觉我用鼠标去拉动了滚动条之后，鼠标就再也不能回到圆心了

我找不到 VML 的资料，昨天去书店也买不到
李世垚 2003-08-09
  • 打赏
  • 举报
 回复
用vml吧很简单的 你在csdn里搜索一下vml应该能找到教材的 我就是这样学的
liuruhong 2003-08-09
  • 打赏
  • 举报
 回复
刚刚编写的一个东西，应该算比较简单，为了方便，我就使用了vml来编写
将下面的代码拷贝到文件，存储成html就可以了，欢迎大家一起探讨vml
-------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title></title>
<STYLE> v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script>
//document.attachEvent("onmousemove",OnMouseMove);
function OnMouseMove(){
mouse.style.left=window.event.clientX - parseInt(mouse.style.width) /2;
mouse.style.top=window.event.clientY - parseInt(mouse.style.height) /2;
}
var iHandle=null;
var flag=true;
var mouseX=null;
var mouseY=null;
function StartZoom(){
mouseX=window.event.clientX;
mouseY=window.event.clientY;
Zoom()
}
function Zoom(){
if(flag==true){
mouse.style.width =parseInt(mouse.style.width) +2;
mouse.style.height=parseInt(mouse.style.height) +2;
}
else{
mouse.style.width =parseInt(mouse.style.width) -2
mouse.style.height =parseInt(mouse.style.height) -2
}
mouse.style.left=mouseX - parseInt(mouse.style.width) /2;
mouse.style.top=mouseY - parseInt(mouse.style.height) /2;

iHandle=setTimeout("Zoom()",50);
}

function cancelZoom(){
clearTimeout(iHandle);
}

function MouseDown(){
var btn=window.event.button;

if(btn==1){
flag=true;

}
else{
flag=false;
}
StartZoom();
}

</script>

</head>
<body onmousemove="OnMouseMove()">
<v:oval style="position:absolute;width:30px;height:30px" id="mouse" onmousedown="MouseDown()" onmouseup="cancelZoom()" oncontextmenu="return false"></v:oval>
</body>
</html>
ATCG 2003-08-09
  • 打赏
  • 举报
 回复
up
ATCG 2003-08-09
  • 打赏
  • 举报
 回复
DirectAnimation controls 又是什么东东啊？
modou 2003-08-09
  • 打赏
  • 举报
 回复
一个用处不是很大，又很难学的VML学到这个份上，真的是太厉害了。

不过提点意见：圆不停的缩小，到一个点就出错了。

而且有时松开鼠标，圆还在不停的变大或变小。
WYlslrt 2003-08-09
  • 打赏
  • 举报
 回复
DirectAnimation controls
最好
ATCG 2003-08-09
  • 打赏
  • 举报
 回复
不是这个意思，我是想画一个圈，应为这个 v:oval是一个实心的圆，
或者说我要一个空心的圆圈，以至于不会覆盖住我的图片
liuruhong 2003-08-09
  • 打赏
  • 举报
 回复
高度和宽度相等不就是一个圆了，这个问题还需要考虑？
ATCG 2003-08-09
  • 打赏
  • 举报
 回复
谢谢，我刚才查了MSDN的资料，oval是画圆，椭圆的，并不是一个圈
liuruhong 2003-08-09
  • 打赏
  • 举报
 回复
faint,我只是随便写的，当然了，很多判断是没有写的

你的意思就是要一个圆圈了？默认的就应该是可以的，你可以查看一下msdn中v:oval的属性，fillcolor就是设置填充颜色
ATCG 2003-08-09
  • 打赏
  • 举报
 回复
还有我发觉，当我用右键缩小圆圈时，一直到圆圈没有，会出现网页上有错误的提示，而且再也不能用左键放大圆圈了，没了？
真不好意思，问了你这么多问题
ATCG 2003-08-09
  • 打赏
  • 举报
 回复
我的页面上还有一张图的，不希望这个圆圈覆盖页面上的图，只希望是一个圈，能实现吗？
谢谢！
ATCG 2003-08-09
  • 打赏
  • 举报
 回复
非常感谢啊！！！

其实我的打算是画出像你这样的圆圈，还要再取得中心原点的坐标，并显示在鼠标的旁边，并且实时出这个圆圈的半径，然后当双击时保存这些参数到文件，如果是 javascript我还能想象办法，但 VML我现在是束手无策，而且我希望的坐标是 offsetX, offsetY的
liuruhong 2003-08-09
  • 打赏
  • 举报
 回复
这个代码你最后看看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title></title>
<STYLE> v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script>
//document.attachEvent("onmousemove",OnMouseMove);
function OnMouseMove(){
mouse.style.left=window.event.clientX - parseInt(mouse.style.width) /2 +document.body.scrollLeft;
mouse.style.top=window.event.clientY - parseInt(mouse.style.height) /2 +document.body.scrollTop;
}
var iHandle=null;
var flag=true;
var mouseX=null;
var mouseY=null;
function StartZoom(){
mouseX=window.event.clientX;
mouseY=window.event.clientY;
Zoom()
}
function Zoom(){
if(flag==true){
mouse.style.width =parseInt(mouse.style.width) +2;
mouse.style.height=parseInt(mouse.style.height) +2;
}
else{
mouse.style.width =parseInt(mouse.style.width) -2
mouse.style.height =parseInt(mouse.style.height) -2
}
mouse.style.left=mouseX - parseInt(mouse.style.width) /2 +document.body.scrollLeft;
mouse.style.top=mouseY - parseInt(mouse.style.height) /2 +document.body.scrollTop;

iHandle=setTimeout("Zoom()",50);
}

function cancelZoom(){
clearTimeout(iHandle);
}

function MouseDown(){
var btn=window.event.button;

if(btn==1){
flag=true;

}
else{
flag=false;
}
StartZoom();
}

</script>
</head>
<body onmousemove="OnMouseMove()">
<v:oval style="WIDTH:30px;POSITION:absolute;HEIGHT:30px" id="mouse" onmousedown="MouseDown()"
onmouseup="cancelZoom()" oncontextmenu="return false" coordsize="21600,21600"></v:oval><FONT face="宋体"></FONT><FONT face="宋体"></FONT>


<div style="position:absolute;left:1500;top:900">sdf</div>
</body>
</html>
加载更多回复（10）
tkinter库绘图实例14：利用鼠标控制图形放大和缩小效果
实例代码 import tkinter as tk # 导入tkinter库，并重命名为tk mywindow = tk.Tk() # 创建一个窗体 mywindow.title("图形的放大与缩小效果") # 设置窗体的标题 # 创建画布并布局 mycanvas = tk.Canvas(mywindow,width=300,height=300,bg="black") mycanvas.pack(
10.11Python图形用户界面库tkinter（11）：动画
@通过画布删除对象和重绘产生动画 class EnlargeShrinkCircle: def __init__(self): # 窗口和标题 window = Tk() window.title("缩放动画") # 初始半径 self.radius = 50 # 打包一个白色画布到窗口...
JS——实现吹气球
题目： 吹气球（圆圈），鼠标左键按下气球慢慢变大，放开则停止变化，右键按下则气球慢慢变小，放开则停止变化 #div1{ width:100px; height:100px; border-radius: 50%; background-color:
ppt矩形里面的图片怎么放大缩小_都说PPT是小AI，那试试处理WB电泳图吧
欢迎分享本文到朋友圈，文章转载、投稿、业务合作联系请微信Havana90~~Westernblot电泳图可能是生命科学实验中最常见的结果图片了，从成像仪上下来的原始图片难免各种问题，如条带不水平、有些区域并不是结果所需要等。下面用PPT来处理WB电泳图，最终获得一张符合SCI论文发表要求的图片。01class1、把图片复制粘贴进一个新建PPT页面(使用空白版式，去掉占位符)，并调出各种参...
测试鼠标加速度软件,小科普 | 你的鼠标怎么样？测一下！
原标题：小科普 | 你的鼠标怎么样？测一下！三四百块的鼠标都能有一万多DPI、1000Hz回报率，抛开其他因素只谈性能的话，他们有多大差别？换句话讲，有没有什么工具可以测试一下鼠标的性能呢？别说，还真有。▌mouse rate checker如果你只是简单测试一下鼠标回报率的稳定性，那么用这个mouse rate chacker软件即可，软件本体很小，一瞬间下好。 只要在程序区域内挥动鼠标，右侧就...
JavaScript

87,987

社区成员

224,683

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章