- jQuery 教程
- jQuery - 主页
- jQuery - 概述
- jQuery - 基础知识
- jQuery - 语法
- jQuery - 选择器
- jQuery - 事件
- jQuery - 属性
- jQuery-AJAX
- jQuery DOM 操作
- jQuery-DOM
- jQuery - 添加元素
- jQuery - 删除元素
- jQuery - 替换元素
- jQuery CSS 操作
- jQuery - CSS 类
- jQuery - 尺寸
- jQuery - CSS 属性
- jQuery 效果
- jQuery - 效果
- jQuery - 动画
- jQuery - 链接
- jQuery - 回调函数
- jQuery 遍历
- jQuery - 遍历
- jQuery - 遍历祖先
- jQuery - 遍历后代
- jQuery用户界面
- jQuery - 交互
- jQuery - 小部件
- jQuery - 主题
- jQuery 参考
- jQuery - 实用程序
- jQuery 插件
- jQuery - 插件
- jQuery - PagePiling.js
- jQuery-Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery 有用资源
- jQuery - 问题与解答
- jQuery - 快速指南
- jQuery - 有用的资源
- jQuery - 讨论
jQuery - Logos Distre.js
Logos Distor.js 是一个 jQuery 插件,用于快速轻松地实现图像上的鼠标悬停效果
一个简单的徽标扭曲示例,如下所示 -
<!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://www.tutorialspoint.com/jquery/jquery-3.6.0.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>
这应该产生以下结果 -
点击这里