<!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. Maven编译项目报错：某些类找不到符号

      遇到Maven在编译项目源码时候出现找不到符号错误,主要归结为以下几个问题: 1. 可能项目编码格式不统一. 2. 可能项目编码使用的JDK版本不统一. 项目可能是当前项目也可能是继承的父项目,还 ...

  2. BZOJ2466——[中山市选]树

    1.题目大意:给你一棵树,树的每个节点都有一个权值,是0或1,最开始都是0,你可以做一种修改操作,就是把一个节点和它相邻的 节点的权值取反,问最少几次修改能把所有节点的权值变得都是1,最多100个节点 ...

  3. Unity内存申请和释放

    转自:http://www.jianshu.com/p/b37ee8cea04c 1.资源类型 GameObject, Transform, Mesh, Texture, Material, Shad ...

  4. php的Excel相关操作

    1.需求 把数据库的数据输出excel格式 2.解决方案 利用phpexcel中的examples的01和07,对excel文件的读写 3.操作流程 a.https://github.com/PHPO ...

  5. android开发中获取<meta-data>数据

    在 AndroidManifest.xml 中,<meta-data>元素是一个键值对,往往被包含在<application> .<activity>.<se ...

  6. Android 中 SQLite 数据库的查看

    当 SQLite 数据库创建完成后,如何查看数据库的内容呢?如果直接使用 File Explorer 查看,最多只能看到 database 目录下出现了一个 BookStore.db 文件,Book ...

  7. Android菜单Menu的创建

    在res目录下的menu文件夹下创建一个main.xml文件,内容如下: <?xml version="1.0" encoding="utf-8"?> ...

  8. 10 DelayQueue 延时队列类——Live555源码阅读(一)基本组件类

    这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. 本文由乌合之众 lym瞎编,欢迎转载 www.cnblogs.com/oloroso/ 本文由乌合 ...

  9. nested exception is java.lang.RuntimeException: Error parsing Mapper XML. Cause: java.lang.IllegalArgumentException: Result Maps collection already contains value for

    org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'daoSupport': ...

  10. git rebase简介(基本篇)

    原文: http://gitbook.liuhui998.com/4_2.html 一.基本 git rebase用于把一个分支的修改合并到当前分支. 假设你现在基于远程分支"origin& ...