经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » JavaScript » 查看文章
基于JS实现动态跟随特效的示例代码
来源：jb51　　时间：2022/6/20 10:21:41　　对本文有异议

演示

技术栈

这次用到了关于css的一些功能，和jQuery。

CSS3中添加的新属性animation是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

通过 @keyframes 规则，您能够创建动画。

@keyframes定义一个动画，并定义具体的动画效果，比如是放大还是位移等等。

@keyframes 它定义的动画并不直接执行，需要借助animation来运转。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。

源码

css部分

  1. .container{
  2. 	text-align:center;
  3. 	perspective:500px;
  4. 	-webkit-perspective:500px;
  5. 	border: 1px solid;
  6. }
  7. .example{
  8. 	display:table-cell;
  9. 	vertical-align:middle;
  10. 	color: #fff;
  11. 	width: 150px;
  12. 	height: 150px;
  13. 	background:url(../images/01.jpg) no-repeat;
  14. }
  15.  
  16. @-webkit-keyframes topenter {
  17.     from {
  18.         -webkit-transform-origin:top;
  19.         -webkit-transform:rotateX(-90deg);
  20.     }
  21.     to {
  22.         -webkit-transform-origin:top;
  23.         -webkit-transform:rotateX(0deg);
  24.     }
  25. }
  26. @keyframes topenter {
  27.     from {
  28.         transform-origin:top;
  29.         transform:rotateX(-90deg);
  30.     }
  31.     to {
  32.         transform-origin:top;
  33.         transform:rotateX(0deg);
  34.     }
  35. }
  36. @-webkit-keyframes topleave {
  37.     from {
  38.         -webkit-transform-origin:top;
  39.         -webkit-transform:rotateX(0deg);
  40.     }
  41.     to {
  42.         -webkit-transform-origin:top;
  43.         -webkit-transform:rotateX(-90deg);
  44.     }
  45. }
  46. @keyframes topleave {
  47.     from {
  48.         transform-origin:top;
  49.         transform:rotateX(0deg);
  50.     }
  51.     to {
  52.         transform-origin:top;
  53.         transform:rotateX(-90deg);
  54.     }
  55. }
  56. @-webkit-keyframes bottomenter {
  57.     from {
  58.         -webkit-transform-origin:bottom;
  59.         -webkit-transform:rotateX(90deg);
  60.     }
  61.     to {
  62.         -webkit-transform-origin:bottom;
  63.         -webkit-transform:rotateX(0deg);
  64.     }
  65. }
  66. @keyframes bottomenter {
  67.     from {
  68.         transform-origin:bottom;
  69.         transform:rotateX(90deg);
  70.     }
  71.     to {
  72.         transform-origin:bottom;
  73.         transform:rotateX(0deg);
  74.     }
  75. }
  76. @-webkit-keyframes bottomleave {
  77.     from {
  78.         -webkit-transform-origin:bottom;
  79.         -webkit-transform:rotateX(0deg);
  80.     }
  81.     to {
  82.         -webkit-transform-origin:bottom;
  83.         -webkit-transform:rotateX(90deg);
  84.     }
  85. }
  86. @keyframes bottomleave {
  87.     from {
  88.         transform-origin:bottom;
  89.         transform:rotateX(0deg);
  90.     }
  91.     to {
  92.         transform-origin:bottom;
  93.         transform:rotateX(90deg);
  94.     }
  95. }
  96. @-webkit-keyframes leftenter {
  97.     from {
  98.         -webkit-transform-origin:left;
  99.         -webkit-transform:rotateY(90deg);
  100.     }
  101.     to {
  102.         -webkit-transform-origin:left;
  103.         -webkit-transform:rotateY(0deg);
  104.     }
  105. }
  106. @keyframes leftenter {
  107.     from {
  108.         transform-origin:left;
  109.         transform:rotateY(90deg);
  110.     }
  111.     to {
  112.         transform-origin:left;
  113.         transform:rotateY(0deg);
  114.     }
  115. }
  116. @-webkit-keyframes leftleave {
  117.     from {
  118.         -webkit-transform-origin:left;
  119.         -webkit-transform:rotateY(0deg);
  120.     }
  121.     to {
  122.         -webkit-transform-origin:left;
  123.         -webkit-transform:rotateY(90deg);
  124.     }
  125. }
  126. @keyframes leftleave {
  127.     from {
  128.         transform-origin:left;
  129.         transform:rotateY(0deg);
  130.     }
  131.     to {
  132.         transform-origin:left;
  133.         transform:rotateY(90deg);
  134.     }
  135. }
  136. @-webkit-keyframes rightenter {
  137.     from {
  138.         -webkit-transform-origin:right;
  139.         -webkit-transform:rotateY(-90deg);
  140.     }
  141.     to {
  142.         -webkit-transform-origin:right;
  143.         -webkit-transform:rotateY(0deg);
  144.     }
  145. }
  146. @keyframes rightenter {
  147.     from {
  148.         transform-origin:right;
  149.         transform:rotateY(-90deg);
  150.     }
  151.     to {
  152.         transform-origin:right;
  153.         transform:rotateY(0deg);
  154.     }
  155. }
  156. @-webkit-keyframes rightleave {
  157.     from {
  158.         -webkit-transform-origin:right;
  159.         -webkit-transform:rotateY(0deg);
  160.     }
  161.     to {
  162.         -webkit-transform-origin:right;
  163.         -webkit-transform:rotateY(-90deg);
  164.     }
  165. }
  166. @keyframes rightleave {
  167.     from {
  168.         transform-origin:right;
  169.         transform:rotateY(0deg);
  170.     }
  171.     to {
  172.         transform-origin:right;
  173.         transform:rotateY(-90deg);
  174.     }
  175. }

