效果图如下：查看演示 源码下载 html代码：jQuery / Zepto响应式菜单 PgwMenu 演示 请缩小/放大浏览器窗口宽度查看效果 深色样式（默认） 首页 代码 素材 模板 关于 服务 联系 浅色样式（默认） 首页 代码 素材 模板 关于 服务 联系 自定义样式 首页 代码 素材 模板 关于 服务 联系 Js代码 $(function () { $('.pgwMenu').pgwMenu({ dropDownLabel: '菜单', viewMoreLabel: '更多' }); $('.pgwMenuCustom').pgwMenu({ mainC...
本文实例讲述了JS+CSS实现自适应选项卡宽度的圆角滑动门效果。分享给大家供大家参考。具体如下： 这是一款JS+CSS打造自适应宽度的圆角滑动门，这里的圆角主要是靠一张背景图片去实现，所指的宽度是滑动门上的导航的宽度，不管文字有多少，它都会一直顺着下去，不会被内容所撑破，兼容性方面，兼容IE6/7/8,火狐未试，应该也兼容 。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-auto-width-nav-tab-c...
本文实例讲述了JS实现很实用的对联广告代码（可自适应高度）。分享给大家供大家参考。具体如下： 这是一款很实用的基于JS+CSS+DIV的网页对联广告代码，自适应网页高度，也就是始终保持在一定调试，这款暂时没有关闭功能。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-lr-useful-adv-auto-height-codes/ 具体代码如下：简洁对联广告代码lastScrollY=0; function heartBeat(){ var diffY; if (document....
先给大家说下Markdown的基本概念及优点 Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。 Markdown 是一种轻量级的标记语言，它的优点很多，目前也被越来越多的写作爱好者，撰稿者广泛使用。看到这里请不要被标记、语言所迷惑，Markdown 的语法十分简单。常用的标记符号也不超过十个，这种相对于更为复杂的 HTML 标记语言来说，Markdown 可谓是十分轻量的，学习成本...
layer.open的自适应： var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引parent.layer.iframeAuto(index);layer.open居中： var index1 = layer.load(2, { shade: false });//过渡//重新定义layer.open的宽var index = parent.layer.getFrameIndex(window.name);parent.layer.style(index, {width: 1050px,top: 50px});layer.close(index1);子页面标题的修改：//修改父级页面的title var index = ...
很多时候需要查看缩略图的原图，那么layer.open是一个不错的选择 直接上代码 //查看原图function showImg(url){//alert(url);var img_infor = "<img src=" + url + " />";layer.open({ type: 1, closeBtn: 1,shade: false, title: false, //不显示标题//skin: layui-layer-nobg, //没有背景色shadeClose: false,area:[auto,auto], //area: [img.width + px, img.height+px], content: img_infor //捕获的元素，注意：最好该指定...
小程序canvas的API并没有像其他的一样支持小程序独有的 rpx 自适应尺寸单位，在绘制内容时所应用的单位仍然是 px，那么如何实现不同尺寸屏幕的自适应呢？ 我们的在开发中常用的参考屏幕尺寸（iPhone6）为：375*667； 那么想要适应其他尺寸的屏幕时只需按照iPhone6的绘制大小按比例进行换算即可： 获取系统屏幕尺寸 先利用wx.getSystemInfo （获取系统信息）的API获取屏幕宽度，然后除iPhone6的屏幕宽度，即可得到相对单位 // 在onL...
方案1： 直接引入js （自己 写的动态改变fontsize的js） function htRem() {var ww = document.documentElement.clientWidth;if (ww > 750) {ww = 750;}document.documentElement.style.fontSize = ww / 7.5 + "px";}htRem();window.onresize = function() {htRem();}; 在main.js中import引入即可 方案二：手淘的 lib-flexible + rem 配置 flexible 安装 lib-flexible 在命令行中运行如下安装： npm i lib-flexible --save 引入 l...
1.rem.js内容 ! function(n) { var e = n.document, t = e.documentElement, i = 720, d = i / 100, o = "orientationchange" in n ? "orientationchange" : "resize", a = function() { var n = t.clientWidth || 320; n > 720 && (n = 720); t.style.fontSize = n / d + "px" }; e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoade...
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，且然后多余的出滚动条，官方给出的： 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。 然后直接上template代码： <template><el-table:data="tableData3"height="250"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column></el-table> </template>其中height="250"是固定值，我们可以...
VueSliderShow故名思意，vue的轮播图组件插件，该插件： 1、支持浏览器任意放缩，兼容移动端， 2、支持自动切换，鼠标经过停止切换，分页/任意页点击切换，左右切换， 3、支持文字介绍（超过一行自动省略） 本文讲述的是从开发一款基于Vue2x的响应式自适应轮播组件插件的一个全过程，包含发布到npm，构建自己的npm包，供下载安装使用的技巧，阅读本文需要些Vue的语法糖（自定义标签、计算属性、父子组件通信等），以及ES6、npm等基...
小程序中的轮播图很简单，官方都有例子的，但是唯一的缺陷就是swiper是固定死的150px高度，这样如果传入的图片大于这个高度就会被隐藏。辣么，怎样让图片自适应不同分辨率捏。 我的思路是：获取屏幕宽度，获取图片的宽高，然后等比设置当前屏幕宽度下swiper的高度。 1.结构 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{bg}}"...
本文讲述如何实现拥有酷炫背景视频的登录页面，浏览器窗口随意拉伸，背景视频及前景登录组件均能完美适配，背景视频可始终铺满窗口，前景组件始终居中，视频的内容始终得到最大限度的保留，可以得到最好的视觉效果。并且基于 Vue.js 2.0 全家桶。具体效果如下图所示： 最终效果可以翻到文章最后观看。 1. 背景视频 Web 页面的既有实现方式 国外有一个很好的网站 「Coverr」 ，提供了完善的教程和视频资源，帮助前端开发者构建酷炫...
之前写过一篇关于移动端屏幕适配：移动端屏幕适配的解决，今天来聊一聊基于vue-cli配置的移动端屏幕适配问题。 配方还是一样：手淘的 lib-flexible + rem 配置 flexible 安装 lib-flexible 在命令行中运行如下安装： npm i lib-flexible --save引入 lib-flexible 在项目入口文件 main.js 里 引入 lib-flexible // main.js import lib-flexible添加 meta 标签 在项目根目录的 index.html 中添加如下 meta <meta name="viewport" con...
本文实例讲述了微信小程序实现image组件图片自适应宽度比例显示的方法。分享给大家供大家参考，具体如下： 一. 了解image组件由于image有默认的固定的宽度和高度，这样我们在做图片自适应的时候，就不好做了。下面就来一起解决下 二. 方法 (一).使用mode：widthFix widthFix：宽度不变，高度自动变化，保持原图宽高比不变。 首先我们先设置image的mode为widthFix，然后给图片加一个固定rpx的宽度，比如：730rpx。 这样图片也可以自...