CSS3跟随鼠标的眼睛转动效果

2020-01-27 14:18:34

字体：大中小

来源：转载

供稿：网友

红薯大眼睛跟随鼠标转动效果，鼠标移在哪里，眼睛就跟向哪里，CSS3与jQuery结合的例子，很有趣的网页特效，期待大这学习分享，请使用火狐或Chrome测试，IE9以下版本看不到效果。

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS3跟随鼠标的眼睛转动效果</title><script id="jquery_183" type="text/javascript" class="library" src="/ajaxjs/jquery-1.7.2.min.js"></script></head><body><div class='content'><p style='text-align:center;'><div class='eye_wrapper' id='eyeballs'><img alt="Head" class="head" src="/d/file/p/2020/01-27/d91a0bd1927580b1c7626c75227081ee.png" style="width:141px;margin:20px auto;" /><img alt="Ball" class="eye-left" id="eye_left" src="/d/file/p/2020/01-27/b3115702cc7ac08c1eb2b73c1a867b0d.png" /><img alt="Ball" class="eye-right" id="eye_right" src="/d/file/p/2020/01-27/b3115702cc7ac08c1eb2b73c1a867b0d.png" /></div></p></div></div><style>.eye_wrapper{	width:141px;	height:185px;	margin:80px auto;	position:relative;}.eye_wrapper .head{	z-index:1px}.eye_wrapper .eye-left{	position:absolute;	top:82px;	left:30px}.eye_wrapper .eye-right{	position:absolute;	top:80px;	left:96px}</style><script>var getAngle = function(Xc, Yc, Xa, Ya, Xb, Yb) {var v1x = Xb - Xc;var v1y = Yb - Yc;var v2x = Xa - Xc;var v2y = Ya - Yc;return 180 * (Math.atan2(v1x, v1y) - Math.atan2(v2x, v2y)) / Math.PI};var left_center_offset = {	left: 30,	top: 82},right_center_offset = {	left: 96,	top: 80},radius = 10;var setEyeOffset = function(event) {	var offset = $(".eye_wrapper").offset();	var x1 = offset.left + left_center_offset.left;	var y1 = offset.top + left_center_offset.top;	var x2 = offset.left + right_center_offset.left;	var y2 = offset.top + right_center_offset.top;	var n1 = event.clientX - x1;	var m1 = -(event.clientY - y1);	var k1 = Math.atan2(m1, n1);	var n2 = event.clientX - x2;	var m2 = -(event.clientY - y2);	var k2 = Math.atan2(m2, n2);	var x11 = (Math.cos(k1) * radius + x1).toFixed(0);	var y11 = (( - Math.sin(k1) * radius) + y1).toFixed(0);	$(".eye-left").offset({		left: x11,		top: y11	});	var x22 = (Math.cos(k2) * radius + x2).toFixed(0);	var y22 = (( - Math.sin(k2) * radius) + y2).toFixed(0);	$(".eye-right").offset({		left: x22,		top: y22	})};$(window).mousemove(setEyeOffset);</script>请使用火狐或Chrome测试，IE9以下版本看不到效果。</body></html>

上一篇：纯CSS3实现动画不规则的tab标签切换代码

下一篇：未知图片大小的自动水平和垂直居中方法

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注