一个挺漂亮的鼠标效果，带跟随效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

十度

HTML代码

复制格式化注释注释清空

放大

<html>
	<head>
		<title>follow mouse
		</title>
		<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>

​x
 
<html>
    <head>
        <title>follow mouse
        </title>
        <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;

CSS代码

复制格式化注释注释颜色清空

放大

xxxxxxxxxx
 
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;
}
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

一个挺漂亮的鼠标效果，带跟随效果

分类

鼠标特效

描述

一个用JavaScript写的挺漂亮的鼠标跟随效果，其实严格来讲不是标准的鼠标跟随，过了年回来写的第一个效果，有点烟花的味道，也算是过了年有感而发吧，奉送给JS的各位达人们。