查看演示 website 立即下载 插件描述:使用html2canvas生成名片、工作证 更新时间:2023-08-28 11:30:15 自己没事玩的,填入信息生成工作证
查看演示 website 立即下载 插件描述:使用html2canvas生成名片、工作证 更新时间:2023-08-28 11:30:15 自己没事玩的,填入信息生成工作证
查看演示 website 立即下载 插件描述:canvas+ ts + js 实现黑客帝国代码雨效果 更新时间:2023-08-28 17:53:45
查看演示 website 立即下载 插件描述:自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地 更新时间:2023-06-18 23:08:53 使用 创建容器Dom【将所需要生成图片的内容写在容器内】 <div id=”container”></div> 获取容器 let ImageContainer = document.getElementById(“container”); 创建canvas let canvas = document.createElement(“canvas”); let context = canvas.getContext(‘2d’); html2canvas(ImageContainer, opts).then(function(canvas) {});
查看演示 website 立即下载 插件描述:easyestdown是一个可智能定位的最基础的下拉组件,你可以用它实现任何带有下拉功能的组件,如自定义、日期时间选择器、多级菜单、自动填充输入框等。它没有没有任何外部依赖,因此您可以在`原生Javript`、`vue`、`react`、`angular`等项目中使用它 easyest-dropdown easyest-dropdown是一个可智能定位的最基础的下拉组件,你可以用它实现任何带有下拉功能的组件,如自定义select、日期时间选择器、多级菜单、自动填充输入框等。 easyest-dropdown的智能定位体现在 当下拉弹窗无法完全显示在浏览器视口或滚动容器可视区域时会自动调整到最佳显示位置。 下拉弹窗优先使用right、bottom定位,这样可以保证下弹窗显示后动态修改下拉弹窗宽高后下拉弹窗显示位置依旧正常 easyest-dropdown没有任何外部依赖,因此您可以在原生JavaScript、vue、react、angular等项目中使用它。 安装 使用npm安装 npm install easyest-dropdown -S 使用 1. 传统项目 如果您的项目是传统项目,您需要将dist/easyest-dropdown.js文件下载下来并放到您项目中,然后通过浏览器<script>标签引入easyest-dropdown.js。 <head> <!–如果您不使用easyest-dropdown自带的css,那么您可以不导入它–> <!–<link rel=”stylesheet” href=”./easyest-dropdown.css”>–> <script src=”./easyest-dropdown.js”></script> </head> <body> <button type=”button” class=”btn btn-primary” id=”referenceEl”>Show custom dropdown</button> <ul id=”dropdownEl” class=”my-custom-dropdown easyest-dropdown-transition”> <li>Html</li> <li>Javascript</li> <li>Css</li> <li>Vue <small>(渐进式JavaScript框架)</small></li> <li>React <small>(构建Web和原生交互界面的库)</small></li> <li>Angular <small>(一个应用设计框架与开发平台)</small></li> </ul> <script> var referenceEl = document.getElementById(‘referenceEl’); var dropdownEl = document.getElementById(‘dropdownEl’); var isShow = false; referenceEl.addEventListener(‘click’, function () { if (isShow) { dropdownEl.style.display = ‘none’; isShow = false; return; } var dropdownPosition = easyestDropdown.getDropdownDirection(referenceEl, dropdownEl, ‘bottom’, true); console.log(‘dropdownPosition’, dropdownPosition); dropdownEl.style.left = dropdownPosition.right == null ? (dropdownPosition.left + ‘px’) : ‘auto’; dropdownEl.style.right = dropdownPosition.right != null ? (dropdownPosition.right + ‘px’) : ”; dropdownEl.style.top = dropdownPosition.bottom == null ? (dropdownPosition.top + ‘px’) : ‘auto’; dropdownEl.style.bottom = dropdownPosition.bottom != null ? (dropdownPosition.bottom + ‘px’) : ”; dropdownEl.style.display = ‘block’; var classNameArr = dropdownEl.className.split(‘ ‘); var placementClassName = classNameArr.find(function (className) { return className.startsWith(‘easyest-placement-‘); }); if (placementClassName) { […]
查看演示 website 立即下载 插件描述:该组件以swiper为基础,用的是swiper双向控制,图标条用的是阿里巴巴个人项目图标库。
查看演示 website 立即下载 插件描述:默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果 可以点击并快速定位到页面的某个位置 minimap.js插件,基于jQuery1.11.1版本, 1、将head中的css样式引入到你的网页中 2、将body中的两个js引入到你的页面底部即可
查看演示 website 立即下载 插件描述:jQuery单页全屏滚动切换,可循环 更新时间:2022-06-13 02:12:34 鼠标滚轮控制切换
查看演示 website 立即下载 插件描述:jQuery.stamper是一款模拟现实中盖章效果的jquery插件,通过动画的形式展现盖章效果。 更新时间:2022-06-13 02:29:43 jquery.stamper使用说明 一款在网页上模拟现实中的盖章效果的jQuery插件,0.2版本已原生支持同一个页面上多个章同时显示的问题(并且优化了DOM内存消耗)。 1、说明 jquery.stamper是一款模拟现实中盖章效果的jquery插件,通过动画的形式展现盖章效果。访问GitHub项目库 2、使用 在页面上引入jquery和jquery.stamper两个JS文件: <script src=”jquery-1.10.2.min.js”></script> <script src=”jquery.stamper.js”></script> 然后在需要盖章的元素上调用jquery.stamper即可,如下: $(“#elementId”).stamper({ image : “images/stamper.png” }); 3、参数 jquery.stamper可配置的参数如下: 1. image:章的图片路径,必须指定 2. scale:章图片的放大倍数,默认5倍。如果设置过大可能会超出屏幕大小太多导致较长时间才会显示 3. speed:效果速度值,默认是600(单位毫秒)。通常与scale配合一起决定整个效果的时间 4. complete:盖章特效完成后的回调方法(无参数)
查看演示 website 立即下载 插件描述:svg path 跟随 背景图可以根据需求创意设计 比如企业发展历程等等 更新时间:2022-06-28 09:24:44 svg path 路径跟随 <img src=”path.jpg”> 背景图根据需求设计,重点是设计图和路径相辅相承,考验创意, 实例只是动画效果的其中一种可能; <text font-family=”microsoft yahei” text-shadow=”0px 0px 3px #000″ font-size=”4rem” x=”0″ y=”0″ fill=”#ffffff”> ? 这段用于定义奔跑的图形和颜色,自定义; AI 画路径 存成SVG 复制 <text font-family=”microsoft yahei” text-shadow=”0px 0px 3px #000″ font-size=”4rem” x=”0″ y=”0″ fill=”#ffffff”>? 这段用于定义奔跑的图形和颜色,自定义; AI 画路径 存成SVG 复制 <svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px” viewBox=”0 0 1768 1846″ xml:space=”preserve”> <text font-family=”microsoft yahei” text-shadow=”0px 0px 3px #000″ font-size=”4rem” x=”0″ y=”0″ fill=”#ffffff”>? <animateMotion path=”M128.9,296.8h1498.9c30.7,0,55.8,25.1,55.8,55.7v265.9c0,30.6-25.1,55.7-55.8,55.7l-1484.5-1l0,0 c-30.7,0-55.8,25.1-55.8,55.7v265.9c0,30.6,25.1,55.7,55.8,55.7h1498.9h-2.5c30.7,0,55.8,25.1,55.8,55.7v265.9 c0,30.6-25.1,55.7-55.8,55.7H155.4l0,0c-30.7,0-55.8,25.1-55.8,55.7v265.9c0,30.6,25.1,55.7,55.8,55.7h1498.9″ ; stroke-dashoffset: 0; begin=”0s” dur=”10s” rotate=”auto” repeatCount=”indefinite”></animateMotion> </text> <path d=”M128.9,296.8h1498.9c30.7,0,55.8,25.1,55.8,55.7v265.9c0,30.6-25.1,55.7-55.8,55.7l-1484.5-1l0,0 c-30.7,0-55.8,25.1-55.8,55.7v265.9c0,30.6,25.1,55.7,55.8,55.7h1498.9h-2.5c30.7,0,55.8,25.1,55.8,55.7v265.9 c0,30.6-25.1,55.7-55.8,55.7H155.4l0,0c-30.7,0-55.8,25.1-55.8,55.7v265.9c0,30.6,25.1,55.7,55.8,55.7h1498.9″ stroke=”#f00″ opacity=”0″ stroke-width=”1″ fill=”none”></path> </svg>