<!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. hash-2.hashMap

    1.HashMap的数据结构 a.HashMap是一个链表散列的结合体,即,数组和链表的结合体. b.HashMap类中定义了Entry类型的数组,Entry [ ] ,Entry有key value ...

  2. 吉他笔记 solo 和弦 推弦 音程

    十二平均律: 如下图所示: 第一行为唱名:do re mi fa so.... 第二行为音名:C #C D #D E F #F G #G A #A B C 第三行为D调对应的音名,即1 = D 第四行 ...

  3. windows server 2008 R2 SP1 安装exchange 2010

    一. 先决条件 若在windows server R2 SP1企业版系统上典型安装exchange server2010 SP3,则需要提前确定一下先决条件 AD域环境,域和林的功能级别必须是wind ...

  4. Spring mvc 报错：No qualifying bean of type [java.lang.String] found for dependency:

    具体错误: No qualifying bean of type [java.lang.String] found for dependency: expected at least 1 bean w ...

  5. hdu4747——Mex

    1.题目大意:对一个序列的每一个区间求Mex,最后所有的mex相加(mex就是SG的那个),力求nlogn... 2.分析:最近开始刷线段树了,还是有很多不会啊 首先把1-1 1-2 1-- 1-n这 ...

  6. Android中加载位图的方法

    Android中加载位图的关键的代码: AssetManager assets =context.getAssets(); //用一个AssetManager 对象来从应用程序包的已编译资源中为工程加 ...

  7. Java 反射的应用

    在学习反射之前,让我们先了解“类(Class)”.“方法”.“属性”.“类”都是名词,那么相应的在Java中会有这样一些特殊的类:“方法类(Method类)”.“属性类(Field类)”.“构造器类( ...

  8. C语言文件操作

    C语言文件操作,以下以基本的例子和说明来展开怎么通过C语言来进行文件操作. 操作文件,我们得需要知道什么?当然是路径和文件名. 首先我需要知道我操作的文件在哪里,叫什么名字.在C语言中还存在一个打开方 ...

  9. java抓取快递信息

    package zeze; import java.io.IOException; import org.jsoup.Connection; import org.jsoup.Jsoup; impor ...

  10. Quartz表达式详解（转载）

    1.   CronTrigger时间格式配置说明 CronTrigger配置格式: 格式: [秒] [分] [小时] [日] [月] [周] [年] 序号 说明 是否必填 允许填写的值 允许的通配符 ...