一款基于jQuery有趣的眼睛随鼠标进行有磁性的旋转,鼠标在何方,眼睛就往哪个方向转动,非常的的有趣的jQuery特效。适用浏览器:FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。
主要代码如下:
1 <script> 2 var getAngle = function(Xc, Yc, Xa, Ya, Xb, Yb) { 3 var v1x = Xb - Xc; 4 var v1y = Yb - Yc; 5 var v2x = Xa - Xc; 6 var v2y = Ya - Yc; 7 return 180 * (Math.atan2(v1x, v1y) - Math.atan2(v2x, v2y)) / Math.PI 8 }; 9 var left_center_offset = { 10 left: 30, 11 top: 82 12 }, 13 right_center_offset = { 14 left: 96, 15 top: 80 16 }, 17 radius = 10; 18 var setEyeOffset = function(event) { 19 var offset = $(".eye_wrapper").offset(); 20 var x1 = offset.left + left_center_offset.left; 21 var y1 = offset.top + left_center_offset.top; 22 var x2 = offset.left + right_center_offset.left; 23 var y2 = offset.top + right_center_offset.top; 24 var n1 = event.clientX - x1; 25 var m1 = -(event.clientY - y1); 26 var k1 = Math.atan2(m1, n1); 27 var n2 = event.clientX - x2; 28 var m2 = -(event.clientY - y2); 29 var k2 = Math.atan2(m2, n2); 30 var x11 = (Math.cos(k1) * radius + x1).toFixed(0); 31 var y11 = (( - Math.sin(k1) * radius) + y1).toFixed(0); 32 $(".eye-left").offset({ 33 left: x11, 34 top: y11 35 }); 36 var x22 = (Math.cos(k2) * radius + x2).toFixed(0); 37 var y22 = (( - Math.sin(k2) * radius) + y2).toFixed(0); 38 $(".eye-right").offset({ 39 left: x22, 40 top: y22 41 }) 42 }; 43 $(window).mousemove(setEyeOffset); 44 </script>
浏览的效果图如下:
特效来源地址:http://www.jqshare.com/Jq/fondone/id/89.html
更多特效请关注:jquery特效