分类目录归档:手机移动端开发切图(html5+css3)

手机移动端开发切图(html5+css3)

手机移动端前端开发切图之head(meta、media query)

一、手机端必备meta

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

备注:我详细看过每个属性的含义,但在我遇到的项目中都没有修改属性值的必要,所以我一般都是直接复制粘贴;如果想刨根问底,点击http://www.php100.com/html/webkaifa/HTML5/2012/0831/10979.html

二、

常用CSS3特效收藏

一、鼠标放置图像旋转360度

#nav a i{
	-webkit-transition: -webkit-transform 0.4s ease-out;
	-moz-transition: -moz-transform 0.4s ease-out;
	transition: transform 0.4s ease-out;
}
#nav a:hover i{
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	transform: rotate(360deg);
}

来源:http://vc.changyou.com/ideas-web.shtml#/ideas/1

二、从上面掉下来

.tm_view_eighth .tm_mask {
-webkit-transition:all .3s ease-out .5s;
-moz-transition:all .3s ease-out .5s;
-o-transition:all .3s ease-out .5s;
-ms-transition:all .3s ease-out .5s;
transition:all .3s ease-out .5s
}
.tm_view_eighth h2 {
	-webkit-transform:translateY(-200px);
	-moz-transform:translateY(-200px);
	-o-transform:translateY(-200px);
	-ms-transform:translateY(-200px);
	transform:translateY(-200px);
-webkit-transition:all .2s ease-in-out .1s;
-moz-transition:all .2s ease-in-out .1s;
-o-transition:all .2s ease-in-out .1s;
-ms-transition:all .2s ease-in-out .1s;
transition:all .2s ease-in-out .1s
}
.tm_view_eighth p {
	color:#333;
	-webkit-transform:translateY(-200px);
	-moz-transform:translateY(-200px);
	-o-transform:translateY(-200px);
	-ms-transform:translateY(-200px);
	transform:translateY(-200px);
-webkit-transition:all .2s ease-in-out .2s;
-moz-transition:all .2s ease-in-out .2s;
-o-transition:all .2s ease-in-out .2s;
-ms-transition:all .2s ease-in-out .2s;
transition:all .2s ease-in-out .2s
}
.tm_view_eighth a.btn {
	-webkit-transform:translateY(-200px);
	-moz-transform:translateY(-200px);
	-o-transform:translateY(-200px);
	-ms-transform:translateY(-200px);
	transform:translateY(-200px);
-webkit-transition:all .2s ease-in-out .3s;
-moz-transition:all .2s ease-in-out .3s;
-o-transition:all .2s ease-in-out .3s;
-ms-transition:all .2s ease-in-out .3s;
transition:all .2s ease-in-out .3s
}


.tm_view_eighth:hover a.btn {
	-webkit-transform:translateY(0px);
	-moz-transform:translateY(0px);
	-o-transform:translateY(0px);
	-ms-transform:translateY(0px);
	transform:translateY(0px);
	-webkit-transition-delay:0s;
	-moz-transition-delay:0s;
	-o-transition-delay:0s;
	-ms-transition-delay:0s;
	transition-delay:0s
}

.tm_view_eighth:hover .tm_mask {
	-webkit-transition-delay:0s;
	-moz-transition-delay:0s;
	-o-transition-delay:0s;
	-ms-transition-delay:0s;
	transition-delay:0s;
-webkit-animation:bounceY .9s linear;
-moz-animation:bounceY .9s linear;
-ms-animation:bounceY .9s linear;
animation:bounceY .9s linear
}
.tm_view_eighth:hover h2 {
	-webkit-transform:translateY(0px);
	-moz-transform:translateY(0px);
	-o-transform:translateY(0px);
	-ms-transform:translateY(0px);
	transform:translateY(0px);
-webkit-transition-delay:.4s;
-moz-transition-delay:.4s;
-o-transition-delay:.4s;
-ms-transition-delay:.4s;
transition-delay:.4s
}
.tm_view_eighth:hover p {
	-webkit-transform:translateY(0px);
	-moz-transform:translateY(0px);
	-o-transform:translateY(0px);
	-ms-transform:translateY(0px);
	transform:translateY(0px);
-webkit-transition-delay:.2s;
-moz-transition-delay:.2s;
-o-transition-delay:.2s;
-ms-transition-delay:.2s;
transition-delay:.2s
}
.tm_view_eighth:hover a.btn {
	-webkit-transform:translateY(0px);
	-moz-transform:translateY(0px);
	-o-transform:translateY(0px);
	-ms-transform:translateY(0px);
	transform:translateY(0px);
	-webkit-transition-delay:0s;
	-moz-transition-delay:0s;
	-o-transition-delay:0s;
	-ms-transition-delay:0s;
	transition-delay:0s
}

