CSS布局奇淫技巧之–各种居中
一种使用绝对定位来居中的方法 此法同样只适用于那些我们已经知道它们的宽度或高度的元素，并且遗憾的是它只支持IE9+,谷歌，火狐等符合w3c标准的现代浏览器。 下面用一段代码来了解这种方法： 运行效果： 这里如果不定义元素的宽和高的话，那么他的宽就会由left,right的值来决定，高会由top,bottom的值来决定，所以必须要设置元素的高和宽。同时如果改变left，right , top , bottom的值还能让元素向某个方向偏移，大家可以自己去尝试。
小程序动画实现旋转
.question .desc .image-rotate { position: absolute; z-index: 2; margin-left: 20rpx; margin-top: 20rpx; height: 280rpx; width: 280rpx; border-radius: 140rpx; animation: headRotate 6s linear infinite } /* 头像旋转效果 */ @keyframes headRotate{ 0% {transform: rotate(0deg);} 50% {transform: rotate(180deg);} 100% {transform: rotate(360deg);} }
js数组排序
Array.prototype.sortBy = function (attr, rev) { return this.sort(sortByKey(attr, rev)); } var sortByKey = function (attr, rev) { //第二个参数没有传递 默认升序排列 if (rev == undefined) { rev = 1; } else { rev = (rev) ? 1 : -1; } return function (a, b) { a = a[attr].toLowerCase(); b = b[attr].toLowerCase(); if (a < b) { return rev * -1; } if (a > b) { r...
JQuery如何监听DIV内容变化
JQuery如何监听DIV内容变化 $("#wb_follow_btn").bind('DOMNodeInserted', function(e){ alert('element now contains: '+ $(e.target).html()); }); //可以检测title变化 $("title").bind('DOMNodeInserted', function(e) { document.title='Web Skype'; });
老教授从console.log说起（上）
console.log，作为一个前端开发者，可能每天都会用它来分析调试，但这个简单函数背后不简单那一面，你未必知道…… 基础 首先，简单科普这个函数的作用。前端开发者可以在js代码的任何部分调用console.log，然后你就可以在浏览器的开发者控制台里，看到这个函数调用的那一瞬间你指定的变量或表达式的值。 最基本的调用方法： 1 2 3 4 5 6 7 8 9 10 console.log('123'); // 123 console.log('1', '2', '3'); // 1 2 3 console.log('1\n2\n3\n'); // 1 // 2 // 3 我们可以通过上面的方式进行...
微信小程序之scroll-view的坑
1.水平滑动的scroll-view 水平滑动的scroll-view,需要给scroll-view一个固定的宽度，设置属性scroll-x,并且设置样式white-space:nowrap;（这个很重要，不设置这个样式，无法完成scroll-view的效果，我的坑也是遇在这了，三个条件缺一不可） 2.竖直滑动的scroll-view 竖直滑动的scroll-view,需要给scroll-view一个固定的高度，设置属性scroll-y,并且设置样式white-space:nowrap;（三个条件缺一不可）
解析表情
<!DOCTYPE html> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server"> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/> <title></title> <scriptsrc="jquery.min.js"></script> <style> #emoji span { float: left; display: block; width:30px; height:30px; line-height:30px; font-size:16px; cursor: pointer; } </style> </...
解决IE不支持html5 file api中readAsBinaryString
//废话不多说，直接上源码 var reader = new FileReader(); reader.readAsBinaryString(fileData); reader.onload = function(e) { if (reader.result) reader.content = reader.result; var base64Data = btoa(reader.content); //... } //extend FileReader if (!FileReader.prototype.readAsBinaryString) { FileReader.prototype.readAsBinaryString = function (fileData) { var binary = ""; var pt = this; var reader = new FileReader(); reader.onload =...
[转]纯CSS 实现radio checkbox样式美化
.demo--label{margin:20px 20px 0 0;display:inline-block} .demo--radio{display:none} .demo--radioInput{background-color:#fff;border:1px solid rgba(0,0,0,0.15);border-radius:100%;display:inline-block;height:16px;margin-right:10px;margin-top:-1px;vertical-align:middle;width:16px;line-height:1} .demo--radio:checked + .demo--radioInput:after{background-color:#57ad68;border-radius:100%;content:"";display:inline-block;height:12px;margin:2px;width:12px} .demo--checkbox.demo--radio...
js验证图片真实格式（针对手动修改后缀名）
js验证图片真实格式（针对手动修改后缀名） <input type="file" id="file" onchange="handleFiles(this.files)"/> <script> function handleFiles(files) { if (files.length) { var file = files[0]; console.log(file.name); console.log(getFileExt(file)); } } function getFileExt(file) { var index = file.name.lastIndexOf('.'); var fileExt = file.name.substring(index+1); return fi...