js部分

  1. $(function () {
  2.      //initialize
  3.      $('.container').css({
  4.          'perspective-origin': '50% 0%',
  5.          '-webkit-perspective-origin': '50% 0%'
  6.      });
  7.      $('.container .example').css({
  8.          'animation': 'topleave 400ms forwards',
  9.          '-webkit-animation': 'topleave 400ms forwards'
  10.      });
  11.  
  12.      $('.container').bind('mouseenter mouseleave', function (e) {
  13.          var dir = getDirection($(this), e),
  14.              enter = e.type === 'mouseenter',
  15.              topPerspectiveOrigin = {
  16.                  'perspective-origin': '50% 0%',
  17.                  '-webkit-perspective-origin': '50% 0%'
  18.              },
  19.              rightPerspectiveOrigin = {
  20.                  'perspective-origin': '100% 50%',
  21.                  '-webkit-perspective-origin': '100% 50%'
  22.              },
  23.              bottomPerspectiveOrigin = {
  24.                  'perspective-origin': '50% 100%',
  25.                  '-webkit-perspective-origin': '50% 100%'
  26.              },
  27.              leftPerspectiveOrigin = {
  28.                  'perspective-origin': '0% 50%',
  29.                  '-webkit-perspective-origin': '0% 50%'
  30.              },
  31.              $target = $(this).find('.example');
  32.          switch (dir) {
  33.              case 0:
  34.                  if (enter) {
  35.                      $(this).css(topPerspectiveOrigin);
  36.                      $target.css({
  37.                          'animation': 'topenter 400ms forwards',
  38.                          '-webkit-animation': 'topenter 400ms forwards'
  39.                      });
  40.                  } else {
  41.                      $(this).css(topPerspectiveOrigin);
  42.                      $target.css({
  43.                          'animation': 'topleave 400ms forwards',
  44.                          '-webkit-animation': 'topleave 400ms forwards'
  45.                      });
  46.                  };
  47.                  break;
  48.              case 1:
  49.                  if (enter) {
  50.                      $(this).css(rightPerspectiveOrigin);
  51.                      $target.css({
  52.                          'animation': 'rightenter 400ms forwards',
  53.                          '-webkit-animation': 'rightenter 400ms forwards'
  54.                      });
  55.                  } else {
  56.                      $(this).css(rightPerspectiveOrigin);
  57.                      $target.css({
  58.                          'animation': 'rightleave 400ms forwards',
  59.                          '-webkit-animation': 'rightleave 400ms forwards'
  60.                      });
  61.                  };
  62.                  break;
  63.              case 2:
  64.                  if (enter) {
  65.                      $(this).css(bottomPerspectiveOrigin);
  66.                      $target.css({
  67.                          'animation': 'bottomenter 400ms forwards',
  68.                          '-webkit-animation': 'bottomenter 400ms forwards'
  69.                      });
  70.                  } else {
  71.                      $(this).css(bottomPerspectiveOrigin);
  72.                      $target.css({
  73.                          'animation': 'bottomleave 400ms forwards',
  74.                          '-webkit-animation': 'bottomleave 400ms forwards'
  75.                      });
  76.                  };
  77.                  break;
  78.              case 3:
  79.                  if (enter) {
  80.                      $(this).css(leftPerspectiveOrigin);
  81.                      $target.css({
  82.                          'animation': 'leftenter 400ms forwards',
  83.                          '-webkit-animation': 'leftenter 400ms forwards'
  84.                      });
  85.                  } else {
  86.                      $(this).css(leftPerspectiveOrigin);
  87.                      $target.css({
  88.                          'animation': 'leftleave 400ms forwards',
  89.                          '-webkit-animation': 'leftleave 400ms forwards'
  90.                      });
  91.                  };
  92.                  break;
  93.          }
  94.  
  95.      });
  96.  })
  97.  
  98.  function getDirection($element, event) {
  99.      var w = $element.width(),
  100.          h = $element.height(),
  101.          x = (event.pageX - $element.offset().left - (w / 2)) * (w > h ? (h / w) : 1),
  102.          y = (event.pageY - $element.offset().top - (h / 2)) * (h > w ? (w / h) : 1),
  103.          direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
  104.      return direction;
  105.  }

到此这篇关于基于JS实现动态跟随特效的示例代码的文章就介绍到这了,更多相关JS动态跟随特效内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号