来源:http://www.7755.me/index.html

三、短小精悍的css3动画库

http://animator.ringotc.net/

四、未完待续

常用原生js函数封装

//封装ID
function $(id) {
	return typeof id === 'string' ? document.getElementById(id) : id;
}
//封装addClass,removeClass,toggleClass
function hasClass(obj, cls) {
	return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(obj, cls) {
	if (!this.hasClass(obj, cls)) obj.className += ' ' + cls;
}

function removeClass(obj, cls) {
	if (hasClass(obj, cls)) {
		var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
		obj.className = obj.className.replace(reg, ' ');
	}
}

function toggleClass(obj, cls) {
	if (hasClass(obj, cls)) {
		removeClass(obj, cls);
	} else {
		addClass(obj, cls);
	}
}
//封装tab切换
function tab(tit, con) {
	var titles = $(tit).getElementsByTagName('li'),
		contents = $(con).getElementsByTagName('li');
	for (var i = 0; i < titles.length; i++) {
		titles[i].id = i;
		titles[i].onmousedown = function() {
			for (var j = 0; j < titles.length; j++) {
				titles[j].className = '';
				contents[j].style.display = 'none';
			};
			this.className = 'on';
			contents[this.id].style.display = 'block';
		}
	}
}
//封装焦点轮播
function focus(wrap, pic, list, prev, next, isAuto) {
	var pic = $(pic),

		prev = $(prev),
		next = $(next),
		index = 0,
		timer = null,
		len = pic.getElementsByTagName('li').length,
		height = pic.getElementsByTagName('li')[0].offsetHeight;
	if (isAuto) {
		auto();
		if (wrap) {
			var wrap = $(wrap);
			wrap.onmouseover = clear;
			wrap.onmouseout = auto;
		}
		if (prev && next) {
			prev.onmouseover = clear;
			next.onmouseover = clear;
			prev.onmouseout = auto;
			next.onmouseout = auto;
		}
	}
	if (prev && next) {
		next.onclick = function() {
			index++;
			if (index >= len) {
				index = 0;
			}
			change(index);
		}
		prev.onclick = function() {
			index--;
			if (index < 0) {
				index = len - 1;
			}
			change(index);
		}
	}
	if (list) {
		var list = $(list).getElementsByTagName('li');
		for (var i = 0; i < len; i++) {
			list[i].title = i;
			list[i].onmouseover = function() {
				change(this.title);
			}
		}
	}
	function auto() {
		timer = setInterval(function() {
			index++;
			if (index >= len) {
				index = 0;
			}
			change(index);
		}, 2000);
	}
	function clear() {
		clearInterval(timer);
	}
	function change(curIndex) {
		pic.style.marginTop = -height * curIndex + 'px';
		if (list) {
			for (var n = 0; n < len; n++) {
				list[n].className = '';
			}
			list[curIndex].className = 'on';
		}
		index = curIndex;
	}
}

bxSlider-响应式jquery内容滑动插件

官方网站:http://bxslider.com/

下载链接:http://bxslider.com/lib/jquery.bxslider.zip

演示网址:http://bxslider.com/examples

 

一、为什么应该用这个slider?

1、完全响应式设计-适应于任何设备;

2、支持水平、垂直、渐消模式;

3、其中能包含图片、视频或HTML内容;

4、支持内置的先进触摸、刷屏;

5、使用CSS渐变实现滑动动画(本机硬件加速);

6、全面地回调API和公共方法;

7、文件小,完全主题化,实施起来简单;

8、支持浏览器:Firefox、Chrome、Safari、iOS、Andriod、IE7+;

9、大量的配置选项参数;

 

二、怎样安装?

第一步:链接必要的文件(jquery及bxslider的js和css文件)

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

第二步:需要对应以下HTML标签( <ul class=”bxslider”> 包含一些 <li> 每个 li 代表一个滑动单位 )

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

第三步:调用bxslider

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

 

三、配置选项参数

第一部分、通用

1、mode(滑动类型)

默认:’horizontal’

可选:’horizontal’, ‘vertical’, ‘fade’

2、speed(滑动速度,单位ms)

默认:500

可选:任意数字

3、slideMargin(滑块之间的外间距)

默认:0

可选:任意数字

4、startSlide(从哪个下标开始滑动 [下标基于0计数] )

默认:0

可选:任意数字

5、randomStart(从随机一个滑块开始滑动)

默认:false

可选:true, false

6、slideSelector(所选元素将作为一个滑块参与滑动;默认值为空,表示当前滑动容器的直接子元素都作为滑块参与滑动)

默认:”

可选:任意jquery选择器,例如:’div.slide’

7、infiniteLoop(是否循环)

默认:true

可选:true, false

8、hideControlOnEnd(滑动到最后时,“下一个”按钮是否隐藏)

默认:false

可选:true, false

备注:要想隐藏,须设置 infiniteLoop 为false和hideControlOnEnd为true

9、tickerHover(鼠标放置是否停止滑动 [如果使用CSS transitions ,这个函数不起作用] )

默认:false

可选:true, false

10、adaptiveHeight(基于每个滑块的高度动态调整容器的高度)

默认:false

可选:true, false

11、adaptiveHeightSpeed(滑块高度渐变,单位ms [只有当adaptiveHeight为true时起作用] )

默认:500

可选:任意数字

12、video(如果有视频,设置这个参数为true,同时调用文件 plugins/jquery.fitvids.js )

默认:false

可选:true, false

13、useCSS(如果true,将用 CSS transitions;如果false,将用jquery animate())

默认:true

可选:true, false

14、preloadImages(如果true,预加载所有图片,如果false,预加载可视的部分图片)

默认:visible

可选:all, visible

15、touchEnabled(是否允许触摸刷屏)

默认:true

可选:true, false

16、swipeThreshold(为了执行一个slide渐变需要突出的像素数量 [只当touchEnabled为true时起作用] )

默认:50

可选:任意数字

17、oneToOneTouch(如果true,刷屏时无淡入淡出)

默认:true

可选:true, false

18、preventDefaultSwipeX(如果true,将不支持横向刷屏)

默认:true

可选:true, false

19、preventDefaultSwipeY(如果true,将不支持纵向刷屏)

默认:false

可选:true, false

 

第二部分:Pager

1、pager(如果true,一个pager将被添加)

默认:true

可选:true, false

2、pagerType(如果full,将为每个滑块生成一个链接;如果short,x/y,例如1/5)

默认:full

可选:full, short

3、pagerShortSeparator(分页链接下标的间隔)

默认:’/’

可选:任意字符

 

第三部分:Controls

1、controls(是否添加“上一个”、“下一个”按钮)

默认:true

可选:true, false

2、nextText(“下一个”按钮上面的文字)

默认:’Next’

可选:任意字符

3、prevText(“上一个”按钮上面的文字)

默认:’Prev’

可选:任意字符

4、autoControls(是否添加“开始停止”按钮)

默认:true

可选:true, false

5、startText(“开始”按钮上面的文字)

默认:’Start’

可选:任意字符

6、stopText(“停止”按钮上面的文字)

默认:’Stop’

可选:任意字符

 

第四部分:Auto

1、auto(是否自动渐变)

默认:false

可选:true, false

2、pause(每两个自动渐变之间的时间间隔)

默认:4000

可选:任意整数

3、autoStart(是加载时还是点击start按钮时开始)

默认:true

可选:true, false

4、autoDirection(自动滑动的方向)

默认:’next’

可选:’next’, ‘prev’

5、autoHover(鼠标放置是否暂停)

默认:false

可选:true, false

6、autoDelay(自动延时)

默认:0

可选:任意整数

 

第五部分:Carousel

1、minSlides(如果滑块数量比此值小,将按照从大到小排列)

默认:1

可选:任意整数

2、maxSlides(如果滑块数量比此值大,将按照从小到大排列)

默认:1

可选:任意整数

3、moveSlides(每次移动的滑块数量;如果为0,将默认为所有可视的滑块数量)

默认:0

可选:任意整数

4、slideWidth(每个滑块的宽度,水平滑动必须有)

默认:0

可选:任意整数

 

备注:本翻译基于bxslider官方网站;源于群里有许多前端朋友提及不知道怎么用bxslider,又看不习惯英文;参数部分挑选了大部分常用的;如有不足之处,请留言讨论;