播放音乐时，歌词会随歌曲的进度逐渐填充颜色，不是逐字改变颜色，而是从左向右横向逐个像素改变的，也就是说会出现一个字的左右两边是不同颜色的效果。 这个效果通过CSS3可以实现。 实现思路： 1、background填充一个背景颜色，以及要变化的颜色 2、-webkit-background-clip:text;裁剪出文字的背景，即是楼空文字的意思 3、-webkit-text-fill-color:transparent;把裁剪缕空的文字弄透明，这样就可以通过缕空的形状看到背景颜色，这时背景颜色就是字体的颜色 ...
定义一个value，在select下拉选项选中与该值相同的option，设置为选中状态。 html代码 <div class="setSelect"> <select> <option value="1">阿里云</option> <option value="2">腾讯</option> <option value="3">网易</option> <option value="4">百度</option> </s...
通过:contains匹配select下拉选项的option文本值，把和指定文本相同的option设置为选中状态。 html代码 <div class="setSelect"> <select> <option value="1">阿里云</option> <option value="2">腾讯</option> <option value="3">网易</option> <option value="4">百度</option...
vw、vh、vmin、vmax是CSS3新增的视窗单位，同时也是相对单位，它相对视窗（Viewport）大小的百分比。 什么是视窗？ 视窗即Viewport，是浏览器实际显示内容的区域，不包括工具栏、地址栏、书签栏。 视窗单位说明 vw - 视窗宽度的百分比，如1vw即浏览器可视窗口宽度的1%，10vw即窗口宽高的10% vh - 视窗高度的百分比，如1vh即浏览器可视窗口高度的1%，10vh即窗口高度的10% vmin - 选择当前 vw 和 vh 中的最小值，最小值被均分为100单位的vmin...
clipboardjs插件可以实现点击文本复制到剪贴板的效果，常见的应用有点击复制链接。clipboardjs插件小巧简单，压缩后仅有11KB大小，且没有过多的配置，不依赖Flash以及任何臃肿的框架，且兼容性好，基本支持目前主流的PC端和手机端浏览器，如IE9+、Chrome 42+、Edge 12+、Firefox 41+、Opera 29+、Safari10+ 插件官方： 1、插件下载 https://github.com/zenorocha/clipboard.js/releases 2、使用示例： 示例一 ...
在data:{}声明初始化了一个变量，在onLoad:function()函数调用时，出现“xxx is not defined”错误，原因是直接使用了变量名，没有使用获取页面data对象的this.data 会报错的原代码： Page({ data: { text:'Welcome' }, onLoad: function(options){ console.log(text); }, }) 正确写法 Page({ data: { text: 'Welcome' }, onLoad: function...
数字按个位数递增，没达到十位数或更高位数时，数字前面自动补0，如01、02、03、……、10、11如此类推，可以通过js代码实现。 代码示例 var _n = 1; //初始数 var _m = 2; //最高位数 var _a = Array(_m); //长度为2的空数组 _a = _a.join(0); //使用0隔开空数组，且把数组转换成字符串，结果是00 _a = _a + _n; // 拼接字符串，结果是 001 _a = _a.slice(-_m); //截取保留最后面2位字符串（slice(-2)表示从后面往前面数2位） console.lo...
鼠标悬停在div元素时，实现圆弧边框加载效果。 HTML代码： <div class="btn"> <canvas width="44" height="44" id="btn"></canvas> </div> CSS代码： .btn {width:44px;height:44px;border-radius:50%;border:1px solid #f00;cursor:pointer;} .ctxBtn canvas {position:absolute;left:0;top:...
原生javascript Children可以获取元素的子元素集合，且支持兼容IE6、IE7、IE8浏览器，IE9以上浏览器只返回元素节点，IE6、IE7、IE8浏览器会返回元素节点和注释节点，所以建议不要在指定元素中使用注释，以保证兼容性。 提示：Children返回的是子元素集合，根据子元素在元素中出现的先后顺序进行排序，可以使用length属性获取子元素的数量，然后通过序列号(index，起始值为0)访问每个子元素。 HTML代码： <ul class="nav" id="nav"> <li><a href="#"...
jquery响应式轮播图插件owl.carousel.js功能完善，参数丰富，可以改造成多种网页前端显示效果。比如常见的商城网站产品图片展示效果。 引用插件文件和样式文件 <link rel="stylesheet" type="text/css" href="owl.carousel.min.css" media="screen"/> <script src="owl.carousel.min.js"></script> HTML代码： <!--by neirong.org--> &...
网页制作中，如果想使用特定的字体可以通过@font-face引用，即是解决访问用户电脑本地没有安装该字体导致不能按设计样式显示的问题。 注意： 支持@font-face的浏览器有Internet Explorer 9、Firefox Opera、Chrome和Safari，另外IE9只支持.eot类型的字体，Firefox、Chrome、Safari、和Opera支持.ttf、.otf 两种类型字体。 常规用法： @font-face { font-family: 'myFirstFont';//定义该字体名称，后面要使用该字体时，使用该名称...
通过拖拉进度条改变指定数值。 HTML代码 <div class="data"> ( <i data="20">0.7</i> 元 ) </div> <div class="drag"> <div class="line"> <div class="v"></div> <div class="star"></div> </div> </div> CSS代码 .d...