广告式图片浏览在手机上也能实现触摸滑动效果
2014-08-22 09:22
615 查看
注：项目一共三个文本（test.html,touchImgDrag.css,touchImgDrag.js）和一个images文件夹在同一目录下面。
1.test.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<link href="touchImgDrag.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/touchImgDrag.js"></script>
<title>微信认证流程</title>
<script>
function OnPageLoad(){
tidOnLoad();
}
</script>
</head>
<body>
<div id="ImgDragContainer" >
<div id="iTouchImgDrag">
<ul id="iTIDbody">
<li style="background:url('images/0.jpg');" ></li>
<li style="background:url('images/1.jpg');" ></li>
<li style="background:url('images/2.jpg');" ></li>
<li style="background:url('images/3.jpg');" ></li>
<li style="background:url('images/4.jpg');" ></li>
<li style="background:url('images/5.jpg');" ></li>
<li style="background:url('images/6.jpg');" ></li>
<li style="background:url('images/7.jpg');" ></li>
<li style="background:url('images/8.jpg');" ></li>
</ul>
<ul id="iTIDnav">
<li onclick="tidStartRPAniPage(0)">●</li>
<li onclick="tidStartRPAniPage(1)">●</li>
<li onclick="tidStartRPAniPage(2)">●</li>
<li onclick="tidStartRPAniPage(3)">●</li>
<li onclick="tidStartRPAniPage(4)">●</li>
<li onclick="tidStartRPAniPage(5)">●</li>
<li onclick="tidStartRPAniPage(6)">●</li>
<li onclick="tidStartRPAniPage(7)">●</li>
<li onclick="tidStartRPAniPage(8)">●</li>
</ul>
</div>
</div>
<script>OnPageLoad();</script>
</body>
</html>
2.touchImgDrag.css
html,body{
margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 */
padding: 0;
text-align: center; /* 在 IE 5* 浏览器中，这会将容器居中。文本随后将在 #container 选择器中设置为默认左对齐 */
height: 100%; /*这里将高度设置为100%是这个布局实现自适应高度的关键，只有这里设置了高度，下面div的高度设置才起作用*/
}
#iTouchImgDrag {
width: 100%;
height: 100%;
background: #000;
padding: 0px;
margin: 0px;
overflow:hidden;
}
#iTIDbody {
left: 0px;
position: relative;
padding:0px;
margin: 0px auto 0px;
overflow:hidden;
}
#iTIDbody li {
float: left;
list-style-type: none;
overflow:hidden;
}
#iTIDnav {
position: relative;
left: 36px;
top: -100px;
padding: 10px 10px;
}
#iTIDnav li{
text-align: center;
font-size: 48px;
color: gray;
list-style-type: none;
float: left;
}
#ImgDragContainer{
left:-1px; /* 解决白边问题 */
top:-1px;
width:101%;
height:101%;
text-align:center;
color:red;
background:#000;
position:absolute;
padding: 0px;
margin: auto;
}
3.touchImgDrag.js
var tidPageWidth; //页宽
var tidPageHeight; //页高
var tidPageTotalWidth; //整幅宽
var tidPageCount;
var tidTimer = null; //用于复位动画的Timer
var tidOpObj = null;
var tidPosition = null;
var tidCurPage = 0;
var tidTouchIsDown = false;
function tidOnLoad()
{
var touchSupport = false;
try {
document.createEvent("TouchEvent");
touchSupport = true;
//alert("支持TouchEvent事件！");
}
catch (e) {
//alert("不支持TouchEvent事件！" + e.message);
}
var referObj = document.getElementById('iTouchImgDrag');
var vWidth = referObj.offsetWidth ;
var vHeight = referObj.offsetHeight;
tidPageWidth = vWidth;
tidPageHeight = vHeight;
referObj.style.width = vWidth+"px";
referObj.style.height = vHeight+"px";
//alert("offsetWidth"+referObj.offsetWidth +"offsetHeight"+referObj.offsetHeight+"clientWidth"+referObj.clientWidth+"clientHeight"+referObj.clientHeight);
referObj = document.getElementById('iTIDbody').getElementsByTagName('li');
var vCount = referObj.length;
tidPageCount = vCount;
//var vCount = referObj.getElementsByTagName('li').length;
//alert('vCount'+vCount);
for(var i=0;i<vCount;i++)
{
referObj[i].style.width = vWidth+"px";
referObj[i].style.height = vHeight+"px";
//不知道为什么下面两个属性放css不行，只能javascript和html里写
referObj[i].style.backgroundRepeat = "no-repeat";
referObj[i].style.backgroundPosition = "center";
}
tidPageTotalWidth = vWidth * vCount;
tidOpObj = document.getElementById('iTIDbody');
tidOpObj.style.width = tidPageTotalWidth+"px";
tidOpObj.style.height = vHeight+"px";
//alert('vUIWidth'+vUlWidth);
//var vHeight = document.getElementById('iTouchImgDrag').style.height;
//tidOpObj.style.left = "-100px";
tidPosition = new Object();
tidPosition.ObjX = 0; //必须初始化，否则一开始就点园点会出错
if(touchSupport){
document.addEventListener('touchstart', tidStartDragT, true);
document.addEventListener("touchend", tidStopDragT, true);
document.addEventListener("touchmove", tidDragMoveT, true);
}
else{
tidOpObj.onmousedown = function (event)
{
tidStartDragM(window.event || event);
};
}
referObj = document.getElementById('iTIDnav').getElementsByTagName('li');
for(var i=0;i<vCount;i++)
{
if(i==tidCurPage){
referObj[i].style.color = "green";
}
}
}
/*----------------------------------*/
function tidStartDragT(touch)
{
tidTouchIsDown = true;
tidStartDrag(touch.touches[0].pageX);
}
function tidStartDragM(ev)
{
if(!ev) ev = window.event;
tidStartDrag(ev.clientX);
//增加消息持续捕捉
if(tidOpObj.setCapture)
{
tidOpObj.setCapture();
tidOpObj.onmouseup=tidStopDragM;
tidOpObj.onmousemove=tidDragMoveM;
}
else
{
document.addEventListener("mouseup", tidStopDragM, true);
document.addEventListener("mousemove", tidDragMoveM, true);
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
}
function tidStartDrag(clientX)
{
var str = tidOpObj.style.left;
var idx = str.indexOf('px');
if(idx>0){
str = str.substring(0,idx);
}
else str="0";
tidPosition.ObjX = parseInt(str);
tidPosition.MouseX = clientX;
if(tidTimer)
{
clearInterval(tidTimer);
}
}
/*----------------------------------*/
function tidDragMoveM(ev)
{
if(!ev) ev = window.event;
tidDragMove(ev.clientX);
}
function tidDragMoveT(touch)
{
if(tidTouchIsDown){
touch.preventDefault();
tidDragMove(touch.touches[0].pageX);
}
}
function tidDragMove(clientX)
{
var mx = clientX;
var str = (tidPosition.ObjX + (mx - tidPosition.MouseX))+"px";
tidOpObj.style.left = (tidPosition.ObjX + (mx - tidPosition.MouseX))+"px";
}
/*----------------------------------*/
function tidStopDragT(touch)
{
tidTouchIsDown = false;
tidStopDrag(touch.changedTouches[0].pageX);
}
function tidStopDragM(ev)
{
if(!ev) ev = window.event;
if(tidOpObj.releaseCapture)
{
tidOpObj.releaseCapture();
tidOpObj.onmouseup=null;
tidOpObj.onmousemove=null;
}
else
{
document.removeEventListener("mouseup", tidStopDragM, true);
document.removeEventListener("mousemove", tidDragMoveM, true);
window.releaseEvents(Event.MOUSE_MOVE | Event.MOUSE_UP);
}
tidStopDrag(ev.clientX);
}
function tidStopDrag(clientX)
{
var str = tidOpObj.style.left;
var idx = str.indexOf('px');
if(idx>0){
str = str.substring(0,idx);
}
else str="0";
tidPosition.ObjX = parseInt(str);
var tar = Math.floor(tidPosition.ObjX/tidPageWidth);
var delta = clientX - tidPosition.MouseX;
var absDelta = Math.abs(delta);
if ( absDelta>(tidPageWidth/4) ){
if(delta>0)tar+=1;
}
else{
if(delta<0)tar+=1;
}
if(tar>0)tar=0;
if(tar<=-tidPageCount)tar=-tidPageCount+1;
tar*=tidPageWidth;
//开始复位动画
tidStartRPAni(tar)
}
function tidStartRPAniPage(page)
{
tidStartRPAni(-page*tidPageWidth);
}
function tidStartRPAni(tar) //RP=Reset Position
{
var referObj = document.getElementById('iTIDnav').getElementsByTagName('li');
if(tidCurPage<referObj.length && tidCurPage>=0 && referObj[tidCurPage]){
referObj[tidCurPage].style.color="gray";
}
tidCurPage = -tar/tidPageWidth;
if(tidCurPage<referObj.length && tidCurPage>=0 && referObj[tidCurPage]){
referObj[tidCurPage].style.color="green";
}
if(tidTimer)
{
clearInterval(tidTimer);
}
tidTimer=setInterval("tidDoRPAni("+tar+")", 30);
}
function tidDoRPAni(tar)
{
var cur = tidPosition.ObjX;
var iSpeed = (tar-cur)/3;
iSpeed *= 0.7;
cur += iSpeed;
if(Math.abs(tar-cur)<1 && Math.abs(iSpeed)<1)
{
clearInterval(tidTimer);
tidTimer = null;
cur = tar;
}
tidPosition.ObjX = cur;
tidOpObj.style.left = cur+"px";
}
function tidStopRPAni()
{
if(tidTimer)
{
clearInterval(tidTimer);
}
}
1.test.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<link href="touchImgDrag.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/touchImgDrag.js"></script>
<title>微信认证流程</title>
<script>
function OnPageLoad(){
tidOnLoad();
}
</script>
</head>
<body>
<div id="ImgDragContainer" >
<div id="iTouchImgDrag">
<ul id="iTIDbody">
<li style="background:url('images/0.jpg');" ></li>
<li style="background:url('images/1.jpg');" ></li>
<li style="background:url('images/2.jpg');" ></li>
<li style="background:url('images/3.jpg');" ></li>
<li style="background:url('images/4.jpg');" ></li>
<li style="background:url('images/5.jpg');" ></li>
<li style="background:url('images/6.jpg');" ></li>
<li style="background:url('images/7.jpg');" ></li>
<li style="background:url('images/8.jpg');" ></li>
</ul>
<ul id="iTIDnav">
<li onclick="tidStartRPAniPage(0)">●</li>
<li onclick="tidStartRPAniPage(1)">●</li>
<li onclick="tidStartRPAniPage(2)">●</li>
<li onclick="tidStartRPAniPage(3)">●</li>
<li onclick="tidStartRPAniPage(4)">●</li>
<li onclick="tidStartRPAniPage(5)">●</li>
<li onclick="tidStartRPAniPage(6)">●</li>
<li onclick="tidStartRPAniPage(7)">●</li>
<li onclick="tidStartRPAniPage(8)">●</li>
</ul>
</div>
</div>
<script>OnPageLoad();</script>
</body>
</html>
2.touchImgDrag.css
html,body{
margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 */
padding: 0;
text-align: center; /* 在 IE 5* 浏览器中，这会将容器居中。文本随后将在 #container 选择器中设置为默认左对齐 */
height: 100%; /*这里将高度设置为100%是这个布局实现自适应高度的关键，只有这里设置了高度，下面div的高度设置才起作用*/
}
#iTouchImgDrag {
width: 100%;
height: 100%;
background: #000;
padding: 0px;
margin: 0px;
overflow:hidden;
}
#iTIDbody {
left: 0px;
position: relative;
padding:0px;
margin: 0px auto 0px;
overflow:hidden;
}
#iTIDbody li {
float: left;
list-style-type: none;
overflow:hidden;
}
#iTIDnav {
position: relative;
left: 36px;
top: -100px;
padding: 10px 10px;
}
#iTIDnav li{
text-align: center;
font-size: 48px;
color: gray;
list-style-type: none;
float: left;
}
#ImgDragContainer{
left:-1px; /* 解决白边问题 */
top:-1px;
width:101%;
height:101%;
text-align:center;
color:red;
background:#000;
position:absolute;
padding: 0px;
margin: auto;
}
3.touchImgDrag.js
var tidPageWidth; //页宽
var tidPageHeight; //页高
var tidPageTotalWidth; //整幅宽
var tidPageCount;
var tidTimer = null; //用于复位动画的Timer
var tidOpObj = null;
var tidPosition = null;
var tidCurPage = 0;
var tidTouchIsDown = false;
function tidOnLoad()
{
var touchSupport = false;
try {
document.createEvent("TouchEvent");
touchSupport = true;
//alert("支持TouchEvent事件！");
}
catch (e) {
//alert("不支持TouchEvent事件！" + e.message);
}
var referObj = document.getElementById('iTouchImgDrag');
var vWidth = referObj.offsetWidth ;
var vHeight = referObj.offsetHeight;
tidPageWidth = vWidth;
tidPageHeight = vHeight;
referObj.style.width = vWidth+"px";
referObj.style.height = vHeight+"px";
//alert("offsetWidth"+referObj.offsetWidth +"offsetHeight"+referObj.offsetHeight+"clientWidth"+referObj.clientWidth+"clientHeight"+referObj.clientHeight);
referObj = document.getElementById('iTIDbody').getElementsByTagName('li');
var vCount = referObj.length;
tidPageCount = vCount;
//var vCount = referObj.getElementsByTagName('li').length;
//alert('vCount'+vCount);
for(var i=0;i<vCount;i++)
{
referObj[i].style.width = vWidth+"px";
referObj[i].style.height = vHeight+"px";
//不知道为什么下面两个属性放css不行，只能javascript和html里写
referObj[i].style.backgroundRepeat = "no-repeat";
referObj[i].style.backgroundPosition = "center";
}
tidPageTotalWidth = vWidth * vCount;
tidOpObj = document.getElementById('iTIDbody');
tidOpObj.style.width = tidPageTotalWidth+"px";
tidOpObj.style.height = vHeight+"px";
//alert('vUIWidth'+vUlWidth);
//var vHeight = document.getElementById('iTouchImgDrag').style.height;
//tidOpObj.style.left = "-100px";
tidPosition = new Object();
tidPosition.ObjX = 0; //必须初始化，否则一开始就点园点会出错
if(touchSupport){
document.addEventListener('touchstart', tidStartDragT, true);
document.addEventListener("touchend", tidStopDragT, true);
document.addEventListener("touchmove", tidDragMoveT, true);
}
else{
tidOpObj.onmousedown = function (event)
{
tidStartDragM(window.event || event);
};
}
referObj = document.getElementById('iTIDnav').getElementsByTagName('li');
for(var i=0;i<vCount;i++)
{
if(i==tidCurPage){
referObj[i].style.color = "green";
}
}
}
/*----------------------------------*/
function tidStartDragT(touch)
{
tidTouchIsDown = true;
tidStartDrag(touch.touches[0].pageX);
}
function tidStartDragM(ev)
{
if(!ev) ev = window.event;
tidStartDrag(ev.clientX);
//增加消息持续捕捉
if(tidOpObj.setCapture)
{
tidOpObj.setCapture();
tidOpObj.onmouseup=tidStopDragM;
tidOpObj.onmousemove=tidDragMoveM;
}
else
{
document.addEventListener("mouseup", tidStopDragM, true);
document.addEventListener("mousemove", tidDragMoveM, true);
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
}
function tidStartDrag(clientX)
{
var str = tidOpObj.style.left;
var idx = str.indexOf('px');
if(idx>0){
str = str.substring(0,idx);
}
else str="0";
tidPosition.ObjX = parseInt(str);
tidPosition.MouseX = clientX;
if(tidTimer)
{
clearInterval(tidTimer);
}
}
/*----------------------------------*/
function tidDragMoveM(ev)
{
if(!ev) ev = window.event;
tidDragMove(ev.clientX);
}
function tidDragMoveT(touch)
{
if(tidTouchIsDown){
touch.preventDefault();
tidDragMove(touch.touches[0].pageX);
}
}
function tidDragMove(clientX)
{
var mx = clientX;
var str = (tidPosition.ObjX + (mx - tidPosition.MouseX))+"px";
tidOpObj.style.left = (tidPosition.ObjX + (mx - tidPosition.MouseX))+"px";
}
/*----------------------------------*/
function tidStopDragT(touch)
{
tidTouchIsDown = false;
tidStopDrag(touch.changedTouches[0].pageX);
}
function tidStopDragM(ev)
{
if(!ev) ev = window.event;
if(tidOpObj.releaseCapture)
{
tidOpObj.releaseCapture();
tidOpObj.onmouseup=null;
tidOpObj.onmousemove=null;
}
else
{
document.removeEventListener("mouseup", tidStopDragM, true);
document.removeEventListener("mousemove", tidDragMoveM, true);
window.releaseEvents(Event.MOUSE_MOVE | Event.MOUSE_UP);
}
tidStopDrag(ev.clientX);
}
function tidStopDrag(clientX)
{
var str = tidOpObj.style.left;
var idx = str.indexOf('px');
if(idx>0){
str = str.substring(0,idx);
}
else str="0";
tidPosition.ObjX = parseInt(str);
var tar = Math.floor(tidPosition.ObjX/tidPageWidth);
var delta = clientX - tidPosition.MouseX;
var absDelta = Math.abs(delta);
if ( absDelta>(tidPageWidth/4) ){
if(delta>0)tar+=1;
}
else{
if(delta<0)tar+=1;
}
if(tar>0)tar=0;
if(tar<=-tidPageCount)tar=-tidPageCount+1;
tar*=tidPageWidth;
//开始复位动画
tidStartRPAni(tar)
}
function tidStartRPAniPage(page)
{
tidStartRPAni(-page*tidPageWidth);
}
function tidStartRPAni(tar) //RP=Reset Position
{
var referObj = document.getElementById('iTIDnav').getElementsByTagName('li');
if(tidCurPage<referObj.length && tidCurPage>=0 && referObj[tidCurPage]){
referObj[tidCurPage].style.color="gray";
}
tidCurPage = -tar/tidPageWidth;
if(tidCurPage<referObj.length && tidCurPage>=0 && referObj[tidCurPage]){
referObj[tidCurPage].style.color="green";
}
if(tidTimer)
{
clearInterval(tidTimer);
}
tidTimer=setInterval("tidDoRPAni("+tar+")", 30);
}
function tidDoRPAni(tar)
{
var cur = tidPosition.ObjX;
var iSpeed = (tar-cur)/3;
iSpeed *= 0.7;
cur += iSpeed;
if(Math.abs(tar-cur)<1 && Math.abs(iSpeed)<1)
{
clearInterval(tidTimer);
tidTimer = null;
cur = tar;
}
tidPosition.ObjX = cur;
tidOpObj.style.left = cur+"px";
}
function tidStopRPAni()
{
if(tidTimer)
{
clearInterval(tidTimer);
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果
- js实现支持手机滑动切换的轮播图片效果实例
- Androin学习笔记五十四： android 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果
- android 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果
- android 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果
- Swift - 使用CollectionView实现图片Gallery画廊效果（左右滑动浏览图片）
- Android点击WebView实现图片缩放及滑动浏览效果
- android 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果
- android 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果
- android开发之滑动效果实现图片浏览_ViewFilpper的使用
- Android实现手势滑动多点触摸放大缩小图片效果
- android 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果
- android 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果
- js实现支持手机滑动切换的轮播图片效果实例
- android 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果
- android 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果
- Android 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果
- 【javascript/css】Javascript+Css实现图片滑动浏览效果
- android 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果
- android 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果