<!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="/jscss/demoimg/201304/head.png" style="width:141px;margin:20px auto;" /> <img alt="Ball" class="eye-left" id="eye_left" src="/jscss/demoimg/201304/ball.png" /> <img alt="Ball" class="eye-right" id="eye_right" src="/jscss/demoimg/201304/ball.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>