![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML
尜尜alp
专注前端 热爱摄影
展开
-
css3移动端动画
css3移动端动画,动画方式很简单只需要添加指定方式的class即可实现很酷炫的动画,组件引入了animate.css,目前只有里面的动画方式。组件可以用于酷炫的活动页面,页面交互动作等。原创 2016-11-29 17:58:10 · 2686 阅读 · 0 评论 -
移动端上拉下拉刷新组件
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 · 3316 阅读 · 0 评论 -
Flex 布局教程:语法篇
本文属于转载,为尊重原作者的劳动成果,在此标注原文地址,点击此处浏览网页布局(layout)是CSS的一个重点应用布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案----Flex布局,可以简便、完转载 2016-04-05 16:44:51 · 381 阅读 · 0 评论 -
HTML5 中工作线程(Web Worker)简介
至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能。它不但强化了 Web 系统或网页的表现性能,而且还增加了对本地数据库等 Web 应用功能的支持。其中,最重要的一个便是对多线程的支持。在 HTML5 中提出了工作线程(Web Worker)的概念,并且规范出 Web Worker 的三大主要特征:能够长时间运行(响应),理想的启动性能以及理想转载 2015-07-01 10:21:14 · 1140 阅读 · 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 · 1230 阅读 · 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 · 4776 阅读 · 0 评论 -
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 · 822 阅读 · 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 · 1258 阅读 · 0 评论 -
响应式布局这件小事
讲到响应式布局,相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计(通过CSS3Media Query实现响应布局)。一、什么是响应式布局?响应式转载 2013-07-10 10:44:24 · 1001 阅读 · 0 评论 -
jquery.lazyload 实现图片延迟加载jquery插件
看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验。减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉转载 2013-07-09 11:49:30 · 1149 阅读 · 0 评论 -
14个超棒的带有故事趣味性视差滚动网站
随着css3属性的广泛支持,越来越被设计师所青昧 ,常常可以创造出惊人的网站作品出来,特别是视差滚动的出色表现。关于视差滚动在实现方面,在之前的文章中《利用JARALLAX实现超强视差滚动网页效果》也为大家介绍了一个小插件的实现方式,在这里就不多介绍了。在本文,将为大家分享14个非常优秀并且带有故事性趣味的视差滚动网站,认真的欣赏下去,或许你会喜欢上其中的某一个故事哦。你会发现这些网站不单单技术牛转载 2013-06-07 15:03:41 · 1346 阅读 · 0 评论 -
CSS3旋转 彩色扇子
看到一网站做了一个彩色扇子的视频教程,尼玛还需要10大洋至此,我有点不爽,这么一点东西也许要钱,我擦啊,于是闲的蛋痒的我,自己去搞了一个HTML代码 尜尜制作 CSS代码.main{width:800px;position:relative;height:500px;top:50%;lef原创 2013-06-04 16:35:59 · 2107 阅读 · 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 · 1378 阅读 · 1 评论 -
常用元素默认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 · 5209 阅读 · 1 评论 -
原生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 · 2453 阅读 · 0 评论 -
CSS学习中的瓶颈期深入分析
虽已数年,但未就学习专门写过文章,这回破处了。苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因)。情景再现(尊重隐私,下面故事中人名均为化名,有加工):如月姑娘(本届D2上微博中奖上台最漂亮的那位)的内部分享会——关于CSS3 background相关内容~~……一顿巴拉巴拉……如月:假设背景图片500px*50转载 2013-04-11 15:33:08 · 1139 阅读 · 0 评论 -
带你深入剖析inline-block属性值的前世今生
曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了,上面的代码只是为了兼容 IE6、7 而已。那么你真的了解 inline-block 了吗?本文将带你深入剖析该属性值的前世今生,让你更好的理解和运用 inline-转载 2013-04-11 12:37:18 · 1036 阅读 · 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 · 1180 阅读 · 0 评论 -
原生js拖拽(第一课 未兼容))
/*拖拽流程:1、第一步点击需要拖动的元素2、在点击下的元素被选中,进行move移动3、当鼠标弹起的时候,停止动作4、点击元素oDIV的时候,可用的是oDIV区域,而move和up则是全局区域,也就是整个文档通用,即应该用document*/oDIV = document.getElementById("gaga");oDIV.onmousedown = function( e )原创 2013-03-25 19:03:00 · 1089 阅读 · 0 评论 -
纯javascript拖拽
css部分 #gaga{position:fixed;top:0;left:0;background:#f00;width:100px;height:100px;_position:absolute;cursor:move;}html部分 javascript部分/* 2013-4-2 尜尜制作 鼠标拖拽效果* 1、要实现鼠标拖拽功能,就是三个事原创 2013-04-02 15:02:42 · 1211 阅读 · 0 评论 -
live的用法于hover的用法 鼠标悬停效果
// live主要用于对动态加载出来的元素绑定事件// 产品目录 $(".lm_div_q dd").live({ mouseenter: function() { $(this).find("strong").addClass("tj_strong"); $(this).find("strong").next().slideDown(200); // 显示下拉框原创 2013-03-29 14:15:08 · 1336 阅读 · 0 评论 -
<meta http-equiv="x-ua-compatible" content=" ie=7" />
X-UA-Compatible是针对ie8新加的一个设置,对于ie8之外的浏览器是不识别的,这个区别与 content="IE=7"在无论页面是否包含指令,都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循指令。对于多数网站来说,它是首选的兼容性模式。为了避免制作出的页面在IE8下面出现错误,建议直接将IE8原创 2013-03-11 11:40:56 · 1893 阅读 · 0 评论 -
js冒泡排序法
css代码:*{margin:0;padding:0;}.gaga_tb{margin:30px;}.gaga_tb tr th,.gaga_tb tr td{height:30px;border:1px solid #ccc;text-align:center;}js代码:function gaga_x(arr,e){ // 冒泡法 for(var i =原创 2013-03-08 15:25:32 · 2364 阅读 · 0 评论 -
体感游戏之障碍越野赛——新世界,新征程
原作者:phil 这也许不仅仅是一款游戏,也许是一个新世界的开始。障碍越野赛是体感游戏的第一款游戏。 通过建立长链接将手机(wifi连接)与PC浏览器进行绑定,将用户覆盖最广的电子设备——手机成为电脑游戏的游戏手柄,通过手机上下晃动控制游戏人物赛跑。一个前端的技术、一个全新的交互方式、一个融入SNS元素的全新游戏模式。这不仅是一款游戏,我们有了更广阔的想象空间。产品转载 2013-08-19 17:16:44 · 1399 阅读 · 0 评论 -
解决firefox不支持innerText的办法
js代码:window.onload = function(){if(window.navigator.userAgent.toLowerCase().indexOf("msie")==0){ //firefox innerText HTMLElement.prototype.__defineGetter__( "innerText", function原创 2013-08-07 14:24:17 · 1674 阅读 · 0 评论 -
jquery+css3时钟
效果图如下:虽然丑了一点,但是功能实现了!钟使用的技术是css3的旋转、背景渐变(径向渐变)、圆角,还有负边距的定位,兼容ie9以上的浏览器,firefox、chrome、opera、safari等主浏览器,仅供参考,莫喷我!!!原创 2013-12-26 14:42:37 · 1403 阅读 · 0 评论 -
视差滚动(Parallax Scrolling)效果的原理和实现
视差滚动(Parallax Scrolling)效果的原理和实现视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。作为今年网页设计的热点趋势,越来越多的网站应用了这项技术。可以先看看效果:http://www.ok-studios.de/home/一、什么是视差滚动? 视差效果,原本是一个天文学术语,转载 2013-11-07 09:32:01 · 2507 阅读 · 0 评论 -
原生js获取execl里面的值 主要使用ActiveXObject
今天一个程序员给了一表我,里面有一百多条数据,叫我一个一个数据的复制到系相应的函数里面比如 put("gaga1","gaga2"),这样一句话,要我复制一百多遍,fuck。。。我就说你自己用java读取不就可以啦!他就说用java要运行半个小时以上,我就心里想fuck,是你不怎么懂java吧!此时自己心中的几百万头草泥马在奔腾!!!!!! 于是自己就去找了一个js方法来读取ex原创 2013-10-31 16:30:02 · 1497 阅读 · 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 · 1243 阅读 · 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 · 2045 阅读 · 5 评论 -
CSS3正方体旋转
css代码:@keyframes spin {from { transform: rotateY(0); }to { transform: rotateY(-360deg); }}@keyframes spin-vertical {from { transform: rotateX(0); }to { transform: rotateX(360deg); }}/************原创 2013-08-07 17:56:48 · 1551 阅读 · 0 评论 -
HTML语义化标签
什么是语义化标签?HTML赋予了每个标签以不同的语义。高质量的HTML代码,要求我们在遵循HTML语法的同时,也应该遵循HTML的标签语义,如:div 语义:Division(分隔)span 语义:Span(范围)ol 语义:Ordered List(排序列表)ul 语义:Unordered List(不排序列表)li 语义:List Item(列表项目)...HT原创 2013-02-25 09:25:39 · 2764 阅读 · 0 评论