LogosDistort.js（LogosDistort.js）

优质

小牛编辑

130浏览

2023-12-01

Logosdistort.js是一个jQuery插件，可以快速轻松地在图像上实现鼠标悬停效果

一个简单的logosdistort示例如下所示 -

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <link rel = "stylesheet" 
         href = "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
      <link href = "assets/css/style.css" rel = "stylesheet" />
      <link href = "assets/css/perspectiveRules.css" rel = "stylesheet" />
   </head>
   <body>
      <div id = "min-max-tag"><i class = "fa fa-chevron-circle-left"></i></div>
      <div id = "demo1">
         <div id = "particle-target" ></div>
         <img alt = "logo" src = "assets/images/logo.png" />
      </div>
      <script 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "assets/js/jquery.logosDistort.min.js"></script>
      <script src = "assets/js/jquery.particleground.min.js"></script>
      <script>
         var particles = true,
         particleDensity,
         options = {
            effectWeight: 1,
            outerBuffer: 1.08,
            elementDepth: 220
         };
         $(document).ready(function() {
            $("#demo1").logosDistort(options);
            if (particles) {
               particleDensity = window.outerWidth * 7.5;
               if (particleDensity < 13000) {
                  particleDensity = 13000;
               } else if (particleDensity > 20000) {
                  particleDensity = 20000;
               }
               return $('#particle-target').particleground({
                  dotColor: '#1ec5ee',
                  lineColor: '#0a4e90',
                  density: particleDensity.toFixed(0),
                  parallax: false
               });
            }
         });
      </script>
   </body>
</html>