javascript 支持触屏的全屏预览图片的效果
2012-10-26 09:40
323 查看
<!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" />
<title>JavaScript封装的平滑图片滚动</title>
<style type="text/css">
body
{
font-size: 24px;
margin: 0 0 0 0;
color: #333;
}
#picBox
{
height: 400px;
margin: 0px 0px 0px 0px;
overflow: hidden;
position: relative;
}
#picBox ul#show_pic
{
margin: 0 0 0 0;
padding: 0 0 0 0;
list-style: none;
height: 400px;
width: 30500px;
position: absolute;
}
#picBox ul#show_pic li
{
float: left;
margin: 0 0 0 0;
height: 400px;
}
#picBox ul#show_pic li img
{
display: block;
margin: 0 0 0 0;
}
#icon_num
{
margin: -40px 0px 0px 0px;
overflow: hidden;
position: relative;
background-color: Gray;
float: right;
text-align: center;
width:100%;
z-index: 100;
filter: alpha(opacity=60); /*IE*/
-moz-opacity: 0.6; /*MOZ , FF*/
opacity: 0.6; /*CSS3, FF1.5*/
}
#icon_num li
{
float: right;
width: 20px;
height: 40px;
list-style: none;
list-style-type: disc;
position: relative;
color: Orange;
cursor: pointer;
font-size: 36px;
z-index: 100;
filter: alpha(opacity=60); /*IE*/
-moz-opacity: 0.6; /*MOZ , FF*/
opacity: 0.6; /*CSS3, FF1.5*/
}
#icon_num li:hover, #icon_num li.active
{
color:Green;
}
</style>
</head>
<body>
<div id="picBox">
<ul id="show_pic" style="left: 0;">
<li><a href="#">
<img id="img1" src="images/full/20127191007710.jpg" alt="Image 001" width="100%" /></a></li>
<li><a href="#">
<img id="img2" src="images/full/20127191007712.jpg" alt="Image 002" width="100%" /></a></li>
<li><a href="#">
<img id="img3" src="images/full/20127191007715.jpg" alt="Image 003" width="100%" /></a></li>
<li><a href="#">
<img id="img4" src="images/full/20127251048730.jpg" alt="Image 004" width="100%" /></a></li>
<!-- <li><a href="images/full/005.jpg">
<img id="img5" src="images/full/005.jpg" alt="Image 005" width="100%" /></a></li>-->
</ul>
</div>
<div style="text-align: center">
<ul id="icon_num">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="slowmvdiv">
</div>
<script type="text/javascript">
var index = 0;
var count = 4;
function touch(obj, func) {
if (arguments.length > 2) this.leftRightOnly = arguments[2];
else this.leftRightOnly = false;
this.swipe_function[obj.id] = func;
this.id = obj.id;
obj.data = this;
this.bind(obj, 'touchstart', function (e) { this.data.touchstart(e); });
this.bind(obj, 'touchend', function (e) { this.data.touchend(e); });
this.bind(obj, 'touchmove', function (e) { this.data.touchmove(e); });
}
touch.prototype.tch_start = {};
touch.prototype.tch_mv = {};
touch.prototype.swipe_function = {};
touch.prototype.bind = function (obj, evt, fun) {
if (typeof obj.attachEvent != 'undefined') {
obj.attachEvent('on' + evt, fun);
} else {
obj.addEventListener(evt, fun, true);
}
}
touch.prototype.touchstart = function (evt) {
try {
var tch = evt['touches'][0];
this.tch_start[tch.target.id] = [tch.clientX, tch.clientY, tch.clientX];
evt.preventDefault();
} catch (e) {
alert('this.tch_start=' + this.tch_start + '<br />' + e);
}
}
touch.prototype.touchend = function (evt) {
try {
if (typeof (evt.changedTouches) == 'undefined' || evt.changedTouches.length < 1) return;
var id = evt.changedTouches[0].target.id;
var pid = evt.currentTarget.id;
var now = this.tch_mv[id];
var start = this.tch_start[id];
var xdiff = now[0] - start[0];
var ydiff = now[1] - start[1];
var f = this.swipe_function[pid];
evt.preventDefault();
if (Math.abs(xdiff) > Math.abs(ydiff)) {
if (xdiff < 0) {
this.swipe(pid, 'left', xdiff, f);
return;
}
if (xdiff > 0) {
this.swipe(pid, 'right', xdiff, f);
return;
}
} else {
if (ydiff < 0) {
this.swipe(pid, 'up', ydiff, f);
return;
}
if (ydiff > 0) {
this.swipe(pid, 'down', ydiff, f);
return;
}
}
} catch (e) {
alert('touchend error=' + e)
}
}
touch.prototype.touchmove = function (evt) {
try {
var tch = evt['touches'][0];
var now = [tch.clientX, tch.clientY];
var id = tch.target.id;
this.tch_mv[id] = now;
if (this.leftRightOnly) {
var start = this.tch_start[id];
var xdiff = start[2] - now[0];
var obj = g(this.id);
if (obj.scrollLeft < document.body.clientWidth * (count - 1) + 1 && xdiff < 0) {//最后一张图片了,再向左移动则不动
obj.scrollLeft += xdiff;
}
start[2] = now[0];
}
evt.preventDefault();
} catch (e) {
alert('touchmove error=' + e)
}
}
touch.prototype.swipe = function (pid, dir, xydiff, func) {
if (typeof (swiping) == 'undefined') swiping = false;
if (swiping) return;
swiping = true;
try {
var obj = g(pid);
var moveDis = obj.style.width ? parseInt(obj.style.width, 10) : document.body.clientWidth;
if (this.leftRightOnly) {
var cur_scrollleft = obj.scrollLeft;
var moved = cur_scrollleft % moveDis;
if (dir == 'right' && index > 0) {
index = index - 1;
if (index > -1 && index < count) {
document.getElementById("icon_num").getElementsByTagName('li')[index].className = "active";
document.getElementById("icon_num").getElementsByTagName('li')[index + 1].className = "";
}
moveDis = moved;
}
else if (dir == 'left' && index < count - 1) {
index = index + 1;
if (index < count && obj.scrollLeft < document.body.clientWidth * (count - 1)) {
document.getElementById("icon_num").getElementsByTagName('li')[index - 1].className = "";
document.getElementById("icon_num").getElementsByTagName('li')[index].className = "active";
}
moveDis -= moved;
}
else {
if (moved > moveDis / 2) {
var factor = 1;
moveDis = moveDis - moved;
} else {
var factor = -1;
moveDis = moved;
}
}
//g('dbg').innerHTML = 'pid=' + pid + ',dir=' + dir + +',xydiff' + xydiff + ',cur_scrollleft=' + cur_scrollleft + ',moveDis=' + moveDis + '<br/>' + g('dbg').innerHTML;
}
if (dir == 'left')
func(pid, moveDis, 1);
else if (dir == 'right')
func(pid, moveDis, -1);
else {
swiping = false;
xydiff = Math.abs(xydiff) * 2;
if (dir == 'up')
var scrollMoveValue = xydiff;
else
var scrollMoveValue = xydiff * -1;
document.body.scrollTop = document.body.scrollTop + scrollMoveValue;
if (this.leftRightOnly) {
func(pid, moveDis, factor);
}
}
} catch (e) {
alert(e)
}
}
function g(id) {
return document.getElementById(id);
}
var swiping = false;
var step = 16;
function slowmv(pid, v, v1) {
try {
var moved = arguments.length == 4 ? arguments[3] : 0;
if (moved + step > v)
var _step = v - moved;
else
var _step = step;
moved += _step;
var obj = g(pid);
var display_width = obj.style.width ? parseInt(obj.style.width, 10) : 0;
var new_left = obj.scrollLeft + _step * v1;
//g('slowmvdiv').innerHTML = 'scrollLeft=' + obj.scrollLeft + 'v=' + v + ',v1=' + v1 + ',moved=' + moved + ',step=' + step + ',display_width=' + display_width + ',new_left=' + new_left + ',obj.scrollWidth=' + obj.scrollWidth + '<br/>' + g('slowmvdiv').innerHTML;
if ((v1 > 0 && new_left + display_width >= obj.scrollWidth) || (v1 < 0 && new_left <= 0)) new_left = new_left <= 0 ? 0 : (obj.scrollWidth - display_width);
if (new_left > document.body.clientWidth * (count - 1)) { new_left = new_left - _step * v1; return; }
obj.scrollLeft = new_left;
if (moved < v) {
if (new_left >= obj.scrollWidth - display_width || new_left <= 0) {
swiping = false;
return;
}
setTimeout(function () { slowmv(pid, v, v1, moved); }, 2);
} else swiping = false;
} catch (e) {
alert('slowmv error=' + e + ',pid=' + pid + ',v=' + v + ',v1=' + v1);
}
}
/**
*glide.layerGlide((oEventCont,oSlider,sSingleSize,sec,fSpeed,point);
*@param auto type:bolean 是否自动滑动 当值是true的时候 为自动滑动
*@param oEventCont type:object 包含事件点击对象的容器
*@param oSlider type:object 滑动对象
*@param sSingleSize type:number 滑动对象里单个元素的尺寸（width或者height） 尺寸是有point 决定
*@param second type:number 自动滑动的延迟时间 单位/秒
*@param fSpeed type:float 速率 取值在0.05--1之间 当取值是1时 没有滑动效果
*@param point type:string left or top
*/
var glide = new function () {
function $id(id) { return document.getElementById(id); };
this.layerGlide = function (auto, oEventCont, oSlider, sSingleSize, second, fSpeed, point) {
var oSubLi = $id(oEventCont).getElementsByTagName('li');
var interval, timeout, oslideRange;
var time = 1;
var speed = fSpeed
var sum = oSubLi.length;
var a = 0;
var delay = second * 1000;
var setValLeft = function (s) {
return function () {
oslideRange = Math.abs(parseInt($id(oSlider).style[point]));
$id(oSlider).style[point] = -Math.floor(oslideRange + (parseInt(s * sSingleSize) - oslideRange) * speed) + 'px';
if (oslideRange == [(sSingleSize * s)]) {
clearInterval(interval);
a = s;
}
}
};
var setValRight = function (s) {
return function () {
oslideRange = Math.abs(parseInt($id(oSlider).style[point]));
$id(oSlider).style[point] = -Math.ceil(oslideRange + (parseInt(s * sSingleSize) - oslideRange) * speed) + 'px';
if (oslideRange == [(sSingleSize * s)]) {
clearInterval(interval);
a = s;
}
}
}
function autoGlide() {
for (var c = 0; c < sum; c++) { oSubLi[c].className = ''; };
clearTimeout(interval);
if (a == (parseInt(sum) - 1)) {
for (var c = 0; c < sum; c++) { oSubLi[c].className = ''; };
a = 0;
//oSubLi[a].className = "active";
interval = setInterval(setValLeft(a), time);
timeout = setTimeout(autoGlide, delay);
} else {
a++;
//oSubLi[a].className = "active";
interval = setInterval(setValRight(a), time);
timeout = setTimeout(autoGlide, delay);
}
}
if (auto) { timeout = setTimeout(autoGlide, delay); }
else { var t = new touch(g('picBox'), slowmv, true); }
for (var i = 0; i < sum; i++) {
oSubLi[i].onmouseover = (function (i) {
return function () {
for (var c = 0; c < sum; c++) { oSubLi[c].className = ''; };
clearTimeout(timeout);
clearInterval(interval);
//oSubLi[i].className = "active";
if (Math.abs(parseInt($id(oSlider).style[point])) > [(sSingleSize * i)]) {
interval = setInterval(setValLeft(i), time);
this.onmouseout = function () { if (auto) { timeout = setTimeout(autoGlide, delay); }; };
} else if (Math.abs(parseInt($id(oSlider).style[point])) < [(sSingleSize * i)]) {
interval = setInterval(setValRight(i), time);
this.onmouseout = function () { if (auto) { timeout = setTimeout(autoGlide, delay); }; };
}
}
})(i)
}
}
}
glide.layerGlide(false, 'icon_num', 'show_pic', document.body.clientWidth, 1, 0.05, 'left');
</script>
<script language="javascript" type="text/javascript">
document.getElementById("picBox").width = document.body.clientWidth;
document.getElementById("img1").width = document.body.clientWidth;
document.getElementById("img2").width = document.body.clientWidth;
document.getElementById("img3").width = document.body.clientWidth;
document.getElementById("img4").width = document.body.clientWidth;
document.getElementById("icon_num").width = document.body.clientWidth;
document.getElementsByTagName("li").width = document.body.clientWidth / count;
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android 手势检测实战 打造支持缩放平移的图片预览效果（上）
- Android 手势检测实战 打造支持缩放平移的图片预览效果（上）
- 手动实现图片预览-放大缩小全屏支持IE9以上
- Android 手势检测实战 打造支持缩放平移的图片预览效果（下）
- JavaScript 图片上传预览效果
- JavaScript使用FileReader实现图片上传预览效果
- Android 手势检测实战 打造支持缩放平移的图片预览效果（上）
- javascript和HTML5上传图片之前实现预览效果
- javascript上传预览图片（IE8支持）
- JavaScript + CSS 实现图片放大预览效果
- JavaScript 图片预览效果——转载
- JavaScript 图片上传预览效果
- JavaScript 图片预览效果
- Android 手势检测实战 打造支持缩放平移的图片预览效果（上）
- Android 手势检测实战 打造支持缩放平移的图片预览效果（下）
- JavaScript 图片上传预览效果javascript
- JavaScript 图片上传预览效果
- javascript和HTML5上传图片之前实现预览效果
- Javascript/js兼容各个浏览器的本地图片上传即时预览效果
- Android 手势检测实战 打造支持缩放平移的图片预览效果（下）