以下是 html5苹果触屏滑动接电话特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>html5苹果触屏滑动接电话特效</title>
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript">
if (/Android (\d+\.\d+)/.test(navigator.userAgent)) {
var version = parseFloat(RegExp.$1);
if (version > 2.3) {
var phoneScale = parseInt(window.screen.width) / 640;
document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
} else {
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}
</script>
<script type="text/javascript" src="js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="js/easeljs-0.7.1.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.5.1.min.js"></script>
<script type="text/javascript" src="js/movieclip-0.7.1.min.js"></script>
<script type="text/javascript" src="gif.js"></script>
<script type="text/javascript">
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
exportRoot = new lib.gif();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onLoad="init();">
<div class="holder">
<img src="img/share.jpg" style="position: absolute; top: 0;left: 0;opacity: 0;">
<!--page2-->
<div class="page1 abs">
<img class="abs p1_pic01" src="img/p1_pic01.png" />
<img class="abs p1_pic02" src="img/p1_pic02.png" />
<div class="abs p1_box" id="drag_box">
<canvas id="canvas" width="189" height="47"></canvas>
<img id="drag_bar" src="img/p1_bar.png" />
</div>
</div>
<!--page3-->
<div class="vid abs">
<img class="vidImg abs" src="music/p01.jpg" width="640" />
<video id="mid" src="music/m.mp4" tppabs="http://dct-test.oss-cn-beijing.aliyuncs.com/milu/m.mp4" width="640" height="1136" preload="preload" poster="music/p01.jpg" x-webkit-airplay="true"
webkit-playsinline="true">
</video>
<!--<div class="zaodian abs"></div>-->
<img class="stopVid abs on" src="img/stopVid.png" />
<img class="playVid abs" src="img/p1_bar.png" />
</div>
<!--过渡页-->
<div class="page2 abs">
<img class="abs gd_pic01" src="img/gd_pic01.png" />
<img class="abs gd_pic02" src="img/gd_pic02.png" />
</div>
<div class="page4" id="page4">
<!--//+++++++++++ page1 ++++++++++++++-->
<div class="page current" style='background-color: #6fc4ba'>
<img class="abs p41_shareBtn" src="img/p41_shareBtn.png" />
<div class="scpage abs">
<!--<img src="img/cc01.jpg" style="position: absolute;top: 0;left: 0;">-->
<img class="abs p41_pic04" src="img/p41_pic04.png" width="570" />
<img class="abs p41_pic05" src="img/p41_pic05.png" width="580" />
<img class="abs p41_pic02" src="img/p41_pic02.png" />
<img class="abs p41_btn01" src="img/p41_btn01.png" width="350px" />
</div>
<img class="abs p41_pix01" src="img/p41_pix01.png" />
<img class="k_arrow z-move" src="img/arrow.png" />
</div>
<!--//+++++++++++ page2 ++++++++++++++-->
<div class="page" style='background-color: #6fc4ba'>
<div class="scpage2 abs ">
<img class="p42_pic01" src="img/p42_pic01.png" />
<img class="p42_pic02" src="img/p42_pic02.png" />
<img class="p42_pic03" src="img/p42_pic03.png" />
</div>
<img class="k_arrow z-move" src="img/arrow.png" />
</div>
<!--//+++++++++++ page3 ++++++++++++++-->
<div class="page" style='background-color: #6fc4ba'>
<div class="scpage3 abs">
<!--<img src="img/cc03.png" style="position: absolute;">-->
<img class="abs p43_pic01" src="img/p43_pic01.png" />
<img class="abs p43_pic02" src="img/p43_pic02.png" />
<img class="abs p43_pic03" src="img/p43_pic03.png" width="460px" />
<img class="abs p43_pic04" src="img/p43_pic04.png" />
</div>
<img class="abs p41_shareBtn" src="img/p41_shareBtn.png" />
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="js/Utils.js"></script>
<script type="text/javascript" src="js/TweenMax.min.js"></script>
<script type="text/javascript" src="js/Draggable.min.js"></script>
<script type="text/javascript" src="js/cache-1.0.min.js"></script>
<script type="text/javascript" src="js/video2.js"></script>
<script>
function addWeiXinShare() {
$.ajax({
url: '#',
type: "GET",
dataType: 'jsonp',
data: {url:location.href,appID:"wxc699e1abc03d4836",appKey:"4241c2404cb89897f7f1a5652e19a7eb"},
success: function (json) { //客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数
console.log(json);
wx.config({
debug: false,
appId: json.appId, //'<?php echo $signPackage["appId"];?>',
timestamp: json.timestamp, //<?php echo $signPackage["timestamp"];?>,
nonceStr: json.nonceStr, //'<?php echo $signPackage["nonceStr"];?>',
signature: json.signature, //'<?php echo $signPackage["signature"];?>',
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ'
]
});
window.shareData = {
'title': '如此前任来电话了，你接吗？',
'description': '#',
'url': 'index.html'/*tpa=http://milu.duocaitou.com/index.html*/,
'picURL': 'img/share.jpg'/*tpa=http://milu.duocaitou.com/img/share.jpg*/
};
wx.ready(function() {
wx.onMenuShareTimeline({
title: window.shareData.title, // 分享标题
link: window.shareData.url, // 分享链接
imgUrl: window.shareData.picURL, // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
// setShareCount()
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareAppMessage({
title: window.shareData.title, // 分享标题
desc: window.shareData.description, // 分享描述
link: window.shareData.url, // 分享链接
imgUrl: window.shareData.picURL, // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function() {
// 用户确认分享后执行的回调函数
// setShareCount()
},
cancel: function() {
// 用户取消分享后执行的回调函数
},
fail:function(){
},
trigger:function(){
}
});
wx.onMenuShareQQ({
title: window.shareData.title, // 分享标题
desc: window.shareData.description, // 分享描述
link: window.shareData.url, // 分享链接
imgUrl: window.shareData.picURL, // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
// setShareCount()
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
}
});
}
addWeiXinShare();
</script>
</body>
</html>JS代码(Utils.js):
/** * Created by lg on 15/5/15. */
var Util = (function(){
var setButton = function($mc){
var mc = $mc;
mc.mouseEnabled = true;
mc.mouseChildren = false;
//开启 舞台的鼠标over out 状态 var _stage = mc.getStage();
_stage .enableMouseOver(20);
mc.addEventListener("rollover",rollover);
console.log(mc.timeline.duration);
function rollover(){
playTo(mc,mc.timeline.duration);
}
mc.addEventListener("rollout",function(){
playTo(mc,1);
}
)}
var playTo = function(mc,frame,attribute){
var _curFrame = mc.currentFrame;
var fr = -1;
if(attribute){
var _onComplete = attribute.onComplete || null;
var _onUpdate = attribute.onUpdate || null;
}
if(typeof frame == "number"){
fr = frame;
}
else{
fr = labelToFrame(mc,frame);
}
if(fr >= 0){
var _t = Math.abs(fr-_curFrame)/30;
if(_curFrame != fr){
to(mc,_t,{
currentFrame:fr,onUpdate:function(){
mc.gotoAndStop(mc.currentFrame);
if(_onUpdate){
_onUpdate({
curFrame:mc.currentFrame,target:mc}
);
}
}
,onComplete:function(){
if(_onComplete){
_onComplete({
curFrame:mc.currentFrame,target:mc}
);
}
}
}
);
}
}
}
var addFrameEvent = function(mc,frame,handle){
var fr = -1;
if(typeof frame == "number"){
fr = frame;
}
else{
fr = labelToFrame(mc,frame);
}
if(fr >= 0){
mc.timeline.addTween(createjs.Tween.get(mc).wait(fr).call(handle));
}
}
var labelToFrame = function(mc,label){
var labels = mc.timeline.getLabels(label);
if(labels .length>0){
var frame = -1;
var len = labels .length;
for (var i =0;
i<len;
i++){
if(labels[i].label == label){
frame = labels[i].position;
console.log(frame);
}
}
}
return frame;
}
var to = function(target,duration,attribute){
// body... var thisTarget = target;
var delay = attribute.dalay || 0;
var onCompleteHandle = attribute.onComplete || null;
var onUpdateHandle = attribute.onUpdate || null;
createjs.Tween.get(target,{
onChange:onChangeHandle,override:true}
).wait(delay).to(attribute,duration*1000).call(handleComplete);
function handleComplete (argument){
// body... if(onCompleteHandle){
onCompleteHandle();
}
}
function onChangeHandle (e){
// body... if(onUpdateHandle){
onUpdateHandle(e);
}
}
}
return{
setButton:setButton,playTo:playTo,to:to,labelToFrame:labelToFrame,addFrameEvent:addFrameEvent}
}
)(createjs = createjs||{
}
);
var createjs;
var SystemUtil = (function(){
var getuaBrowser = function(){
var ua = navigator.userAgent.toLowerCase();
// Useragent RegExp var rwebkit = /(webkit)[ \/]([\w.]+)/;
var ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/;
var rmsie = /(msie) ([\w.]+)/;
var rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/;
var match = rwebkit.exec( ua ) || ropera.exec( ua ) || rmsie.exec( ua ) || ua.indexOf("compatible") < 0 && rmozilla.exec( ua ) || [];
return{
browser:match[1] || "",version:match[2] || "0"}
;
}
var getuaPlatform = function(){
var ua = navigator.userAgent.toLowerCase();
// Useragent RegExp var rplatform = /(ipad|iphone|ipod|android|blackberry|playbook|windows ce|webos)/;
var rtablet = /(ipad|playbook)/;
var randroid = /(android)/;
var rmobile = /(mobile)/;
var platform = rplatform.exec( ua ) || [];
var tablet = rtablet.exec( ua ) || !rmobile.exec( ua ) && randroid.exec( ua ) || [];
if(platform[1]){
platform[1] = platform[1].replace(/\s/g,"_");
// Change whitespace to underscore. Enables dot notation.}
return{
platform:platform[1] || "",tablet:tablet[1] || ""}
;
}
return{
getBrower:getuaBrowser,getPlatform:getuaPlatform}
}
)();
var StringTools = (function(){
//是否为手机号码 var isMobile = function(str){
var myreg = /^(((13[0-9]{
1}
)|(15[0-9]{
1}
)|(18[0-9]{
1}
))+\d{
8}
)$/;
if(myreg.test(str)){
return true;
}
return false;
}
//是否为电子邮箱 var isEmail = function(str){
var emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
if(emailReg.test(str)){
return true;
}
return false;
}
//是否为电话号码 var isPhone = function(strPhone){
var phoneRegWithArea = /^[0][1-9]{
2,3}
-[0-9]{
5,10}
$/;
var phoneRegNoArea = /^[1-9]{
1}
[0-9]{
5,8}
$/;
var prompt = "您输入的电话号码不正确!" if( strPhone.length > 9 ){
if( phoneRegWithArea.test(strPhone) ){
return true;
}
else{
//alert( prompt );
return false;
}
}
else{
if (phoneRegNoArea.test(strPhone)){
return true;
}
else{
return false;
}
}
}
/* 是否为数字 */
var isNumber = function(str){
var re = new RegExp("^[0-9]+$");
if (str.search(re) != -1){
return true;
}
return false;
}
/* str是否为空 */
var isNull = function(str){
var regu = new RegExp("^[ ]+$");
return regu.test(str);
}
/* *JavaScript精确获取字符串长度，使用str.match匹配相关正则内容， * 字符串区分中英文，一个中文2个字节,英文一个 */
var getStrLength = function(str){
var cArr = str.match(/[^\x00-\xff]/ig);
return str.length + (cArr == null ? 0:cArr.length);
}
/* 获取链接的查询字符串，如：var link = "http:baidu.com?id=121&cid=1";
getUrlVars(link).id;
getUrlVars(link).cid;
* * */
var getUrlVars = function(url){
var vars = [],hash;
var hashes = url.slice(url.indexOf('?') + 1).split('&');
//var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0;
i < hashes.length;
i++){
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
var getDomain = function(url){
var str = url.slice(url.indexOf('?'))[0];
}
return{
isMobile:isMobile,isEmail:isEmail,isPhone:isPhone,isNumber:isNumber,isNull:isNull,getUrlVars:getUrlVars,getStrLength:getStrLength}
}
)();
var GArrayUtil = (function(){
var removeFromArray = function(arr,obj){
for (var i = 0;
i < arr.length;
i++){
if (arr[i] == obj){
arr.splice(i,1);
return i;
}
}
return -1;
}
var getRandomArr = function (_rang,_max){
var tempArr = [];
while (tempArr.length < _rang){
var tempNum = Math.random() * _max;
if (!arrayContainsValue(tempArr,tempNum)){
tempArr.push(tempNum);
}
}
return tempArr;
}
var arrayContainsValue = function (arr,value){
return (arr.indexOf(value) != -1);
}
var shuffle = function(inputArray){
var cf = function(){
var r = Math.random() - 0.5;
if (r < 0){
return -1;
}
else{
return 1;
}
}
;
var resultArray = cloneArray(inputArray);
resultArray.sort(cf);
return resultArray;
}
var cloneArray = function(inputArray){
return inputArray.slice();
}
return{
removeFromArray:removeFromArray,arrayContainsValue:arrayContainsValue,cloneArray:cloneArray}
}
)();
CSS代码(index.css):
*{padding:0;margin:0}
body{width:100%;height:100%;overflow:hidden;background-color:#000000}
img{display:block;outline:none}
.abs{position:absolute}
.page1.on{display:block}
.page1{width:640px;height:100%;overflow:hidden;display:none;background:url("../img/p1_bg.jpg"/*tpa=http://milu.duocaitou.com/img/p1_bg.jpg*/
) no-repeat;top:0;left:0;background-size:cover;background-color:black}
.page1 .p1_pic01{top:22.3%;left:33.2%}
.page1 .p1_pic02{top:65%;left:20%}
.page1 #drag_bar{padding:6px}
.page1 .p1_box{width:455px;height:126px;top:76.6%;padding-top:5px;left:16%;overflow:hidden;background-color:#6ec4ba;border-radius:80px}
.page1 #canvas{position:absolute;left:180px;top:40px}
.zaodian{width:100%;height:100%;background:url("../img/zaodiangif.gif"/*tpa=http://milu.duocaitou.com/img/zaodiangif.gif*/
) repeat;opacity:.08;top:0;left:0}
.vid.on{visibility:visible;opacity:1}
.vid{width:100%;height:100%;overflow:hidden;visibility:hidden;opacity:0;transition:all .6s ease-out}
.stopVid,.playVid{bottom:148px;left:50%;margin-left:-55px;display:none}
.stopVid.on,.playVid.on{display:block}
.vidImg{top:0;left:0}
.page2.on{opacity:1;visibility:visible}
.page2{width:100%;height:100%;overflow:hidden;visibility:hidden;opacity:0;transition:opacity .3s ease-out;top:0;left:0;background:url("../img/gd_bg.jpg"/*tpa=http://milu.duocaitou.com/img/gd_bg.jpg*/
) no-repeat;background-size:cover}
.gd_pic01{top:140px;left:50%;margin-left:-256px}
.gd_pic02{bottom:50px;right:70px}
video{line-height:0;vertical-align:baseline;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none}
.page{position:relative;width:100%;height:100%;overflow:hidden}
.scpage{width:640px;height:1136px}
.page4{position:absolute;top:0;left:0;width:640px;height:100%;background-color:#6fc4ba;visibility:hidden;opacity:0;transition:opacity .6s ease-out}
.page4.on{visibility:visible;opacity:1}
.p41_shareBtn{top:2%}
.p41_pic03{top:10%;left:50%;margin-left:-280px}
.p41_pix01{bottom:0;left:50%;margin-left:-450px}
.p41_pic04{top:11%;left:50%;margin-left:-260px;-webkit-transform:translateX(600px);opacity:0}
.current .p41_pic04{-webkit-animation:fadeIn2 .6s .4s ease both;animation:fadeIn2 .6s .4s ease both}
.p41_pic05{top:28%;left:50%;margin-left:-290px}
.p41_pic02{top:55%;left:70%;transform-origin:top center}
.current .p41_pic02{-webkit-animation:shake-rotate 3s 1s ease both;animation:shake-rotate 3s 1s ease both}
.p41_btn01{top:74%;left:50%;margin-left:-195px;cursor:pointer;padding:10px 30px}
.scpage2,.scpage3{left:3%}
.p42_pic02{margin:30px 0}
.scpage3{width:601px;height:886px}
.p43_pic02{top:360px}
.p43_pic03{top:523px;left:82px}
.p43_pic04{top:773px;left:175px}
.holder{position:absolute;overflow:hidden;width:640px;margin:0 auto;top:0;height:100%;left:50%;margin-left:-320px}
.k_arrow{position:absolute;bottom:80px;left:50%;margin-left:-15px;-webkit-animation:guideTop 1.2s infinite}
@-webkit-keyframes guideTop{0%{-webkit-transform:translateY(32px);opacity:0}
60%{-webkit-transform:translateY(12px);opacity:1}
100%{-webkit-transform:translateY(0px);opacity:0}
}
@-webkit-keyframes fadeIn2{0%{opacity:0;-webkit-transform:translateX(600px)}
100%{opacity:1;-webkit-transform:translateX(0)}
}
@keyframes fadeIn2{0%{opacity:0;-webkit-transform:translateX(600px)}
100%{opacity:1;-webkit-transform:translateX(0)}
}
@-webkit-keyframes shake-rotate{0%,34%{-webkit-transform:translate(0px,0px) rotate(0deg)}
2%{-webkit-transform:translate(0px,0px) rotate(4.5deg)}
4%{-webkit-transform:translate(0px,0px) rotate(-5.5deg)}
6%{-webkit-transform:translate(0px,0px) rotate(3.5deg)}
8%{-webkit-transform:translate(0px,0px) rotate(-5.5deg)}
10%{-webkit-transform:translate(0px,0px) rotate(2.5deg)}
12%{-webkit-transform:translate(0px,0px) rotate(-0.5deg)}
14%{-webkit-transform:translate(0px,0px) rotate(-3.5deg)}
16%{-webkit-transform:translate(0px,0px) rotate(4.5deg)}
18%{-webkit-transform:translate(0px,0px) rotate(-2.5deg)}
20%{-webkit-transform:translate(0px,0px) rotate(-5.5deg)}
22%{-webkit-transform:translate(0px,0px) rotate(-2.5deg)}
24%{-webkit-transform:translate(0px,0px) rotate(4.5deg)}
26%{-webkit-transform:translate(0px,0px) rotate(-4.5deg)}
28%{-webkit-transform:translate(0px,0px) rotate(2.5deg)}
30%{-webkit-transform:translate(0px,0px) rotate(-7.5deg)}
32%{-webkit-transform:translate(0px,0px) rotate(-5.5deg)}
}
@keyframes shake-rotate{0%,34%{-webkit-transform:translate(0px,0px) rotate(0deg)}
2%{-webkit-transform:translate(0px,0px) rotate(4.5deg)}
4%{-webkit-transform:translate(0px,0px) rotate(-5.5deg)}
6%{-webkit-transform:translate(0px,0px) rotate(3.5deg)}
8%{-webkit-transform:translate(0px,0px) rotate(-5.5deg)}
10%{-webkit-transform:translate(0px,0px) rotate(2.5deg)}
12%{-webkit-transform:translate(0px,0px) rotate(-0.5deg)}
14%{-webkit-transform:translate(0px,0px) rotate(-3.5deg)}
16%{-webkit-transform:translate(0px,0px) rotate(4.5deg)}
18%{-webkit-transform:translate(0px,0px) rotate(-2.5deg)}
20%{-webkit-transform:translate(0px,0px) rotate(-5.5deg)}
22%{-webkit-transform:translate(0px,0px) rotate(-2.5deg)}
24%{-webkit-transform:translate(0px,0px) rotate(4.5deg)}
26%{-webkit-transform:translate(0px,0px) rotate(-4.5deg)}
28%{-webkit-transform:translate(0px,0px) rotate(2.5deg)}
30%{-webkit-transform:translate(0px,0px) rotate(-7.5deg)}
32%{-webkit-transform:translate(0px,0px) rotate(-5.5deg)}
}
@-webkit-keyframes fadeIn1{0%{opacity:1;-webkit-transform:translateY(-100px)}
100%{opacity:0;-webkit-transform:translateY(0)}
}
@keyframes fadeIn1{0%{opacity:1;-webkit-transform:translateY(-100px)}
100%{opacity:0;-webkit-transform:translateY(0)}
}
/*# sourceMappingURL=index.css.map */
分享到QQ
分享到微博
微信扫一扫
