- 浏览: 111370 次
- 性别:
- 来自: 深圳
最新评论
-
lmh2072005:
hisense731 写道也可以这样就不用报错了。var da ...
new Date(date) -
hisense731:
也可以这样就不用报错了。
var date = "A ...
new Date(date) -
vimest:
知道IE的就已经足够了,opera,chrome,safari ...
再次总结下css的一些hack
<!DOCTYPE HTML>
<html>
<head>
<title> trails </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
*{margin:0;padding:0;}
.box{
position:absolute;
border:1px solid #000;
border-radius:5px;
color:green;
width:10px;
height:10px;
line-height:3px;
text-indent:3px;
text-align:center;
}
</style>
</head>
<body>
<div id="box" style="left:100px;top:100px;" class="box">.</div>
<div id="box1" style="left:300px;top:400px;" class="box">.</div>
<div id="box2" style="left:500px;top:500px;" class="box">.</div>
<script>
function tracker(obj){
this.aim = obj.aim || 'mouse'; //目标默认为鼠标
this.aimLeft = 0; //表示当前目标的位置
this.aimTop = 0;
this.trailsman = obj.trails; //跟踪者
this.trailsLeft = parseInt(this.trailsman.style.left,10); //表示当前跟踪者的位置
this.trailsTop = parseInt(this.trailsman.style.top,10);
this.setPos = function(){
var dis = Math.sqrt(Math.pow((this.aimLeft-this.trailsLeft), 2) + Math.pow((this.aimTop - this.trailsTop), 2)),
angleX = (this.aimLeft-this.trailsLeft)/dis,
angleY = (this.aimTop - this.trailsTop)/dis,
speed = obj.speed || 2,
speedX = speed * angleX,
speedY = speed * angleY;
this.trailsLeft += speedX;
this.trailsTop += speedY;
this.trailsman.style.left = this.trailsLeft + 'px';
this.trailsman.style.top = this.trailsTop + 'px';
}
}
var box = document.getElementById('box');
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var eg = [box,box1,box2];
for(var i = 0,j = eg.length;i < j;i++){
(function(i){
eg[i] = new tracker({
trails:eg[i]
});
if(eg[i].aim == 'mouse'){
addEvent(document,"mousemove",function(e){
eg[i].aimLeft = getMos(e).x, //表示当前目标的位置
eg[i].aimTop = getMos(e).y;
});
}
setInterval(function(){eg[i].setPos();},10); //设置跟踪者的位置
})(i)
}
function addEvent(obj,type,fn){
if(obj.attachEvent){
obj.attachEvent("on"+type,fn);
}else if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}
}
function getMos(e){
var x = y = 0,
e = e || window.event,
doc = document.documentElement || document.body;
if(e.pageX){
x = e.pageX;
y = e.pageY;
}else{
x = e.clientX + doc.scrollLeft - doc.clientLeft;
y = e.clientY + doc.scrollTop - doc.clientTop;
}
return {x:x,y:y};
}
</script>
</body>
</html>
- setPos.rar (1.2 KB)
- 下载次数: 1
发表评论
-
javascript 判断对象的值是否相等
2012-08-02 10:04 3799经常要判断两个对象的值是否相等 ,写了个方法用来比较,和对象深 ... -
iframe编辑器1
2012-02-24 10:58 1398<iframe frameborder="0& ... -
javascript 判断操作系统
2011-12-12 11:53 1133function checkSys() { //var ... -
js获取地址栏参数
2011-11-18 15:00 1417根据参数获取相应的值 1. func ... -
JSON对象和字符串
2011-11-14 16:43 1575JSON和字符串互转在ajax交互中经常用到,以前用过eval ... -
兼容outerHTML
2011-11-11 12:03 5590obj.innerHTML 经常用到 obj.ou ... -
javascript中的编码和解码
2011-11-11 10:59 14761. encodeURIComponent(url) 函数可把 ... -
css之-webkit-scrollbar
2011-10-11 16:51 6409在IE中可以自定义滚动条的样式 ,基于webkit的浏览 ... -
css3-animation
2011-09-28 12:05 1372css3的animation支持动画 ,以前用过tran ... -
鼠标滚轮事件
2011-08-19 17:19 930滚轮事件:IE/chrome/opera/saf ... -
css3
2011-08-10 16:29 1081记录下部分常用的css3 1.transform (变形、转 ... -
new Date(date)
2011-08-08 12:22 2076在做日历插件的时候遇到的记录一下: var date = & ... -
background-position百分比
2011-08-04 17:23 1240平常习惯于使用描述性的left、top、cente ... -
Model-View-Controller (MVC) with JavaScript
2011-08-01 18:40 812转自:http://www.alexatnet.com/con ... -
关于圆角的问题,谁有更好的方式?
2011-07-28 12:36 753现在越来越多的网站喜欢上了圆角,css3 可以很轻松的实现 , ... -
更新下前端相关笔记
2011-07-27 18:57 2287color:red; /* 所有浏览 ... -
获取页面元素的位置
2011-07-26 18:14 919通常需要到获取页面元素相对窗口的位置: func ... -
再说display的inline-block属性
2011-07-19 12:24 1055以前用惯了float来进行页面item的布局,发现用in ... -
javascript Object.extend的用法
2011-07-18 18:05 4015javascript Object.extend的用法 ... -
正则表达式笔记
2011-07-14 18:31 833使用RegExp的显式构造 ...
相关推荐
一种幻灯片的文本跟踪效果
一个动态的图片鼠标跟踪源代码,喜欢的朋友可以自己修改实现其他更有趣的效果
第1章 javascript概述 1 1.1 什么是脚本语言 2 1.2 javascript简介 2 1.3 javascript与java的关系 3 1.4 javascript的基本构成 4 1.4.1 基本数据类型 4 1.4.2 变量 4 1.4.3 常量 5 1.4.4 表达式 6 1.4.5 ...
跟踪网页特效是执行的哪段javascript代码(chrome谷歌浏览器,firefox火狐浏览器).zip
Tracking.js 是一个独立的JavaScript库,用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色,也可以是人,也就是说我们可以通过检测到某特定颜色,或者检测一个人体/脸的出现与移动,来触发JavaScript 事件。它...
首次运行koans时,将显示运行时错误和指示错误发生位置的堆栈跟踪。 您的目标是使错误消失。 修复每个错误时,您应该大致了解Java语言和函数式编程。 您的Java启蒙之旅始于koans / AboutExpects.js文件。 这些可汗...
使用人脸跟踪的javascript中的视差效果可以很好地改善3d场景。如果用户禁止使用相机,则不会加载任何东西。该库在CPU上使用带有WASM后端的TFJS,因此您的GPU将是免费的。 灵感来自 现场例子 安装 运行npm install ...
首次运行koans时,将显示运行时错误和指示错误发生位置的堆栈跟踪。 您的目标是使错误消失。 修复每个错误时,您应该大致了解Java语言和函数式编程。 您的Java启蒙之旅始于koans / AboutExpects.js文件。 这些可汗...
随着用户越来越关注隐私并越来越注意防止在线跟踪,用户开始使用广告拦截器和脚本拦截器来阻止JavaScript跟踪脚本。目前,研究人员已经发现了一种新方法,利用HTML和CSS来跟踪网站访问者的鼠标移动,还可以绕过跟踪...
首次运行koans时,将显示运行时错误和指示错误发生位置的堆栈跟踪。 您的目标是使错误消失。 修复每个错误时,您应该大致了解Java语言和函数式编程。 您的Java启蒙之旅始于koans / AboutExpects.js文件。 这些可汗...
9款很棒的网页绘制图表JavaScript框架脚本1.FlotFlot是基于 jQuery框架绘制图表的纯...重要的是它使用简便(还有很多可选的设置)、吸引人的视觉 效果和交互功能,如图表缩放和鼠标跟踪等。该javascript框架适用
巴松管追踪器基于浏览器的老式Amiga音乐跟踪器,使用简单的旧JavaScript。 播放和编辑Amiga模块文件和FastTracker 2 XM文件。 现场演示,为 如果您曾经听说过或 ,那么您就会知道演练, 如果没有,那么您可能太年轻...
首次运行koans时,将显示运行时错误和指示错误发生位置的堆栈跟踪。 您的目标是使错误消失。 修复每个错误时,您应该大致了解Java语言和函数式编程。 您的Java启蒙之旅始于koans / AboutExpects.js文件。 这些可汗...
首次运行koans时,将显示运行时错误和指示错误发生位置的堆栈跟踪。 您的目标是使错误消失。 修复每个错误时,您应该大致了解Java语言和函数式编程。 您的Java启蒙之旅始于koans / AboutExpects.js文件。 这些可汗...
首次运行koans时,将显示运行时错误和指示错误发生位置的堆栈跟踪。 您的目标是使错误消失。 修复每个错误时,您应该大致了解Java语言和函数式编程。 您的Java启蒙之旅始于koans / AboutExpects.js文件。 这些可汗...
首次运行koans时,将显示运行时错误和指示错误发生位置的堆栈跟踪。 您的目标是使错误消失。 修复每个错误时,您应该大致了解Java语言和函数式编程。 您从koans / AboutExpects.js文件开始您的Javascript启蒙之旅。...
我的应用程序旨在供父母或年龄较大的孩子使用,他们将跟踪正在阅读的书籍以及大声阅读的时间。 产品特点 内置React,JavaScript,CSS和HTML 利用Firebase和Google Auth进行用户登录 用户可以在其收藏夹中添加和...
其实我们轮播的原理和以前相同,都是通过改变元素的位置来控制图片的出现,但让我们不是很上手的,是那些用于跟踪触摸的属性。 下面,我简单介绍一下与触摸相关的知识 触摸事件 touchstart:当手指触摸屏幕时触发,...