- 博客(30)
- 收藏
- 关注
RSS订阅原创 jquery中animate()的用法
.animate( properties [, duration ] [, easing ] [, complete ] )properties：CSS属性和值，该动画将对应移动的对象。例：$( "#clickme" ).click(function() { $( "#book" ).animate({ left: "+=50",//需要变化的css属性...
2014-12-18 10:06:05
425
原创 背景黑色半透明css属性
此属性支持ie7以上div{background-color: rgba(0, 0, 0, 0.6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);/*低版本ie透明写法*/}
2014-12-05 14:25:16
9393
原创 display属性值table-cell的使用
display的属性值table-cell代表将标签转换为表格td或是th格式，之后可以引用td的属性vertical-align:bottom等；如需要将td单行显示需要加入行元素display:table-row; 如并列显示则不需要加入display:table-row; ie6、ie7不支持； 下面的案例是单行显示代码： ul li p{ overf...
2014-12-05 14:14:37
474
原创 页面滚动显示动画
最近发现百度中心主页在ie10上每次打开动画加载每个模块，于是学习了一下，原来是使用了插件scrollReveal.js，拿出来分享给大家：案例可以到下面下载，这个很简单只要在页面引入scrollReveal.js此js 在对应标签上写上如下内容：禁止反复运动页面引用：<div id="container" data-scrollreveal="enter left ove...
2014-12-05 09:57:55
584
原创 css3动画鼠标滑过图片变大并且显示透明渐变遮罩背景
最近看到w3cfuns教程页面的一个效果，学习和实现了一下，感觉不错，大家以后可以在项目中使用，其中几个知识点： 1、使用伪类元素:before和after来处理显示在图片上面的半透明遮罩背景和图片效果2、使用css3动画属性transform:scale(1.1) 变化图片大小3、使用transition实现渐变动画效果 页面代码如下：<body id="be...
2014-11-26 11:18:46
1508
原创 CSS3 基本选择器
CSS3 基本选择器 *E.class#idEFE>FE+FE[attribute]E[attribute=value]E[attribute~=value]E[attribute | = value]:first-childE[attribute^=value]E[attribute$=value]...
2014-07-23 10:29:41
110
原创 IE（IE6/IE7/IE8）支持HTML5标签
让IE（ie6/ie7/ie8）支持HTML5元素，我们需要在HTML头部添加以下 JavaScript，这是一个简单的document.createElement声明，利用条件注释针对IE来调用这个js文件。 Opera，FireFox等其他非IE浏览器就会忽视这段代码，也不会存在http请求。 引用google的html5.js文件，将代码放到head标签区间，代码内容可以自己下载...
2014-07-15 08:40:50
129
原创 ajax中创建XMLHTTPRequest对象
创建对象不同的浏览器使用不同的方法来创建 XMLHttpRequest 对象。Internet Explorer 使用 ActiveXObject。其他浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。要克服这个问题，可以使用这段简单的代码：var XMLHttp=null;if (window.XMLHttpRequest){XM...
2014-07-14 08:26:42
91
原创 js中apply方法的使用
js中apply的用法： 1、对象的继承： apply方法能劫持另外一个对象的方法，继承另外一个对象的属性Function.apply(obj,args)方法能接收两个参数obj：这个对象将代替Function类里this对象args：这个是数组，它将作为参数传给Function（args-->arguments）apply示范代码如下： <...
2014-03-28 11:02:22
157
原创 JS中this的用法
1、this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。 //构造两个对象分别为a和bvar a=new Object();var b=new Object();//给两个对象都添加属性name,分别给予不同的属性值a.name="小明";b.name="梅梅";//构造a的方法获取属性name的值...
2014-03-28 09:56:07
120
原创 orientationchange实现手机横竖屏事件
这个主要是实现手机页面相册横屏时能单独作为幻灯片播放，前提一定要让手机的横屏功能开启才可以。主要是通过iframe调用不同的引用页面实现，下面附上具体代码，可以尝试实现。 <!doctype html><html><head><meta charset="gb2312"><meta name="viewport" content=&q
2014-03-18 14:26:16
1405
原创 ontouchstart实现手机触屏中的hover效果
ontouchstart实现手机触屏中的hover效果最近一直都在做手机网站的项目，会经常遇到手机屏幕触摸无交互效果，今天在一篇文章中看到模拟网页端hover效果的例子拿出来和大家分享下，已经使用效果还不错，大家可以根据下面的案例学下： 一、css样式：<style type="text/css">.inner { width: 100%; height: 100p...
2014-03-04 14:40:39
2240
原创 CSS3 多列
浏览器支持 Internet Explorer 10 和 Opera 支持多列属性。Firefox 需要前缀 -moz-。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9 以及更早的版本不支持多列属性。 CSS3 创建多列column-count 属性规定元素应该被分隔的列数：实例把 div 元素中的...
2014-03-03 16:32:39
95
原创 CSS3 perspective 属性（3D 元素距视图的距离）
浏览器支持目前浏览器都不支持 perspective 属性。Chrome 和 Safari 支持替代的 -webkit-perspective 属性。 定义和用法perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。...
2014-03-03 16:05:36
1583
原创 CSS3 3D 转换rotateX()、rotateY()
浏览器支持Internet Explorer 10 和 Firefox 支持 3D 转换。Chrome 和 Safari 需要前缀 -webkit-。Opera 仍然不支持 3D 转换（它只支持 2D 转换）。 rotateX() 方法通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。实例div{transform: rotateX(...
2014-03-03 15:41:29
371
原创 css3动画系列之skew() 方法
浏览器支持情况：Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9 需要前缀 -ms-。skew() 方法通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数： 实...
2014-02-28 15:59:30
910
原创 css3动画系列之scale()方法
浏览器支持情况：Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9 需要前缀 -ms-。 scale() 方法通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：...
2014-02-28 15:57:06
1052
原创 css3动画系列之rotate() 方法
浏览器支持情况：Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9 需要前缀 -ms-。 rotate() 方法通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 实例...
2014-02-28 15:52:02
1260
原创 css3动画系列之translate方法
浏览器支持情况Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9 需要前缀 -ms-。 translate() 方法 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） ...
2014-02-28 15:34:43
1449
原创 css3动画系列之transition 属性
浏览器支持情况： Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。Safari 支持替代的 -webkit-transition 属性。定义和用法transition 属性是一个简写属性，用于设置四个过渡属性：transition-propertytransition-durati...
2014-02-10 14:30:40
115
原创 css3动画系列之animation 属性
animation与@keyframes同时使用才可起作用,这里详细介绍下animation的所有用法： animation 属性是一个简写属性，用于设置六个动画属性：animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-count...
2014-01-16 14:44:24
351
原创 css3动画系列之@keyframes规则
html5+css3出现以后，很多优秀的动画效果因为个别主流浏览器不支持的原因，被使用的很少，现在很多做微营销的公司，很多产品是在微信里浏览和使用，微信默认浏览器支持的都是webkit内核，所有很多css3的特性都是支持的，可以大胆使用，尤其是一些动画样式，今天主要介绍一下css3的动画@keyframes规则： @keyframes 规则用于创建动画。在 @keyframes 中...
2014-01-16 13:16:05
463
原创 手机页面css3去掉点击的背景阴影、边框
在iso4+和android2+系统，当手指触摸屏幕a标签链接或按钮时，都会出现灰色的默认背景，这种效果有的时候会影响美观， 如何去掉代码如下：-webkit-tap-highlight-color: rgba(0,0,0,0); ios和android都支持，仅适用于css3 ...
2014-01-13 11:32:31
1001
原创 html5音频组件实现在线广播、回播
最近做了一个微信里广播电台的一个在线收听、往期回播的功能，利用hmtl5的标签<audio>这个项目从决定采用audio到最后实现可谓是一波三折，这里我主要介绍下我实现的过程和遇到的一些问题，希望对也想实现此功能的亲们能少走些弯路。 一、音频<audio>标签 html5音频和视频功能完全取代对插件的依赖，方便使用，具体使用格式如下： <a...
2014-01-09 11:48:51
1111
原创 web页面重构怎么操作？
页面重构就是根据原有页面内容和结构的基础上，通过div+css写出符合web标准的页面结构。具体实现要达到以下三点：1. 结构完整，可通过标准验证2. 标签语义化，结构合理3. 充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化...
2014-01-09 09:51:25
2702
原创 HTML4.0的严格模式与混杂模式 ，它们有何区别
不同文档模式主要影响CSS内容的呈现，尤其是浏览器对盒模型的解析，但在某些情况下也会影响到JavaScript的解释执行。1、文档模式目前有四种： 混杂模式（quirks mode） //让IE的行为与（包含非标准特性的）IE5相同 标准模式（standards mode） //让IE的行为更接近标准行为 准标准模式（almost standards mode） //这种模式...
2014-01-08 11:17:23
332
原创 CSS盒子模型
什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。 这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。那么内容（CONTENT）就是盒子里装的...
2014-01-08 10:41:54
108
原创 css hack
对入门的前端人员来说，css的hack是特别头疼的问题，为了让所有主流浏览器显示同样的页面是煞费苦心，如果入门有个好的师傅带着，可以走很多捷径，否则没有个半年左右的时间是不会彻底从hack里从出来。我现在分享下css hack具体的内容，感谢贡献者：CSS hack由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firef...
2014-01-08 10:36:33
63
原创 W3C标准的理解
做web切图的很多技术人员，对基础知识都了解的不够，以至于在做一些页面优化和页面结构调整的时候做的不好，今天整理出一套关于web前端的一些基础知识，希望大家可以加深理解W3C标准的理解：万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：...
2014-01-08 10:27:39
537
原创 html标签语义化
1、定义： html标签语义：即html标签的含义。首先是关于语义（Semantics）和默认样式的区别，默认样式是浏览器设定的一些常用tag的表现形式，个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他...
2014-01-08 10:16:04
95
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人