查看演示 website 立即下载 插件描述:jquery bootstraps响应式多功能服务类网站模板,提供3种不同风格类型的首页
查看演示 website 立即下载 插件描述:百度地图api进行插件化封装 更新时间:2020-12-24 23:46:37 meuiBdmap控件将百度地图api进行插件化封装,方便前端开发人员直接调用,而不用再研究百度api原代码。 meuiBdmap使用说明 第1步,引入插件所需的CSS、JS <link type=”text/css” rel=”stylesheet” href=”assets/css/meui-baidumap.css”> <script type=”text/javascript” src=”http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js”></script> <script type=”text/javascript” src=”http://api.map.baidu.com/api?v=2.0&ak=2COzFaICuIyVj7V3VetKfmdRVnX8BhVr”></script><!–百度地图API库文件–> <!–<script type=”text/javascript” src=”http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js”></script>–><!–百度地图几何算法GeoUtils库–> <script type=”text/javascript” src=”assets/js/meui-baibumap.js”></script><!–MEUI百度地图插件–> 第2步,创建DOM节点用于地图展示 <div id=”allmap”></div> 第3步,调用插件创建地图 $(‘#domID’).meuiMapHouse(‘内置函数名’, 参数1, 参数2, 参数3); 其中: 1、参数1, 参数2, 参数3表示内置函数对应的N个参数,N >= 0 2、内置函数如下: init //地图初始化 createMapPoint 创建坐标系统/创建标注点 createMapBoundary 创建行政区域边界 getZoom 获取当前地图绽放级别 getCenter 获取地图当前中心点 clearOverlays 移除所有地图覆盖物、清空所有标注点 removeOverlay 移除地图指定覆盖物 插件调用实例 //::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::// var mapDom = $(‘#allmap’); //DOM JQuery //================================ //实例. init 地图初始化 mapDom.meuiMapHouse(‘init’, { city: ‘泉州市’, //默认中心点城市(isNumc=1时有效) point: ‘118.611836,24.918225’, //默认中心点经纬度坐标(isNumc=0时有效) label: ”, //自定义中心点说明文字,默认空(可选). 当不空时,中心点标注文本为本参数,否则为城市名称 isNumc: true, //地图中心点是根据城市还是坐标来设置. true 根据坐标(true), false 根据城市 zoom: 15, //地图缩放级别(值:3-19) copyright: ‘地图查房价系统 Version 1.0’, //版权信息(可选) // width: ‘auto’, //地图高度,默认auto表示全屏(可选) height: ‘auto’, //地图宽度,默认auto表示全屏(可选) image: { //自定义坐标标注点图标及其它属性(可选) testing draged: false, //图标是否可拖动,默认false(可选) enable: false, //是否开启自定义图标, 默认false(可选) path: ‘meui/img/’, //图片文件夹相对静态文件html位置,仅当enable=true时有效(可选) icon: ‘bmap_locate_blue.png’ //图标文件名,仅当enable=true时有效(可选) }, […]
查看演示 website 立即下载 插件描述:九宫格抽奖,奖品文字图片颜色按钮均可配置,支持同步异步抽奖,概率前后端可控,自动根据 dpr 调整清晰度 更新时间:2020-12-24 09:23:29 在 Js / JQuery 中使用 方式 1:通过 script 标签引入 为了避免 CDN 链接出现异常或波动,我非常建议你缓存到本地或服务器 最新版本: https://cdn.jsdelivr.net/npm/lucky-canvas/dist/lucky-canvas.umd.min.js 指定版本: https://cdn.jsdelivr.net/npm/[email protected]/dist/lucky-canvas.umd.min.js <div id=”my-lucky”></div> <script src=”https://cdn.jsdelivr.net/npm/lucky-canvas/dist/lucky-canvas.umd.min.js”></script> <script> // 大转盘抽奖 let luckyWheel = new LuckyCanvas.LuckyWheel({ el: ‘#my-lucky’, width: ‘300px’, height: ‘300px’, }, { // …你的配置 }) // 九宫格抽奖 let luckyGrid = new LuckyCanvas.LuckyGrid({ el: ‘#my-lucky’, width: ‘300px’, height: ‘300px’, }, { // …你的配置 }) </script> 在 vue2.x / vue3.x 中使用 方式 1:通过 import 引入 首先安装插件 […]
查看演示 website 立即下载 插件描述:基于vue的购物清单练习 更新时间:2020-07-24 00:37:54 更新说明:修复输入框的值验证,对于非正整数,值清空,并在失焦时,值设为0。 代码修改地方: <input type=”text” class=”num-input” v-model=”item.pro_num”> 处新增两个判断 @input=”search($event,index)” @blur=”check($event,index)”, 即 <input type=”text” class=”num-input” v-model=”item.pro_num” @input=”search($event,index)” @blur=”check($event,index)”> 对应methods加两个函数: search: function(event, index) { search: function(event, index) { let flag = new RegExp(“^[1-9]([0-9])*$”).test(event.target.value); if (!flag) { this.productList[index].pro_num = ”; } }, check: function(event, index) { if (event.target.value == ”) { this.productList[index].pro_num = 0; } }, 更新时间:2020-07-15 22:47:06
查看演示 website 立即下载 插件描述:简洁大气的jquery bootstraps响应式旅游度假酒店类网站模板
查看演示 website 立即下载 插件描述:使用Ets构建大数据看板 更新时间:2020-06-09 09:25:26 1.使用ECharts插件,具体用法可以百度 2.双击index.html文件浏览器打开 3.图表数据在js/new_file.js 4.有其他问题联系微信:h521520ss
查看演示 website 立即下载 插件描述:简洁大气的jquery bootstraps响应式博物馆类网站模板
查看演示 website 立即下载 插件描述:这是一款纯css3带倒影效果的图片翻转特效。该特效在鼠标悬停图片时,可以翻转图片,同时图片还带有炫酷的倒影效果。 HTML结构 <div class=”scene”> <div class=”card”> <div class=”card__face card__face–front”> <img src=”img/t1.png” /> </div> <div class=”card__face card__face–back”> <img src=”img/t1a.png” /> </div> </div> <div class=”card”> <div class=”card__face card__face–front”> <img src=”img/t2.png” /> </div> <div class=”card__face card__face–back”> <img src=”img/t2a.png” /> </div> </div> <div class=”card”> <div class=”card__face card__face–front”> <img src=”img/t3.png” /> </div> <div class=”card__face card__face–back”> <img src=”img/t3a.png” /> </div> </div> </div> CSS样式 初始化时隐藏窗口内容。 body { display: flex; justify-content: center; align-items: center; height: 100vh; background: black; } .scene { width: 1000px; display: flex; justify-content: space-between; -webkit-perspective: 800px; perspective: 800px; } .scene .card { position: relative; width: 240px; height: 300px; color: white; cursor: pointer; transition: 1s ease-in-out; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .scene .card:hover { -webkit-transform: rotateY(0.5turn); transform: rotateY(0.5turn); } .scene .card .card__face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; […]
查看演示 website 立即下载 插件描述:CSS模仿求婚小动画 更新时间:2020-05-10 23:50:02 简单明了 操作方便