html5触屏特效代码（html5效果）

admin 发布：2022-12-20 00:21 147

今天给各位分享html5触屏特效代码的知识，其中也会对html5效果进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

1、Html5支持iPhone触屏的脚本应该怎么写
2、HTML5动画特效怎么做
3、html5上下滑动“翻页”实现，是真正的翻页
4、html5 拖动效果怎么在手机上实现

Html5支持iPhone触屏的脚本应该怎么写

Html5支持iPhone触屏的脚本写法是利用touch事件方法。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明： touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 touchend事件：当手指从屏幕上离开的时候触发。 touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。示例代码如下：function load (){document.addEventListener('touchstart',touch, false);document.addEventListener('touchmove',touch, false);document.addEventListener('touchend',touch, false);function touch (event){var event = event window.event;var oInp = document.getElementById("inp");switch(event.type){case "touchstart":oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";break;case "touchend":oInp.innerHTML = "br/Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";break;case "touchmove":event.preventDefault();oInp.innerHTML = "br/Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";break;}} } window.addEventListener('load',load, false);

html5触屏特效代码（html5效果）

HTML5动画特效怎么做

主要思想：

首先要准备一张有连续帧的图片，然后利用HTML5 Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。

关键技术点：

JavaScript 函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，

另外一个参数代表间隔时间，单位为毫秒数。代码示例：

setTimeout( update, 1000/30);

Canvas的API-drawImage()方法，需要指定全部9个参数：

ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height);

其中offw, offh是指源图像的起始坐标点，width, height表示源图像的宽与高，x2,y2表

示源图像在目标Canvas上的起始坐标点。

!DOCTYPE html

html

head

meta http-equiv="X-UA-Compatible" content="chrome=IE8"

meta http-equiv="Content-type" content="text/html;charset=UTF-8"

titleCanvas Mouse Event Demo/title

link href="default.css" rel="stylesheet" /

script

var ctx = null; // global variable 2d context

var started = false;

var mText_canvas = null;

var x = 0, y =0;

var frame = 0; // 22 5*5 + 2

var imageReady = false;

var myImage = null;

var px = 300;

var py = 300;

var x2 = 300;

var y2 = 0;

window.onload = function() {

var canvas = document.getElementById("animation_canvas");

console.log(canvas.parentNode.clientWidth);

canvas.width = canvas.parentNode.clientWidth;

canvas.height = canvas.parentNode.clientHeight;

if (!canvas.getContext) {

console.log("Canvas not supported. Please install a HTML5 compatible browser.");

return;

}

// get 2D context of canvas and draw rectangel

ctx = canvas.getContext("2d");

ctx.fillStyle="black";

ctx.fillRect(0, 0, canvas.width, canvas.height);

myImage = document.createElement('img');

myImage.src = "../robin.png";

myImage.onload = loaded();

}

function loaded() {

imageReady = true;

setTimeout( update, 1000/30);

}

function redraw() {

ctx.clearRect(0, 0, 460, 460)

ctx.fillStyle="black";

ctx.fillRect(0, 0, 460, 460);

// find the index of frames in image

var height = myImage.naturalHeight/5;

var width = myImage.naturalWidth/5;

var row = Math.floor(frame / 5);

var col = frame - row * 5;

var offw = col * width;

var offh = row * height;

// first robin

px = px - 5;

py = py - 5;

if(px -50) {

px = 300;

}

if(py -50) {

py = 300;

}

//var rate = (frame+1) /22;

//var rw = Math.floor(rate * width);

//var rh = Math.floor(rate * height);

ctx.drawImage(myImage, offw, offh, width, height, px, py, width, height);

// second robin

x2 = x2 - 5;

y2 = y2 + 5;

if(x2 -50) {

x2 = 300;

y2 = 0;

}

ctx.drawImage(myImage, offw, offh, width, height, x2, y2, width, height);

}

function update() {

redraw();

frame++;

if (frame = 22) frame = 0;

setTimeout( update, 1000/30);

}

/script

/head

body

h1HTML Canvas Animations Demo - By Gloomy Fish/h1

prePlay Animations/pre

div id="my_painter"

canvas id="animation_canvas"/canvas

/div

/body

/html

html5上下滑动“翻页”实现，是真正的翻页

HTML5手机上下滑动翻页特效是一款手机移动端触屏滑动效果实现完整代码如下：

1、html5页面代码

!DOCTYPE html

htmlheadmeta http-equiv="Content-Type" content="text/html; charset=UTF-8"

titleHTML5手机页面触屏滑动上下翻页特效/title

meta charset="utf-8"

meta name="apple-touch-fullscreen" content="YES"

meta name="format-detection" content="telephone=no"

meta name="apple-mobile-web-app-capable" content="yes"

meta name="apple-mobile-web-app-status-bar-style" content="black"

meta http-equiv="Expires" content="-1"

meta http-equiv="pragram" content="no-cache"

link rel="stylesheet" type="text/css" href="./hamer_files/main.css"

link rel="stylesheet" type="text/css" href="./hamer_files/endpic.css"

script type="text/javascript" src="./hamer_files/offline.js"/script

meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi"

/head

body class="s-bg-ddd pc no-3d perspective yes-3d" style="-webkit-user-select: none;"

section class="u-alert"

img style="display:none;" src="./hamer_files/loading_large.gif"

div class="alert-loading z-move"

div class="cycleWrap" span class="cycle cycle-1"/span

span class="cycle cycle-2"/spanspan class="cycle cycle-3"/spanspan class="cycle cycle-4"/span

/div

div class="lineWrap" span class="line line-1"/spanspan class="line line-2"/spanspan class="line line-3"/span

/div

/section

section class="u-arrow"

p class="css_sprite01"/p

/section

section class="p-ct transformNode-2d transformNode-3d" style="height: 918px;"

div class="translate-back" style="height: 918px;"

div class="m-page m-fengye" data-page-type="info_pic3" data-statics="info_pic3" style="height: 918px;"

div class="page-con lazy-finish" data-position="50% 50%" data-size="cover" style="height: 920px; background-image: url(hamer_files/1.jpg); background-size: cover; background-position: 50% 50%;"/div

/div