CSS3跟隨鼠標的眼睛轉動效果

2024-09-05 12:17:09

字體：大中小

來源：轉載

供稿：網友

紅薯大眼睛跟隨鼠標轉動效果，鼠標移在哪里，眼睛就跟向哪里，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   id="dvptpzj"   class='content'><p style='text-align:center;'><div   id="bfvxnl7"   class='eye_wrapper' id='eyeballs'><img alt="Head" class="head" src="/d/file/p/2024/09-05/83e4fd26c6a9ebf7d12c1e9df6277e5e.png" style="width:141px;margin:20px auto;" /><img alt="Ball" class="eye-left" id="eye_left" src="/d/file/p/2024/09-05/5e6da2b9bf54fb8ac9e5a1487686c6ab.png" /><img alt="Ball" class="eye-right" id="eye_right" src="/d/file/p/2024/09-05/5e6da2b9bf54fb8ac9e5a1487686c6ab.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標簽切換代碼

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注