一款基于jQuery有趣的眼睛随鼠标进行有磁性的旋转
2013-05-13 16:09
579 查看
一款基于jQuery有趣的眼睛随鼠标进行有磁性的旋转,鼠标在何方,眼睛就往哪个方向转动,非常的的有趣的jQuery特效。适用浏览器:FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。
主要代码如下:
浏览的效果图如下:
特效来源地址:http://www.jqshare.com/Jq/fondone/id/89.html
更多特效请关注:jquery特效
主要代码如下:
<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>
浏览的效果图如下:
特效来源地址:http://www.jqshare.com/Jq/fondone/id/89.html
更多特效请关注:jquery特效
相关文章推荐
- 基于jquery眼睛随鼠标旋转特效 - jQuery分享
- 一款基于jquery打造的鼠标响应式顶部弹出窗口特效
- 一款基于css3鼠标经过圆形旋转特效
- 一款基于jQuery的支持鼠标拖拽滑动焦点图
- 一款基于jQuery的支持鼠标拖拽滑动焦点图
- 一款基于jquery的鼠标经过图片列表特效
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
- 一款基于css3鼠标经过圆形旋转特效
- 一款基于jquery的鼠标经过图片列表特效
- 一张图片 点击鼠标放大,再点缩小 ( 基于jquery1.8.3), 另外推荐一款插件:lightBox...效果不错。
- 一款基于jquery实现的鼠标单击出现水波特效
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
- 一款基于jquery的手风琴图片展示效果
- 分享一款基于jQuery的QQ表情插件
- 基于jQuery创建鼠标悬停效果的方法
- 基于jquery的鼠标拖动效果代码
- 基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
- 一款基于jQuery的联动Select下拉框
- 一款基于jquery的下拉点击改变背景图片