Summer_water-优快云博客

原创 CSS3动画Animation的八大属性

CSS3 动画Animation的8大属性animation复合属性。检索或设置对象所应用的动画特效。如果有多个属性值时以”，”隔开，适用于所有元素，包含伪对象:after和:before1.animation-name 检索或设置对象所应用的动画名称必须与规则@keyframes配合使用，eg:@keyframes animations animation-name:animations;

2017-06-09 15:16:31 3256

原创 CSS3编写抽奖效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>抽奖</title> <style> *{margin: 0;padding: 0;} body{font-family: "Microsoft YaHei";} .box{width: 6

2017-06-08 14:23:50 1908

在这篇文章中，我将分享一些JavaScript常用的技巧，窍门和最佳实践。不管JavaScript开发者是使用在浏览器/引擎上或者服务器端（SSJS——Service Side JavaScript）JavaScript解释器上，这些他们都是应该知晓的。需要注意的是，文章中的代码片段均是在最新的Google Chrome（版本号30）上测试过，它使用V8 JavaScript引擎（V8 3.20.1

2017-06-08 14:13:33 501

原创 css打造超能陆战队--大白

超能陆战队–大白<!doctype html><html><head> <meta charset="gbk"> <title>超能陆战队--大白</title> <style> body{background: #000c26;} .baymax{margin: 0 auto;height: 600px;overflow: hidden;

2017-06-08 13:55:54 2453

原创横竖屏温馨提示

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> <meta name="keywords" content=""/> <script> !function(){function a(){document.documentElement.

2017-06-08 13:48:47 1310

原创 js怎样获取非行间样式，设置行间样式？

JavaScript的style属性可以获取html上标签的样式，但是不可以获取css里的样式我们怎么才能获取css里的样式？这时候就要用到JavaScript提供的currentStyle（ie）和getComputedStyle(火狐)来获取了！<!DOCTYPE html><html><head> <meta charset="gbk"> <title>获取行间样式</ti

2017-06-08 11:28:50 1070

转载 canvas实现水母

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>水母</title> <style> html { overflow: hidden; touch-action: none; content-zooming: none;

2016-11-17 02:48:51 665

原创 css的伪类：before 和：after 的强大之处

太极图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>八卦图</title> <style> /*===== 技术要点:实现此技术需要用到css伪类:before和:after--->>注意点:就是要在指定的元素内容之前或者之后插入一个包含con

2016-11-17 01:55:27 554

原创 canvas实现黑客帝国界面效果

这里写代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>黑客帝国</title> <style> *{margin: 0;padding: 0;} canvas{display: block;} </style></head><body

2016-11-17 01:49:05 1654

原创 javascript面向对象

什么是面向对象？ , 探讨一下面向对象中的几个概念： 1:一切事物皆对象 2:对象具有封装和继承特性使用函数构造器构造对象： //此处构造器Person就是一个函数 function Person(name,age){ var obj=new Object();

2016-10-12 23:50:07 422

转载 DOMContentLoaded事件

这个事件是从HTML中的onLoad的延伸而来的，当一个页面完成加载时,初始化脚本的方法是使用load事件，但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随后创建了一种自定义事件,domready,它在DOM加载之后及资源加载之前被触发。 domready事件迅速被众多JavaScript库所采用,它开始在本地浏览器中以DOMContentLoaded的

2016-10-12 23:24:14 534

原创前端人员必须会的jsonp!

同源策略(Same origin Policy)浏览器出于安全方面的考虑，只允许与同域下的接口交互。同域指的是？同协议：如都是http或者https 同域名：如都是http://jirengu.com/a 和http://jirengu.com/b 同端口：如都是80端口比如：用户打开了页面: http://jirengu.com/blog，当前页面下的 js 向 http://jir

2016-10-05 22:12:15 1567

原创 target=_blank的重要性

下面的这行代码会在新窗口打开： <a href="http://www.baidu.com" target="_blank">百度</a> --------------------------------- _blank – 在一个新的未命名的窗口载入文档,可打开多个相同窗口 _self – 在相同的框架或窗口中载入目标文档

2016-09-24 00:14:56 1384

原创 js如何用正则表达式验证手机号码，邮箱，座机号

验证手机号码： oBtn.onclick=function(){ var oTxt=oInp.value; // var reg=/^1(3|4|5|7|8)[0-9]\d{8}$/g; var reg=/^1[3|4|5|7|8][0-9]\d{8}$/; if(reg.test(oTxt

2016-09-22 22:14:35 2938

原创 js限时抢购计时器

倒计时代码一般用于限时抢购、节日及重大活动的倒计时，在网上经常见到，唯一不足之处就是不能限制客户端时间，如果客户端时间不准确，那么倒计时也就不准确了。不多说直接代码。。。 <!doctype html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>限时抢答</

2016-07-21 14:04:09 2890

原创我的第一个博客

之前一直在关注C博客，经常看别人发表的文章从中受益多多，自己对那些IT大神很是仰慕，其实本人一直想有一个自己的博客，但是因为个人原因本人始终没有开通博客(别狡辩了！！其实就是懒！！！！)所以今天就开通了一个属于自己的博客，一是想把自己的IT生涯纪录下来，二是方便与别人交流，当然了我也希望自己能发表一些有价值的文章，帮助别人，毕竟助人为乐是我们中华名族的传统文化。

2016-07-17 19:28:43 284

Summer_water的博客