各种浏览器全屏模式的方法、属性和事件介绍

HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用。先看常见的APIelement.requestFullScreen() //作用:请求某个元素element全屏启动全屏浏览器全屏模式的启动函数requestFullscreen仍然需要附带各浏览器的js方言前缀,相信下面这段代码需要你花大量的搜索才能凑齐:// 判断各种浏览器,找到正确的方法 function launchFullscreen(element) { if(element.requestFullscreen) { element.re

分享几个CSS技巧

创建剪切动画对于剪切动画,使用clip-path代替width/height,避免DOM重排导致性能过低。.animate { width: 200px; height: 200px; background: #000; animation: 1s clip; } @keyframes clip { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 100% 0); } }clip-path也能用来进行其他规则/不规则图形的剪切.clip { clip-p

JSON API免费接口_ 免费的天气预报、地图、IP、手机信息查询、翻译、新闻

整理提供最新的各种免费JSON接口,其中有部分需要用JSONP调用。方面前端同学的学习或在网站中的使用电商接口淘宝商品搜索建议:http://suggest.taobao.com/sug?code=utf-8&q=商品关键字&callback=cb 用例 ps:callback是回调函数设定物流接口快递接口:http://www.kuaidi100.com/query?type=快递公司代号&postid=快递单号 测试用例 ps:快递公司编码:申通="shentong" EMS="ems" 顺丰="shunfeng" 圆通="y

web前端的一些不为人知的冷知识点_html篇整理

这是一篇关于前端的技巧使用,或许你做前端很多年了,但是下面的这些你可能闻所未闻。现在这里给大家整理出来,分享给前端的小伙伴们。浏览器URL地址栏运行HTML代码在非IE内核的浏览器地址栏可以直接运行HTML代码! 代码如下:data:text/html,<h1>Hello, world!</h1>输入后,直接在页面中显示hello,world的了。打开开发者工具可以看出在body中有了便签<h1>Hello, world!</h1>浏览器URL地址栏运行Js代码在浏览器的url地址栏上可以直接运行js的代码,你知道吗?只需要通过javascrip

web前端的一些不为人知的冷知识点_CSS篇整理

关于CSS的恶作剧相信你看完以下代码后能够预料到会出现什么效果。*{ cursor: none!important; }简单的文字模糊效果以下两行简单的CSS3代码可达到将文字模糊化处理的目的,出来的效果有点像使用PS的滤镜,so cool!p { color: transparent; text-shadow: #111 0 0 5px; } 垂直居中有好多次博主都有这样的需求,垂直居中显示某个DIV,我们知道CSS中天然有水平居中的样式text-align:center。唯独这个垂直居中无解。当然你可以将容器设置为display:table,然后将子元素也

css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果

需求如下:    前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果,等比例正方形显示在列表中,让图片根据宽高来自适应显示在页面上。那么使用纯css该如何实现不定宽高的图片居中裁剪呢?mate标签:<meta name="viewport" content="width=device-width,user-scalable=no,target-densitydpi=device-dpi" />css代码:<style type="text/css"> .figure-l

有趣的Js面试题_如何让 (a == 1 && a == 2 && a == 3

前两天在网上看到了一道很有趣的题目,题目大意为:JS 环境下,如何让 a == 1 && a == 2 && a == 3 这个表达式返回 true ?。这道题目乍看之下似乎不太可能,因为在正常情况下,一个变量的值如果没有手动修改,在一个表达式中是不会变化的。当时我也冥思苦想很久,甚至一度怀疑这道题目的答案就是 不能。直到在 stackoverflow 上面竟然真的发现了解法 can-a-1-a-2-a-3-ever-evaluate-to-true。让这个表达式成为 true 的关

纯css如何绘制三角形_利用border实现画三角

使用css画三角形,首先想到的思路是:利用border边框样式来实现,这是由于border的边框是由四个三角形组成的。首先生成一个带边框宽高为0的div:<style> .dom{ width: 0px; height: 0px; border-width: 50px; border-style: solid; border-color: red green blue brown; } </style> <!--宽度为100px--> <div class="dom"></div>效果如下:取消其它三边的颜色形成三角形:这

Ajax异步图片/文件上传的实现_利用FormDa

在前后分离开发中,经常会遇到上传文件的情况,后端会有一个文件上传接口,通过ajax上传成功后返回图片地址url给前端。然后在把url和其他数据以前提交给后端保存到数据库。那么如何实现ajax异步文件上传功能呢?下面就介绍下利用FormData对象的实现方案。Html代码:<input type="file" name="file" id="imgUrl" onclick="upload()"/>js代码:function upload(){ var file=document.getElementById("imgUrl").files[0]; var form=n