JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
用JavaScript实现用鼠标画线，具体步骤是首先是画点，在根据两点坐标画直线，最后是获取鼠标位置,需要的朋友可以参考下
<!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>Untitled 1</title>
<style type="text/css">
.style1 {
font-size: x-small;
}
</style>
<script type="text/javascript">
/**
画点
*/
function makedot(x, y){
pointDiv = "<div style='height:1px;position:absolute;left:" + x +
"px;top:" + y + "px;width:1px;background:#f00;overflow:hidden'></div>";
return pointDiv;
}
/**
根据两点坐标画直线。
*/
function line(x1,y1,x2,y2){
var slope; //斜率
var direction;//坐标运动方向
var tx = x2 - x1;
var ty = y2 - y1;
if(tx == 0 && ty == 0)return;
var points = "";
var axis;//坐标轴上的坐标
if(Math.abs(tx) >= Math.abs(ty)){//在x轴上移动
direction = tx > 0 ? 1 : -1;
tx = Math.abs(tx);
slope = ty / tx;
axis = x1;
for(i = 0; i < tx; i ++){
points += makedot(axis, y1 + i * slope);
axis += direction;
}
}else{//在y轴上移动
direction = ty > 0 ? 1 : -1;
ty = Math.abs(ty);
slope = tx / ty;
axis = y1;
for(i = 0; i < ty; i ++){
points += makedot(x1 + i * slope, axis);
axis += direction;
}
}
var container = document.getElementById("container");
container.innerHTML += points;
}
var oldPoint = null;
//获取鼠标位置
function mousePosition(ev){
ev = ev || window.event;
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
var doc = document.documentElement, body = document.body;
var pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
var pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
return {x:pageX, y:pageY};
}
function recordPoint(ev){
var point = mousePosition(ev);
if(oldPoint != null){
line(oldPoint.x, oldPoint.y, point.x, point.y);
}
oldPoint = point;
}
</script>
</head>
<body>
<div id="container" style="width: 1000px; height: 600px; border:1px #bfbfbf solid;" onclick="recordPoint(event);">
</div>
<script type="text/javascript">
//line(19,19,22,300);
</script>
</body>
</html>
javascript 获取控件坐标实现方法如下：
|
1
2
3
4
5
6
7
8
9
|
function getPos(o) //取元素坐标
{ var x = 0, y = 0;
do {
x += o.offsetLeft;
y += o.offsetTop;
} while (o = o.offsetParent);
return { 'x': x, 'y': y };
} |
补充：
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中，FireFox差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
相关推荐
"跟随鼠标画线applet"是一个基于Java Applet技术的简单图形绘制程序，它允许用户在网页上通过鼠标操作来绘制线条。Applet是Java的一种小程序，可以嵌入到HTML页面中，为用户提供交互式的体验。 这个applet的核心...
在本主题中，我们将深入探讨如何使用JavaScript在网页中实现画线的效果。这个压缩包"javascript经典特效---在页面中画线.rar"包含了具体实现这一特效的HTML文件——"在页面中画线.htm"。 在网页上画线涉及到的主要...
在提供的压缩包文件"drawLine2"中，可能包含了更多的示例代码，比如如何实现动态画线、多条线的组合、响应鼠标事件进行画线等。这些高级功能可以让用户在网页上自由地绘制图形，或者实现特定的交互效果。 总的来说...
在给定的压缩包文件中，"view5.html"很可能是一个包含实现动态画线代码的网页，我们可以期待它使用了JavaScript和HTML5的Canvas元素。Canvas API允许开发者通过JavaScript来绘制图形，包括线条、曲线以及复杂的形状...
综上所述，"自定义画线html"项目提供了一种使用HTML和JavaScript实现交互式画线的方法。通过学习和理解上述技术，你可以创建出各种具有个性化画线功能的网页应用。项目的`showpage`文件可能包含了示例代码，供开发者...
要实现"连续画线"，我们需要监听用户的鼠标或触摸事件，获取到用户的移动轨迹。当用户按下鼠标或触屏时，我们记录下起始点，然后在鼠标或手指移动时，不断更新终点，并调用`lineTo()`方法添加新的线段。这样，每次...
总之，这个压缩包提供了一个实用的示例，展示了如何利用CSS3的高级特性创建动态、交互式的鼠标悬停按钮线条动画，同时结合JavaScript增强用户体验。无论是初学者还是经验丰富的开发者，都可以从这个实例中学习到如何...
同时，它可能还包含了一些交互式操作，比如鼠标绘制、删除线段等，这将帮助你更好地理解和掌握OpenLayers 3的画线功能。 总之，OpenLayers 3 提供了丰富的API和工具，使开发者能够轻松地在Web地图上绘制各种图形，...
本资源"CSS3鼠标滑过动画线条边框特效.zip"显然是一个包含示例代码的压缩包，用于演示如何利用CSS3实现当鼠标悬停时，元素边框产生动态线条动画的效果。这种特效可以增加用户交互性，提升网站或应用的视觉吸引力。 ...
本文将深入探讨“鼠标特效JAVASCRIPT”这一主题，讲解如何使用JavaScript来实现各种创新且吸引人的鼠标特效。 首先，我们要明白JavaScript能够通过监听鼠标的移动、点击、滚轮等事件，来改变网页的动态效果。例如，...
3. `script.js`: 主要的JavaScript代码，实现了抛物线轨迹的计算和绘制逻辑。 4. `demo.png`: 可能是项目的预览图或示例结果。 在`script.js`中，开发者可能使用了定时器（如`setInterval`）来实现每一帧的更新，并...
`draw`函数根据`onoff`标志判断是否正在绘制，如果是，则使用当前的颜色和宽度在Canvas上画线，从上一次的位置到当前鼠标位置。 这段代码展示了如何使用HTML5 Canvas API的基本绘图操作，包括设置填充色、获取渲染...
在示例代码中，你可以看到如何设置数据、颜色、标签和提示框等属性，以及如何自定义柱状图的样式和交互效果。 2. **折线图（Line Chart）** 折线图用于显示随时间变化的趋势，是ECharts中常见的图表类型。它可以...
【标题】：“CSS3鼠标悬停线条遮罩效果代码”是指一种利用CSS3技术实现的交互式网页设计元素。在网页设计中，鼠标悬停效果是提升用户体验的重要手段，而这款代码则是专为此目的设计的。它通过CSS3的属性和选择器，...
这个“HTML5 canvas实现的画板功能代码.zip”压缩包很显然是一个包含实现画板功能的JavaScript代码示例。在本文中，我们将深入探讨HTML5 canvas的画板功能及其相关知识点，以及如何利用JavaScript来实现这一功能。 ...
本文将详细介绍如何使用JavaScript来实现一个自定义的Marquee效果，并通过示例代码深入理解其工作原理。 #### 二、知识点分析 ##### 2.1 CSS样式设置 - **基础样式**: 通过CSS定义了链接的颜色、下划线、字体大小...
在这个文件中，开发者会用到Canvas的`context`对象，它提供了各种方法和属性，如`beginPath()`, `arc()`, `stroke()`, `fill()`等，用于在Canvas上画线、圆和其他形状。例如，要画一个圆，可以使用`arc()`方法，它...
我们可以使用`<canvas>`标签在HTML文档中创建一个画布，然后通过JavaScript的`CanvasRenderingContext2D`对象进行绘图操作，包括画线、填充颜色、绘制图像等。 描述中的"刮刮乐"效果，通常是模拟现实生活中刮刮卡的...