yoyoosyy-CSDN博客

转载 media query 参考

html {font-size: 10px}@media screen and (min-width:480px) and (max-width:639px) {html {font-size: 15px;}}@media screen and (min-width:640px) and (max-width:719px) {html {font-size:

2017-06-01 14:44:17 341

转载 userAgent判断客户端，以及各个浏览器的ua

navigator.userAgent.match(/Android/i) //安卓客户端浏览器navigator.userAgent.indexOf('iPhone') != -1) //iPhone手机客户端navigator.userAgent.indexOf('iPod') != -1) //iPod 客户端navigator.userAgent.indexOf('iPad'

2017-04-12 15:03:15 12076

转载判断是不是qq内置浏览器

if (navigator.userAgent.indexOf('QQ') > -1){//do something}

2017-04-11 14:54:01 4342

转载 jq实现页面跳转

$("img").click(function(){ window.location.href="输入另一个页面的链接"； })

2017-04-01 15:53:06 8336 1

转载 360 文档渲染ie7 兼容性解决 X-UA-Compatible

X-UA-Compatible是IE8的一个专有属性，它告诉IE8采用何种IE版本去渲染网页，在html的标签中使用。使用下面这段代码后，开发者无需考虑网页是否兼容IE8浏览器，只要确保网页在IE6、IE7下的表现就可以了。时至今日，IE6已被微软判了死刑，我们在重构时应首先考虑更完善的IE8 IE9下的体验,然后依次回退兼容IE7和6。关于X-UA-Compatible目前绝

2017-04-01 15:43:22 751

转载让css animation 动画停在最后一帧

animation-fill-mode用来定义元素在动画结束后的样子。animation-fill-mode 的默认值是 none，也就是在动画结束之后不做任何改动.element{ animation: fadein ease-in 2s; animation-fill-mode: forwards;} @keyframes fadein {

2017-03-30 12:06:08 40866

转载 css3 性能

高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点：流量、功耗与流畅度。在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力

2017-03-30 11:18:05 422

转载 div 滚动到可视区触发事件

无标题文档<!--//$(document).ready(function(){ $(window).bind("scroll", function(event){ $("div").each(function(){ var fold = $(window).height() + $(window).scrollTop(); if( fold <= $(this).off

2017-03-27 14:39:38 4407 1

原创 jq操作代替placeholder属性（兼容ie8）

html代码请输入您的手机号js代码 $(".input-list").on('focus', 'input', function(event) { $('.txt-default').hide(); }).on('blur', 'input', function(event) {

2017-03-23 12:19:10 1007

转载 ie9+及其他兼容placeholder

placeholder属性树HTML5提出的新属性，作用是为input框或textarea框添加初始提示内容。当控件获取焦点输入时，清空提示内容。但IE8及其以下的版本并不支持该属性的显示。下面做如下处理：placeholder属性树HTML5提出的新属性，作用是为input框或textarea框添加初始提示内容。当控件获取焦点输入时，清空提示内容。但IE8及其以下的版本并不支持该属性

2017-03-22 15:45:39 346

转载点击按钮发送倒计时

test count down button $(function () { $('#btn').click(function () { var count = 3; var countdown = setInterval(CountDown, 1000);

2017-03-22 14:51:31 411

转载 JS表单验证-12个常用的JS表单验证

最近有个项目用到了表单验证，小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下，和大家一起分享~~~1. 长度限制1. 长度限制 function test() { if(document.a.b.value.length>50) { alert("不能超过50个字符！"); document.a.b.focus();

2017-03-17 15:59:48 4459 1

转载 html5重力感应事件

一、手机重力感应图形分析1、设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360)。设备在初始位置,与地球（XYZ）和身体（XYZ）某个位置对齐。设备围绕z轴的旋转角度为α,并与先前的x和y轴位置对比，显示x，y轴新坐标为x0和y0。 2、设备围绕x轴的旋转角度为β,β角度的取值范围在(-180,180)。设备围绕x轴的旋转角度为β,并与先前的y和z轴的位

2017-03-17 15:55:31 598

转载使用JS判断客户端、浏览器、操作系统类型

一、JS判断客户端类型 JS判断客户端是否是iOS或者Android手机移动端通过判断浏览器的userAgent，用正则来判断手机是否是ios和Android客户端。核心代码如下：方法一：var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr')

2017-03-17 15:54:16 9200 3

转载 js动态设置文档 rem 值

转载别人的文章~链接：http://blog.csdn.net/yisuowushinian/article/details/50204085#commentsrem 单位在做移动端的h5开发的时候是最经常使用的单位。为解决自适应的问题，我们需要动态的给文档的更节点添加font-size 值。使用mediaquery 可以解决这个问题，但是每一个文件都引用一大串的font-size

2017-03-17 10:31:32 2048

转载使用 CSS3 实现超炫的 Loading（加载）动画效果以及cs3的在线制作工具

http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html

2017-03-16 15:17:26 1806

转载滚动选页+on事件触发

以前写效果的时候总是单个事件点击写，现在跟同事学了新用法：用on 来写触发事件。可以连续触发多个。$('.c-platform-contain-nav ul li').on('click','a',function(){ $(this).removeClass('hover'); $(this).addClass('act')

2017-03-16 14:00:18 683

转载点击按钮有水纹效果~~

点击按钮有水纹效果~~奉上源码 Document .btn { background: #ffab91; display: block; padding: 1em; text-decoration: none; width: 200px;

2017-03-15 11:20:53 511

转载 $(document).height()与$(window).height()

http://www.cnblogs.com/piuba/archive/2013/01/06/2847295.htmljQuery(window).height()代表了当前可见区域的大小，而jQuery(document).height()则代表了整个文档的高度，可视具体情况使用. 注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height()

2017-03-14 17:27:01 358

原创 web知识-根据用户的设备自动选择质量不同的图片。

可准备3种图：普通、2倍图、svg高清图css属性中添加： background-image:url(../images/add.png); 本身自有图 background-image:-webkit-image-set(url(../images/add.svg) 1x); background-image:-o-image-set(url(../ima

2017-03-14 15:02:58 390

yoyoosyy的博客