往地上就是一躺-优快云博客

原创 React实例 webpack+react+redux+router

链接https://github.com/qingtonghub/redux-mix react redux的官网示例Counter:https://github.com/reduxjs/redux/tree/master/examples/counterTodos:https://github.com/reduxjs/redux/tree/master/examples/to...

2018-09-06 15:35:10 338 1

原创 react router Transition

使用react-create-appApp.jsimport React, { Component } from 'react';import { BrowserRouter as Router, Route, Link,Redirect,Switch } from "react-router-dom";import { TransitionGroup, CSSTransition...

2018-08-07 18:02:45 592

原创 javascript判断div是否通过视口

如图，图片或div随着滚动条的滚动进入视口在离开要判断div是否通过视口，可以通过js getBoundingClientRect来获取div距离视口的top bottom left right为了兼容IE getBoundingClientRect的两个像素之差：function GetRect (element) { var rect = element.getBoundingClie...

2018-05-07 17:01:20 1471 1

原创正则表达式获取url中的参数

function GetQueryString(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null)return decodeURI(r[2]); return null;}假设ur

2017-11-20 15:19:04 4515 1

原创 JS判断移动端和pc端加载不同页面

2017-06-13 15:13:29 7159

转载 Vue Watchers

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link href="css/bundle.css" rel="stylesheet"> <style></style></head><body> <div id="watch-ex

2017-05-23 15:02:31 359

转载 bootstrap tooltip.js解析

+(function($){ var Tooltip = function(element,options){ this.type = null; this.options = null; this.enabled = null; this.timeout = null; this.hoverState =

2017-03-23 10:35:40 2093

转载 bootstrap modal.js解析

modal.csshtml { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}body { margin: 0;}article, aside, details, figcaption, figure, footer, header, hgrou

2017-03-06 15:18:22 2176

转载自定义jQuery 无缝Banner插件

自定义jquery插件分成三步//1、定义MyPlugin对象var MyPlugin = function(ele,opt){ //设置参数 //定义变量 //定义私有方法}//2、定义MyPlugin对象的方法MyPlugin.prototype = { init:function(){ //调用私有方法 //处理DOM

2017-02-24 10:39:31 952

原创 jquery select option选中

html：<select name="" id="aa"> <option value="a" data-id="a">a</option> <option value="b" data-id="b">b</option> <option value="c" data-id="c">c</option> <option value="d" data-id="d">d<

2017-01-12 14:46:11 534

原创手机号验证输入自动填充空格

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="text" id="inp"> <script src="jquery-1.12.3.min.js"></script> <scri

2016-12-13 11:31:51 1817

原创 css3按钮波纹效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 200px; height: 60px; margin: 50px auto;

2016-12-09 16:08:24 3459

原创 css loading

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 100%; height: 200px; } .loading:a

2016-12-08 14:48:50 547

转载 js窗口拖拽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{position:absolute; left:100px; top:100px; padding:5px; width: 300px;height: 200px

2016-12-01 16:20:02 445

转载 CSS常用

*{margin: 0;padding: 0;list-style: none;}/** 清除内外边距 **/body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list elements 列表元素 */pre, /* text for

2016-11-28 11:55:39 389

原创移动端div随手指移动

html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"> <title>Document</title> <style> #box{position: fixed;left: 0;top: 0;width: 150px;heigh

2016-11-15 16:31:05 2082

原创 radio、checkbox样式修改

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/check.css"></head><body> <div> <label> <lab

2016-11-15 11:53:54 630

原创获取本周/月第一天，最后一天，往前推几天，往后延几天

html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script src="date.js"></script> <script> var d = new getDate();

2016-11-15 10:07:02 1192

转载 js时间加往后延

function AddDays(date, days) { var nd = new Date(date); nd = nd.valueOf(); nd = nd + days * 24 * 60 * 60 * 1000; nd = new Date(nd); var y = nd.getFullYear(); var m = nd.getMonth

2016-11-08 15:33:37 1077

转载 js代码片段

$.fn.extend({ alertWhileClick: function(){ $(this).click(function(){ alert($(this).val()); }); } }); $.fn

2016-11-07 16:29:22 337

原创移动端mixin的px转rem

1、多属性传递@mixin px2rems($pxs){ @each $key, $value in $pxs{ #{$key}: $value/$baseFontSize * 1rem; }}使用例子：.a{@include px2rems((font-size: 28,height: 90,line-height: 90,padding-left: 20,pa

2016-11-04 15:54:29 1255

原创 flex布局：justify-content

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div#main{ display: flex; justify-content:flex-start;

2016-11-04 15:01:48 2787

原创 css3 animation

1、animation-name：@keyframes的名称 : ani 2、animation-duration：time 表示动画运行时间 1s 3、animation-timing-function: linear|ease|ease-in|ease_out|ease-in-out; 动画效果： linear：（匀速），linear 函数等同于贝塞尔曲线(0.0

2016-11-04 11:30:11 231

转载按钮hover active效果

效果：例子链接：http://pan.baidu.com/s/1kVz2LKj

2016-11-01 17:48:47 1789

转载 linear-gradient的mixin

转载至https://www.sitepoint.com/building-linear-gradient-mixin-sass/@function legacy-direction($value) { @if is-direction($value) == false { @error "Cannot convert '#{$value}' to legacy syntax

2016-11-01 10:08:36 373

原创移动端、PC端时间选择

网上mobiscroll插件实在是再过繁琐，将js和css压缩并合并了，以后用得着，只需引用三个文件即可效果：下载：http://pan.baidu.com/s/1pKYpR0R

2016-10-26 14:47:46 2623

原创 js input框自动补全

效果： css：div,p,h1,h2,h3,h4,h5,h6,ul,li,span,input{ box-sizing: border-box; font: 14px/20px "microsoft yahei";}div.wrap{ width: 240px; margin: 20px auto 0 auto;}.auto-inp{ width:

2016-10-11 16:01:24 9171 1

转载 js call与apply

// 类的继承function Person(name,age){ this.name = name; this.age = age; this.alertName = function(){ console.log(this.name); } this.alertAge = function(){ console.log(t

2016-10-10 09:24:34 227

原创 js对子节点操作

var len = 0;len = Obj.children.length;//或者 len = Obj.childNodes.length;

2016-10-08 15:18:42 2419

原创 js进度条制作

css:*{margin:0;padding:0;border:0;box-sizing: border-box;font: 14px/20px "microsoft yahei";}ul,ol,li{ list-style: none;}.hidden{ display: hidden;}div.wrap{ margin: 20px; height: 25

2016-10-08 14:47:11 576

转载 javascript复制到剪贴板

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript"> function copyUrl2(){ var Url2=document.getE

2016-09-30 17:36:09 422

原创 input框只能输入数字

只能输入正整数 1、方法一：<input type="text" onkeyup="checkRem(this)"> function checkRem(This) { This.value = This.value.replace(/[^\d]/g, ''); }2、方法二：<input type="text" onkeyup="this.value=this.value.rep

2016-09-27 16:18:30 874

原创 js的常用正则验证

// var re = /^[a-zA-Z]{1}([a-zA-Z0-9]|[_.]){4,19}$/; //只能输入5-20个以字母开头、可带数字、“_”、“.”的字串// var re = /^[a-zA-Z]{1,30}$/; //1-30位子串// var re = /^\d{2}-\d{5}$/; //两位数字、一个连字符再加 5 位数字// var re =

2016-09-23 11:31:14 390

原创 js中window.scroll与window.onmousewheel区别

1、使用window.scroll必须要有滚动条才能触发，一般配合$(window).scrollTop()使用. 2、window.onmousewheel,document.onmousewheel无论有没有滚动条都能触发一般的兼容性写法:// 滚动注册事件if(document.addEventListener{ document.addEventListener('DOMMo

2016-09-14 11:31:50 4415

原创 CSS3新元素笔记

1、图片变成灰度模式img{-webkit-filter:grayscale(1);}效果：2、box-shadowbody{ background: #eee;}div.box{ width: 50%; height: 200px; background: #FFF; margin: 40px auto; position: relative;

2016-09-02 11:27:16 461

转载 CSS伪元素 :before :after

1、八卦制作转载自：http://www.hulufei.com/post/about-before-and-after-pseudo-element css:#ba{ width: 96px; height: 48px; background: #eee; border-color: red; border-style: solid; bord

2016-09-02 10:53:00 373

转载 scss/css正六边形

scss:.hexagon { width: 100px; height: 55px; background: red; margin: 50px auto; position: relative; &:before, &:after { content: ""; position: absolute;

2016-08-31 14:14:15 338

原创 scss入门笔记

定义变量：**$linkColor: #08c;** /*使用*/a { text-decoration:none; color:$linkColor; &:hover{ **color:darken($linkColor,10%);** /* 颜色为10% */ } }

2016-08-31 10:49:29 662

原创常见IE6 bug兼容总结

1.min-width,max-width/min-height,max-height兼容div{ max-height:600px; min-height:40px; _height:expression(this.scrollHeight > 600 ? "600px":(this.scrollHeight < 40 ? "40px":"auto")); }

2016-08-22 11:28:41 236

原创 js音乐播放器

例子链接：

2016-08-19 16:52:41 847

鼠标悬停按钮气泡效果

空空如也