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

浏览数：25 / 时间：2015年06月09日

<!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>