
web前端
文章平均质量分 79
尜尜alp
专注前端 热爱摄影
展开
-
精通css3 flex弹性布局
精通flex弹性布局在远古时代,兼容ie6的年代使用float、position+display传统方式布局,经常会遇到一些奇奇怪怪的布局问题,所以在css3中的flex布局就营运而生,也就是弹性布局。一、兼容性目前为止已经有超过98%的浏览器已经全面支持flex布局(除非你的项目属于远古时代的项目),所以基本都可以使用flex布局。二、注意要点如果使用了flex布局之后,容器中子元素...原创 2019-04-01 17:25:29 · 863 阅读 · 1 评论 -
jquery+css3时钟
效果图如下:虽然丑了一点,但是功能实现了!钟使用的技术是css3的旋转、背景渐变(径向渐变)、圆角,还有负边距的定位,兼容ie9以上的浏览器,firefox、chrome、opera、safari等主浏览器,仅供参考,莫喷我!!!原创 2013-12-26 14:42:37 · 1451 阅读 · 0 评论 -
css3中的content和实体
css3content的用法#gaga::before{ font-family:"gaga-font-icon"; content:'\1234'}gaga实体的用法#gaga{ font-family:"gaga-font-icon";}ሴ效果是一样,content的优势在于灵活的控制,而且减少节点,实体如果要原创 2015-01-07 14:48:16 · 1294 阅读 · 0 评论 -
http请求头
一 、基础概念URLURI 包含 URL 和 URN,目前 WEB 只有 URL 比较流行,所以见到的基本都是 URL。URI(Uniform Resource Identifier,统一资源标识符) URL(Uniform Resource Locator,统一资源定位符) URN(Uniform Resource Name,统一资源名称)请求和响应报文1. 请求...转载 2019-03-20 19:56:17 · 963 阅读 · 0 评论 -
javascript的6种继承方式
一、原型链继承思路:利用原型让一个引用类型继承另外一个引用类型的属性和方法,因为每个构造函数都有一个原型对象(也就是所有的函数默认的原型都是Object的实例),原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。重点:原型链上面所有的属性和方法都是可以相互共享的。// 一个引用继承另外一个引用 也就实现了继承function Parent() { t...原创 2019-03-14 11:12:20 · 277 阅读 · 0 评论 -
css3移动端动画
css3移动端动画,动画方式很简单只需要添加指定方式的class即可实现很酷炫的动画,组件引入了animate.css,目前只有里面的动画方式。组件可以用于酷炫的活动页面,页面交互动作等。原创 2016-11-29 17:58:10 · 2777 阅读 · 0 评论 -
细说javascript作用域
javascript作用域是一个老生常谈的问题,现在我就以最简单的方式去理解一下作用域这个概念。在javascript里面没有块级作用域的区分,也不要把作用域的概念和上下文来混淆,javascript的作用域是由函数划分开的。先来看一个demo:var xisa = 'test';// 在{}块里面{ // 这里没有块级的概念 所有xisa这个变量还是属于全局原创 2016-11-10 09:48:15 · 392 阅读 · 0 评论 -
移动端弹出列表选择框
pushbutton 移动端弹出列表选择框移动端从下往上推动画效果端弹出列表选择框,适应所有主流移动端机型,支持Node引入,require引入;如有用得不爽可以随时提意见,谢谢。原创 2016-11-04 14:54:21 · 10785 阅读 · 3 评论 -
移动端上拉下拉刷新组件
listloading是一个移动端的上拉、下拉加载更多的组件。主要依赖于iscroll.js v5.1.2基础上开发的组件,基础库可以使用jquery.js或者zepto.js操作dom节点,目前我是使用了zepto.js作为基础库操作dom,以jquery插件的形式存在。如果不想以插件方式使用,则只需要把listloading直接移植你需要的库里面就ok啦。listloading主要针对移动端而生,在使用浏览器自带滚动,用户体验很不友好,与Android和ios差别甚远,所以选择iscroll.js,它实原创 2016-08-04 15:27:58 · 3358 阅读 · 0 评论 -
Flex 布局教程:语法篇
本文属于转载,为尊重原作者的劳动成果,在此标注原文地址,点击此处浏览网页布局(layout)是CSS的一个重点应用布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案----Flex布局,可以简便、完转载 2016-04-05 16:44:51 · 415 阅读 · 0 评论 -
前端组件库大合集-必备收藏
来源:http://www.xuanfengge.com/he-sets-the-front-end-component-library-the-essential-collection.html前言本文包含搭建web app常用的样式/组件等收集列表(移动优先),推荐mark!0. 前端自动化(Workflow)前端构建工具Yeoman转载 2015-09-08 17:47:58 · 8406 阅读 · 1 评论 -
js监听移动端是否横竖屏
手机横、竖屏事件 //屏幕方向标识,0横屏,其他值竖屏var orientation=0;//转屏事件,内部功能可以自定义function screenOrientationEvent(){ if(orientation == 0)document.getElementById("change").value="竖"; else document.getElementBy原创 2015-03-25 10:55:46 · 3031 阅读 · 0 评论 -
js寄生函数
// 寄生函数function obj(o){ function Fn(){}; Fn.prototype = o; // 把指针转回给自己 return new Fn();}function create(o,oBj){ var _o = obj(o.prototype); _o.constructor = oBj; oBj.prototype = _o; return原创 2015-03-11 21:52:39 · 935 阅读 · 0 评论 -
移动端调试使用日志定位
window.onload = function(){ onerror=handleErr11111111; var txt=""; function handleErr11111111(msg,url,l){ txt="本页中存在错误。\n\n" txt+="错误:" + msg + "\n" // txt+="URL: " + url + "\n" txt+="行:" +原创 2015-03-20 20:48:45 · 1278 阅读 · 0 评论 -
css3锯齿边框
.bg{ width:300px; height:50px; background:#caca8c; background-image:-webkit-gradient( linear,50% 0,0 100%, from(transparent), color-stop(.5,transparent),原创 2015-03-03 16:07:15 · 4833 阅读 · 0 评论 -
chrome跨域
降低chrome浏览器安全性,可以让其实现跨域,在环境变量后面添加这一句就可以实现:--args --disable-web-security原创 2015-02-27 14:11:40 · 836 阅读 · 0 评论 -
js判断鼠标移动方向
js代码:var gaga = function(wrap){ var wrap = document.getElementById(wrap); var hoverDir = function(e){ var w = wrap.offsetWidth, h = wrap.offsetHeight,原创 2015-01-29 14:40:59 · 5889 阅读 · 1 评论 -
html5 range
body { background: #2B353E; margin: 0; padding: 0;}#slider { width: 400px; height: 17px; position: relative; margin: 100px auto; background: #10171D; -webki原创 2015-01-08 17:02:22 · 854 阅读 · 0 评论 -
犯贱的IE6
对于常见的IE6下面的bug做一个总结,记下这个犯贱的IE6一些令人厌恶的bug1、png的问题,每次遇到这样的透明的问题,都很蛋疼,特别是渐变透明的时候,让我想拍死它。解决方法:用png8或者gif透明,是在没有办法就使用iepng.js来处理了;2、display:inline-block问题,解决方法:触发hasLayout就可以了,*display:inline;*zoom:1;I原创 2013-05-30 11:10:21 · 1409 阅读 · 1 评论 -
js封装函数
// 跨浏览器添加时间function addEvent( obj,type,fn ){ if( obj.addEventListener ){ obj.addEventListener( type,fn,false ); }else if( obj.attachEvent ){ obj.attachEvent( "on" + type, fn ); };};// 跨浏览器移除原创 2013-05-06 20:19:09 · 1427 阅读 · 0 评论 -
动态加载js和css
// 动态加载外部js文件var flag = true;if( flag ){ loadScript( "js/index.js" );};function loadScript( url ){ var script = document.createElement( "script" ); script.type = "type/javascipt"; script.src =原创 2013-04-16 19:21:57 · 1294 阅读 · 0 评论 -
同时使用n个window onload加载
/*1、obj相当于window2、type相当于onload3、fn相当于匿名函数*/function addEvent( obj,type,fn ){ var saved = null; // 用户保存上一个事件 if( typeof obj[ "on" + type ] == "function" ){ saved = obj[ "on" + type原创 2013-04-24 19:35:04 · 1068 阅读 · 0 评论 -
使用getBoundingClientRect()方法获取元素距离浏览器周边的位置
var box = document.getElementById( "gaga1" );/* alert( box.getBoundingClientRect().top );alert( box.getBoundingClientRect().right );alert( box.getBoundingClientRect().bottom );alert( box.getBoundi原创 2013-04-16 18:33:09 · 2278 阅读 · 0 评论 -
使用onkeypress字符按键兼容所有浏览器
document.onkeypress = function( e ){ alert( getCharCode( e ) );};function getCharCode( e ){ var e = e || window.event; if( typeof e.charCode == "number" ){ return e.charCode; }else{ return e原创 2013-04-23 19:30:01 · 1519 阅读 · 0 评论 -
原生js 查找 添加 删除 指定元素的class
window.onload = function(){ var gaga = document.getElementById( "gaga" ); addClass( gaga,"gaga1" ) addClass( gaga,"gaxx" ); removeClass( gaga,"gaga1" ) removeClass( gaga,"gaga" ) function hasCl原创 2013-04-11 19:17:33 · 2483 阅读 · 0 评论 -
常用元素默认margin和padding值
关于默认元素在不同浏览器中的margin值是多少的问题,今天做了一个探讨 /*2013-4-11*/// body的margin值firefox 20.0 ----------------------- body的margin为: margin:8px 8px 8px 8px;Internet Explorer 6.0 ----------- body的margin为: mar原创 2013-04-12 11:24:58 · 5252 阅读 · 1 评论 -
CSS学习中的瓶颈期深入分析
虽已数年,但未就学习专门写过文章,这回破处了。苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因)。情景再现(尊重隐私,下面故事中人名均为化名,有加工):如月姑娘(本届D2上微博中奖上台最漂亮的那位)的内部分享会——关于CSS3 background相关内容~~……一顿巴拉巴拉……如月:假设背景图片500px*50转载 2013-04-11 15:33:08 · 1163 阅读 · 0 评论 -
带你深入剖析inline-block属性值的前世今生
曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了,上面的代码只是为了兼容 IE6、7 而已。那么你真的了解 inline-block 了吗?本文将带你深入剖析该属性值的前世今生,让你更好的理解和运用 inline-转载 2013-04-11 12:37:18 · 1066 阅读 · 0 评论 -
获取内联和链接中的样式
var head = document.getElementById( "box" ); // alert( head.style.background ) // alert( head.style.cssFloat || head.style.styleFloat ) // 获取float不一样 // head.style.fontSize = "30px" head.styl原创 2013-04-10 19:02:56 · 1212 阅读 · 0 评论 -
无缝滚动图片
/*2013-4-10 尜尜制作 追求最简单的写法*/$(function(){ var time = 3000; // 每隔多久播放一次动画 时间为毫秒 var dhua_time = 500; // 图片轮换的间隙时间 时间为毫秒 var animate_pic; // 定义动画函数 var ul_li = ".gaga_pic ul li";原创 2013-04-10 14:41:39 · 1117 阅读 · 0 评论 -
给指定元素的后面追加内容 原生js
var header1 = document.getElementById("header"); var p = document.createElement("p"); // 创建一个元素节点 insertAfter(p,header1); // 因为js没有直接追加到指定元素后面的方法 所以要自己创建一个方法 function insertAfter(原创 2013-04-08 18:39:55 · 3844 阅读 · 0 评论 -
shift,ctrl,alt按键的获取
document.onclick = function(e){ alert(getKey(e)); }; function getKey(e){ var e = e || window.event; var keys = []; if(e.shiftKey){ keys.push("shift键"); }; if(e.ctrlKey){ keys.pu原创 2013-04-07 19:51:35 · 1233 阅读 · 0 评论 -
原生js 事件代理方法
1 10 100 1000 10000 100000 1000000 10000000 100000000 1000000000 10000000000 100000000000var gaga = document.getElementById( "gaga" );gaga.onclick = function( e ){ var e = e || window.原创 2013-04-19 14:38:39 · 2093 阅读 · 0 评论 -
javascript oop JavaScript面向对象编程
作者:草履虫 email:caolvchong@gmail.com 原文出自:cceer.xmu.edu.cn/blog/---->什么是类和对象 这是所有面向对象编程之前必须弄明白的. 所谓类:简单地说就是模板,说的专业一些,是一类具有某种性质的物的集合.比如:人就是一个类,车也是一个类,等等. 所谓对象:就是类的具体实现.如上面所说,人转载 2013-06-13 15:31:37 · 944 阅读 · 0 评论 -
CSS3旋转 彩色扇子
看到一网站做了一个彩色扇子的视频教程,尼玛还需要10大洋至此,我有点不爽,这么一点东西也许要钱,我擦啊,于是闲的蛋痒的我,自己去搞了一个HTML代码 尜尜制作 CSS代码.main{width:800px;position:relative;height:500px;top:50%;lef原创 2013-06-04 16:35:59 · 2139 阅读 · 0 评论 -
原生js获取execl里面的值 主要使用ActiveXObject
今天一个程序员给了一表我,里面有一百多条数据,叫我一个一个数据的复制到系相应的函数里面比如 put("gaga1","gaga2"),这样一句话,要我复制一百多遍,fuck。。。我就说你自己用java读取不就可以啦!他就说用java要运行半个小时以上,我就心里想fuck,是你不怎么懂java吧!此时自己心中的几百万头草泥马在奔腾!!!!!! 于是自己就去找了一个js方法来读取ex原创 2013-10-31 16:30:02 · 1541 阅读 · 0 评论 -
javascript 验证 只能输入数字和一个小数点
function gaga(obj){ // 值允许输入一个小数点和数字 obj.value = obj.value.replace(/[^\d.]/g,""); //先把非数字的都替换掉,除了数字和. obj.value = obj.value.replace(/^\./g,""); //必须保证第一个为数字而不是. obj.value = obj.原创 2013-10-21 11:09:39 · 1279 阅读 · 0 评论 -
今天是星期几的写法PHP
// 第一种写法$da = date("w");if( $da == "1" ){ echo "今天是星期一";}else if( $da == "2" ){ echo "今天是星期二";}else if( $da == "3" ){ echo "今天是星期三";}else if( $da == "4" ){ echo "今天是星期四";原创 2013-09-26 13:47:55 · 1521 阅读 · 1 评论 -
javascript随机数
function Random( num_first,num_last ){ //输出指定范围内的随机数的随机整数 switch( arguments.length ){ case 1 : return parseInt( Math.random() * num_first + 1 ); case 2 : return parseInt原创 2013-09-17 11:36:38 · 936 阅读 · 0 评论 -
今天是星期几的不同写法
第一种写法 var str = ""; var week = new Date().getDay(); if (week == 0) { str = "今天是星期日"; } else if (week == 1) { str = "今天是星期一"; } else if (week == 2) {原创 2013-09-13 10:55:45 · 2098 阅读 · 5 评论