jquery实现三十种鼠标悬浮动画效果代码
代码语言：html
所属分类：悬停
代码描述：jquery实现三十种鼠标悬浮动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
a {
color: #999;
text-decoration: none;
}
li {
list-style: none;
}
body {
background-color: #222222;
}
.xs_ul {
width: 1072px;
margin: 100px auto 0;
font-size: 0;
line-height: 0;
}
.xs_ul li {
display: inline-block;
font-size: 20px;
line-height: 20px;
background: #fff;
margin: 20px;
}
.xs_ul li a {
display: block;
width: 76px;
text-align: center;
padding: 15px 30px;
border: 1px solid #000;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
(function() {
function b(t, u, s) {
this.t = t;
this.u = u;
this.c = s.color;
this.m1();
};
b.prototype = {
m1: function() {
var t = this;
t.d = false;
if (t.t.css('position') != 'fixed' && t.t.css('position') != 'absolute') {
t.t.css('position', 'relative');
}
t.w = t.t.width();
t.h = t.t.height();
t.t.children().each(function() {
if ($(this).css('position') != 'fixed' && $(this).css('position') != 'absolute') {
$(this).css({
'position': 'relative', 'z-index': '2'
});
} else if (parseInt($(this).css('z-index')) < 2) {
$(this).css({
'z-index': '2'
});
}
});
if (t.t.css('background-color') != "rgba(0, 0, 0, 0)") {
t.bc = t.t.css('background-color');
} else {
t.bc = '#ffffff';
}
t.t.append('<canvas width="'+t.w+'" height="'+t.h+'" style="position:absolute; top:0; left:0; z-index:1;"></canvas>');
t.ctx = t.t.children('canvas')[0].getContext('2d');
if (t.c === false) {
t.t.mouseenter(function() {
t.c = 'hsl('+(Math.random()*360)+',60%,80%)';
t.ctx.fillStyle = t.c;
});
} else {
t.ctx.fillStyle = t.c;
};
t.t.mousemove(function(e) {
t.x = e.pageX - t.t.offset().left-parseInt(t.t.css('border-left-width'));
t.y = e.pageY - t.t.offset().top-parseInt(t.t.css('border-top-width'));
});
t.a = [];
t.t.mouseenter(function(e) {
t.f = true;
t.x = e.pageX - t.t.offset().left-parseInt(t.t.css('border-left-width'));
t.y = e.pageY - t.t.offset().top-parseInt(t.t.css('border-top-width'));
t.n1();
});
t.t.mouseleave(function() {
t.f = false;
});
t.ctx.clearRect(0, 0, t.w, t.h);
},
n1: function() {
var t = this;
if (t.u <= 0) {
console.warn('请注意，没有第'+t.u+'个效果！！');
return false;
}
if (t.u <= 10) {
if (t.u == 1) {
if (t.a.length == 0) {
t.x1(t);
}
} else if (t.u == 2) {
if (t.a.length == 0) {
for (var i = 0; i < t.w/2; i++) {
t.a[i] = {
y: t.h
};
}
}
if (!t.d) {
t.d = true;
t.x2(t);
}
} else if (t.u == 3) {
if (t.a.length == 0) {
t.x3(t);
}
} else if (t.u == 4) {
if (t.a.length == 0) {
for (var i = 0; i < t.h/5; i++) {
if (i%2) {
t.a[i] = {
x: t.w,
y: 5*i,
w: t.w,
h: 5
};
} else {
t.a[i] = {
x: -t.w,
y: 5*i,
w: t.w,
h: 5
};
}
}
}
if (!t.d) {
t.d = true;
t.x4(t);
}
} else if (t.u == 5) {
if (t.a.length == 0) {
t.x5(t);
}
} else if (t.u == 6) {
if (t.a.length == 0) {
t.x6(t);
}
} else if (t.u == 7) {
if (t.a.length == 0) {
t.x7(t);
}
} else if (t.u == 8) {
if (t.a.length == 0) {
t.x8(t);
}
} else if (t.u == 9) {
if (t.a.length == 0) {
t.x9(t);
}
} else if (t.u == 10) {
if (t.a.length == 0) {
t.x10(t);
}
}
} else if (t.u <= 20) {
if (t.u == 11) {
if (t.a.length == 0) {
t.x11(t);
}
} else if (t.u == 12) {
if (t.a.length == 0) {
t.x12(t);
}
} else if (t.u == 13) {
t.o = 1;
if (t.a.length == 0) {
for (var i = 0; i < 4; i++) {
t.a[i] = {
x: t.w/2,
y: t.h/2,
c: t.c
};
}
t.m = 0;
t.z = Math.sqrt(Math.pow(t.w/2, 2)+Math.pow(t.h/2, 2));
t.a[0].x1 = t.w/2 - t.z; t.a[0].y1 = t.h/2;
t.a[1].x1 = t.w/2 + t.z; t.a[1].y1 = t.h/2;
t.a[2].x1 = t.w/2; t.a[2].y1 = t.h/2 + t.z;
t.a[3].x1 = t.w/2; t.a[3].y1 = t.h/2 - t.z;
}
if (!t.d) {
t.d = true;
t.x13(t);
}
} else if (t.u == 14) {
if (t.a.length == 0) {
t.z = Math.ceil(t.h/3);
t.zx = t.w/20;
t.zy = t.z/10;
t.a[0] = {
x: 0,
y: -t.z,
w: t.w,
h: t.z
};
t.a[1] = {
x: 0,
y: t.h,
w: t.w,
h: t.z
};
t.a[2] = {
x: -t.w,
y: t.z,
w: t.w,
h: t.z
};
t.a[3] = {
x: t.w,
y: t.z,
w: t.w,
h: t.z
};
}
if (!t.d) {
t.d = true;
t.x14(t);
}
} else if (t.u == 15) {
if (t.a.length == 0) {
for (var i = 0; i < t.w/2; i++) {
t.a[i] = {
x: i*2,
y: t.h,
w: 2,
h: t.h
};
}
}
if (!t.d) {
t.z = 0;
t.d = true;
t.x15(t);
}
} else if (t.u == 16) {
if (t.a.length == 0) {
t.zx = t.w/20;
t.zy = t.h/20;
if (Math.random() < .5) {
if (Math.random() < .5) {
t.a[0] = {
x: 0,
y: 0,
w: 0,
h: 0
};
} else {
t.a[0] = {
x: t.w,
y: 0,
w: 0,
h: 0
};
}
} else {
if (Math.random() < .5) {
t.a[0] = {
x: 0,
y: t.h,
w: 0,
h: 0
};
} else {
t.a[0] = {
x: t.w,
y: t.h,
w: 0,
h: 0
};
}
}
}
if (!t.d) {
t.d = true;
t.x16(t);
}
} else if (t.u == 17) {
if (t.a.length == 0) {
for (var i = 0; i < 11; i++) {
t.a[i] = {};
t.a[i].x = i/10*.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0