请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

QQ登录

只需一步,快速开始

新浪微博登陆

只需一步, 快速开始

切换风格 注册 找回密码

html5源码-html5教程网



1

主题

0

听众

50

积分

注册会员

Rank: 2

贡献
0
金钱
1
发表于 2016-5-6 15:10:23 |显示全部楼层
图片预加载jquery插件 jquery.imgpreload
var load_img = [];
load_img.push('http://m.pubuzhixing.com/Images/vote/music.gif');
load_img.push('http://m.pubuzhixing.com/Images/vote/music_off.png');

// 资源图片加载
jQuery.imgpreload(load_img, {
all: function () {
//加载完成

}
});

加载动画  示例
http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html


animation css3 动画
@-webkit-keyframes jiantouan{from{}to{}}
css 样式
-webkit-animation-name: jiantouan;   名称
-webkit-animation-iteration-count: infinite; 播放次数
-webkit-animation-timing-function: linear; 播放方法
-webkit-animation-delay: 0s; 延时多久播放
-webkit-animation-direction: normal;
-webkit-animation-duration: 1s; 动画持续时间

-webkit-animation-fill-mode: forwards;   动画播放完成后保持最后的状态

H5整体适配思路
依照设计图的宽高比 根据手机屏幕的高度 计算出场景真正占取的宽度,场景元素的布局以实际计算的宽度为基础;
背景图拉伸全屏显示
如:移动设计图的比例一般为750 *  1334   宽高比为0.56
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
var rwidth = 0.56 * pageHeight;
if (rwidth < pageWidth) {
var left = (pageWidth - rwidth)/2;
$(".screen").css({ left: left, width: rwidth });//设置实际场景的宽度
}

背景图要跟场景融合;
背景图跟场景元素分离;
//js touch  简单向上滑动监控
var startX, startY;
function touchStart(event) {

if ($(".screen.current").hasClass("cover_last")) {

}
else {
event.preventDefault(); 阻止浏览器的默认事件
var touch = event.touches[0];
startX = touch.pageX;
startY = touch.pageY;

}
}
var touchuid = document.getElementById("touchuid");
touchuid.addEventListener('touchstart', touchStart, false);

touchuid.addEventListener('touchmove', function (event) {
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
if (startX) {
x = touch.pageX - startX;
y = touch.pageY - startY;
//alert(y);
if (y < -30) {

//做你的事情
startX = 0;
startY = 0;
}
}

}
}, false);


0

主题

0

听众

9

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-6 15:38:47 |显示全部楼层
呵呵。。。
回复

使用道具 举报

0

主题

0

听众

19

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-7 19:43:51 |显示全部楼层
看到了不错啊
回复

使用道具 举报

0

主题

0

听众

26

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-7 19:50:53 |显示全部楼层
路过
回复

使用道具 举报

0

主题

1

听众

31

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-7 19:53:20 |显示全部楼层
占坑编辑ing
回复

使用道具 举报

0

主题

0

听众

5

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-7 19:55:00 |显示全部楼层
不错哦 真 的很实用
回复

使用道具 举报

1

主题

0

听众

49

积分

新手上路

Rank: 1

贡献
0
金钱
1
发表于 2016-5-7 19:57:23 |显示全部楼层
路过的帮顶
回复

使用道具 举报

0

主题

0

听众

45

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-8 23:35:13 |显示全部楼层
顶起出售广告位
回复

使用道具 举报

0

主题

0

听众

25

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-13 09:29:13 |显示全部楼层
支持支持再支持
回复

使用道具 举报

0

主题

0

听众

19

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-16 00:59:54 |显示全部楼层
是爷们的娘们的都帮顶!大力支持
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆



Archiver|手机版|     

HTML5教程网 Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部