zhudage001
- 浏览: 30290 次
- 性别:
- 来自: 吉林
-
最新评论
文章列表
ontouchstart实现手机触屏中的hover效果
最近一直都在做手机网站的项目，会经常遇到手机屏幕触摸无交互效果，今天在一篇文章中看到模拟网页端hover效果的例子拿出来和大家分享下，已经使用效果还不错，大家可以根据下面的案例学下：
一、css样式：
<style type="text/css">.inner { width: 100%; height: 100px; position: relative; }.inner a { background: #000; display: block; color: #fff }.inner a. ...
.animate( properties [, duration ] [, easing ] [, complete ] )
properties：CSS属性和值，该动画将对应移动的对象。
例：
$( "#clickme" ).click(function() {
$( "#book" ).animate({
left: "+=50",//需要变化的css属性
}, 5000, function() {
// Animation complete.
});
...
此属性支持ie7以上
div{background-color: rgba(0, 0, 0, 0.6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);/*低版本ie透明写法*/
}
display的属性值table-cell代表将标签转换为表格td或是th格式，之后可以引用td的属性vertical-align:bottom等；
如需要将td单行显示需要加入行元素display:table-row;
如并列显示则不需要加入display:table-row;
ie6、ie7不支持；
下面的案例是单行显示代码：
ul li p{ overflow:hidden; width:130px; margin:0 0 0 20px; overflow:hidden; display:table-row; }ul li p span{ displ ...
最近发现百度中心主页在ie10上每次打开动画加载每个模块，
于是学习了一下，原来是使用了插件scrollReveal.js，拿出来分享给大家：
案例可以到下面下载，这个很简单只要在页面引入scrollReveal.js此js 在对应标签上写上如下内容：
禁止反复运动页面引用：
<div id="container" data-scrollreveal="enter left over 1s and move 300px after 0.3s"></div>
正常引用：
window.scrollReveal = ne ...
最近看到w3cfuns教程页面的一个效果，学习和实现了一下，感觉不错，大家以后可以在项目中使用，其中几个知识点：
1、使用伪类元素:before和after来处理显示在图片上面的半透明遮罩背景和图片效果
2、使用css3动画属性transform:scale(1.1) 变化图片大小
3、使用transition实现渐变动画效果
页面代码如下：
<body id="before-after"><ul><li><a href="#"><img src="images/p4. ...
CSS3 基本选择器
- 博客分类：
- html5+css3基础知识
CSS3 基本选择器
*
E
.class
#id
EF
E>F
E+F
E[attribute]
E[attribute=value]
E[attribute~=value]
E[attribute | = value]
:first-child
E[attribute^=value]
E[attribute$=value]
E[attribute*=value]
:lang()
:before
:after
:first-letter
::before
::after
::first-lette ...
让IE（ie6/ie7/ie8）支持HTML5元素，我们需要在HTML头部添加以下 JavaScript，这是一个简单的document.createElement声明，利用条件注释针对IE来调用这个js文件。 Opera，FireFox等其他非IE浏览器就会忽视这段代码，也不会存在http请求。
引用google的html5.js文件，将代码放到head标签区间，代码内容可以自己下载下来看。
<!–[if lt IE9]>
<script src="js/html5.js"></script >
<![end ...
创建对象
不同的浏览器使用不同的方法来创建 XMLHttpRequest 对象。
Internet Explorer 使用 ActiveXObject。
其他浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
要克服这个问题，可以使用这段简单的代码：
var XMLHttp=null;
if (window.XMLHttpRequest)
{
XMLHttp=new XMLHttpRequest()
}else if (window.ActiveXObject)
{
XMLHttp=new ActiveXObject("Micro ...
js中apply的用法：
1、对象的继承：
apply方法能劫持另外一个对象的方法，继承另外一个对象的属性
Function.apply(obj,args)方法能接收两个参数
obj：这个对象将代替Function类里this对象
args：这个是数组，它将作为参数传给Function（args-->arguments）
apply示范代码如下：
<script> function Person(name,age){ //定义一个类，人类 this.name=name; //名字 this.age=age; //年龄 this.sayhel ...
1、this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。
//构造两个对象分别为a和bvar a=new Object();var b=new Object();
//给两个对象都添加属性name,分别给予不同的属性值a.name="小明";b.name="梅梅";
//构造a的方法获取属性name的值a.getname=function(){
alert("这是是a对象中的this值："+this.name) }
//构造b的方法获 ...
这个主要是实现手机页面相册横屏时能单独作为幻灯片播放，前提一定要让手机的横屏功能开启才可以。主要是通过iframe调用不同的引用页面实现，下面附上具体代码，可以尝试实现。
<!doctype html><html><head><meta charset="gb2312"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"><title&g ...
浏览器支持
Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 以及更早的版本不支持多列属性。
CSS3 创建多列
column-count 属性规定元素应该被分隔的列数：
实例
把 div 元素中的文本分隔为三列：
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
...
浏览器支持
目前浏览器都不支持 perspective 属性。
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
定义和用法
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。
提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。
浏览器支持
Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换（它只支持 2D 转换）。
rotateX() 方法
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
实例
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); ...