创建跟随鼠标 眼睛 jQuery Eyes Follow Mouse.js

  • 源码大小:7.27KB
  • 所需积分:1积分
  • 源码编号:19JP-3155
  • 浏览次数:693次
  • 最后更新:2023年05月12日
  • 所属栏目:其他
本站默认解压密码:19jp.com 或 19jp_com

简介

一个轻量级的jQuery插件可以让你创建有趣的交互式眼睛,跟随光标的移动,让你的网站栩栩如生

参见:

  • 让眼睛看着光标移动-jQuery BeautifulEyes
  • 动画眼睛移动时跟随光标-jqEye

如何使用它:

1.在网页中添加眼睛。

  1. <div class="eyes">
  2. <div class="eye">
  3. <div class="eye-retina"></div>
  4. </div>
  5. <div class="eye">
  6. <div class="eye-retina"></div>
  7. </div>
  8. </div>
  1. /* example CSS */
  2. .eyes {
  3. width: 200px;
  4. height: 100px;
  5. position: relative;
  6. border-radius: 100px / 50px;
  7. background-color: white;
  8. display: flex;
  9. justify-content: center;
  10. align-items: center;
  11. overflow: hidden;
  12. }
  13.  
  14. .eye {
  15. width: 80px;
  16. height: 80px;
  17. border-radius: 50%;
  18. background-color: #666666;
  19. position: absolute;
  20. top: 10%;
  21. transition: transform .2s ease-in-out;
  22. }
  23.  
  24. .eye-retina {
  25. width: 40px;
  26. height: 40px;
  27. border-radius: 50%;
  28. background-color: white;
  29. position: absolute;
  30. top: 20%;
  31. left: 20%;
  32. transform: translate(-50%, -50%);
  33. }

2.加载jquery.eyes-follow-mouse.js在jQuery之后。就是这样。

  1. <!-- jQuery is required -->
  2. <script src="/path/to/cdn/jquery.min.js"></script>
  3.  
  4. <!-- jQuery eyes-follow-mouse.js -->
  5. <script src="/path/to/jquery.eyes-follow-mouse.js"></script>

预览截图