zoukankan      html  css  js  c++  java
  • 一款基于jQuery有趣的眼睛随鼠标进行有磁性的旋转

    一款基于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特效

  • 相关阅读:
    log4j配置详解
    elasticsearch6.0版本安装head插件
    JAVA笔记-如何将百万级数据高效的导出到Excel表单
    抽象方法为什么不能被private与static修饰
    vue利用promise实现连续弹框
    vue代码片段
    h5元素高度超出屏幕但不滚动
    css3动画
    vue 引入静态图片404
    ios windows.open()不能打开
  • 原文地址:https://www.cnblogs.com/heyoung/p/3075951.html
Copyright © 2011-2022 走看看