<!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>
<title>JS打造的跟随鼠标移动的酷炫拓图案</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
html{
overflow:hidden;
}
body{
position:absolute;
height:100%;
width:100%;
margin:0;
padding:0;
}
#screen{
background:#000;
position:absolute;
width:100%;
height:100%;
}
#screen span{
background:#fff;
font-size:0;
overflow:hidden;
width:2px;
height:2px;
}
</style>
<script type="text/javascript">
var Follow = function () {
var $ = function (i) {return document.getElementById(i)},
addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent

('on'+e, function(){f.call(o)})},
OBJ = [], sp, rs, N = 0, m;
var init = function (id, config) {
this.config = config || {};
this.obj = $(id);
sp = this.config.speed || 4;
rs = this.config.animR || 1;
m = {x: $(id).offsetWidth * .5, y: $(id).offsetHeight * .5};
this.setXY();
this.start();
}
init.prototype = {
setXY : function () {
var _this = this;
addEvent(this.obj, 'mousemove', function (e) {
e = e || window.event;
m.x = e.clientX;
m.y = e.clientY;
})
},
start : function () {
var k = 180 / Math.PI, OO, o, _this = this, fn = this.config.fn;
OBJ[N++] = OO = new CObj(null, 0, 0);
for(var i=0;i<360;i+=20){
var O = OO;
for(var j=10; j<35; j+=1){
var x = fn(i, j).x,
y = fn(i, j).y;
OBJ[N++] = o = new CObj(O , x, y);
O = o;
}
}
setInterval(function() {
for (var i = 0; i < N; i++) OBJ[i].run();
}, 16);
}
}
var CObj = function (p, cx, cy) {
var obj = document.createElement("span");
this.css = obj.style;
this.css.position = "absolute";
this.css.left = "-1000px";
this.css.zIndex = 1000 - N;
document.getElementById("screen").appendChild(obj);
this.ddx = 0;
this.ddy = 0;
this.PX = 0;
this.PY = 0;
this.x = 0;
this.y = 0;
this.x0 = 0;
this.y0 = 0;
this.cx = cx;
this.cy = cy;
this.parent = p;
}
CObj.prototype.run = function () {
if (!this.parent) {
this.x0 = m.x;
this.y0 = m.y;
} else {
this.x0 = this.parent.x;
this.y0 = this.parent.y;
}
this.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp;
this.y = this.PY += (this.ddy += ((this.y0 - this.PY - this.ddy) + this.cy) / rs) / sp;
this.css.left = Math.round(this.x) + 'px';
this.css.top = Math.round(this.y) + 'px';
}
return init;
}();
</script>
</head>
<body>
<div id="screen"></div>
<script type="text/javascript">
new Follow('screen', {
speed: 4,
animR : 2,
fn : function (i, j) {
return {
x : j/4*Math.cos(i),
y : j/4*Math.sin(i)
}
}
})
</script>
</body>
</html>

<br><br><hr><p align="center"><font color=skyblue>本特效由 <a href="http://www.daimajiayuan.com"

target="_blank">代码家园</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好

者</font></p>

JS打造的跟随鼠标移动的酷炫拓扑图案的更多相关文章

  1. JS实现图片跟随鼠标移动

    在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里. 我们用到的只有这个对象的两个属性,clientX与cli ...

  2. js 实现div跟随鼠标移动

    今天看到了一个自己可以随心所欲的拖到div到页面的任意位置.感觉挺好的,就心血来潮的查询了一下,看看网友做的 代码如下: <script>function doit(){ var obj ...

  3. html5跟随鼠标炫酷网站引导页动画特效

    html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...

  4. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  5. JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习

    JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...

  6. js进阶 12-3 如何实现元素跟随鼠标移动

    js进阶 12-3 如何实现元素跟随鼠标移动 一.总结 一句话总结:获取鼠标位置,将鼠标位置设置为元素偏移即可. 1.用什么事件获取鼠标位置? 用mousemove可以获取鼠标移动的时候的位置 $(d ...

  7. jQuery背景跟随鼠标移动的网页导航

    首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search     首页 PSD模板 CSS模板 特效插件 ...

  8. Canvas跟随鼠标炫彩小球

    跟随鼠标炫彩小球 canvas没有让我失望,真的很有意思 实现效果 超级炫酷 实现原理 创建小球 给小球添加随机颜色,随机半径 鼠标移动通过实例化,新增小球 通过调用给原型新增的方法,来实现小球的动画 ...

  9. canvas实现跟随鼠标旋转的箭头

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

随机推荐

  1. 类调用类的protected或private的成员函数或成员变量

    1.在其中一个类定义友元函数,则可以实现该类直接使用另外类的里所有内容. 一般实例化两个类,友元类以及自身类,实现友元类传递指针到自身类 2.如果两个类是可以继承的关系,则在子类里继承该类,实现在子类 ...

  2. Effective Java 读书笔记之四 泛型

    泛型的本质是参数化类型.只对编译器有效. 一.请不要在新代码中使用原生态类型 1.泛型类和接口统称为泛型,有一个对应的原生态类型. 2.原生类型的存在是为了移植兼容性. 3.无限制通配类型和原生态类型 ...

  3. HDU 5122 K.Bro Sorting（2014北京区域赛现场赛K题 模拟）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5122 解题报告:定义一种排序算法,每一轮可以随机找一个数,把这个数与后面的比这个数小的交换,一直往后判 ...

  4. iOS开发——UI进阶篇（七）程序启动原理、打电话、发短信

    一.Info.plist常见的设置 1.建立一个工程后,会在Supporting files文件夹下看到一个“工程名-Info.plist”的文件,该文件对工程做一些运行期的配置,非常重要,不能删除 ...

  5. 在Linux上配置无线网络

    导读 iwconfig是Linux Wireless Extensions(LWE)的用户层配置工具之一.LWE是Linux下对无线网络配置的工具,包括内核的支持.用户层配置工具和驱动接口的支持三部分 ...

  6. Windows8笔记

    一.WIN8 硬盘变为可弹出设备 如果电脑使用的是nforce芯片组的主板和串口硬盘.在系统中安装好所有的硬件驱动程序后,会出现这种情况.这是nforce芯片组在安装了IDE-SW主板驱动以后,系统会 ...

  7. caffe学习系列（6）:其他层介绍

    主要包括softmax-loss层(与softmax有区别),全连接层(Inner Prouduct),accuracy层,reshape层, Dropout层. softmax: layers { ...

  8. gulp学习笔记1-定义

    1.gulp是前端开发过程中对代码进行构建的自动化工具,可以通过它提供的各种插件实现如:预编译(sass&less).压缩.合并.图片精灵等前端的重复操作 2.基于nodeJS,以js编写插件 ...

  9. (原创)Activity启动模式之singleTask

    android中activity有四种启动模式 standard(默认):在同一个任务栈中可以有重复的activity,基本没什么限制 singleTop:只有当此activity在栈顶时,去创建它, ...

  10. u-boot 2011.09 调用kernel 的流程

    这段时候我总是觉得有个问题,u-boot 的存在是不是就是为了调用kernel 而存在的. 所以,粗浅的跟了一下这个流程,还有很多细节上的东西没有做好,往指正. u-boot-2011.9 调用内核代 ...