首页 > 代码库 > CSS3跟随鼠标的眼睛转动效果

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

2024-07-11 08:22:35   221人阅读

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

 


联系
我们