前端开发者前端开发we文档|网站前端开发的模板|前端开发 浏览器缓存
1、初始自动360度展示，点击后会手动拖拽查看。
2、图片有点多，可能加载有点慢。
3、这里只用了36张图，本地测过120张图，特别流畅。不过图片太多传网上不方便，就只传了36张。html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>360度旋转图</title>
<style type=”text/css”>
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
position: relative;
width: 600px;
height: 400px;
top: 50%;
left: 50%;
margin: -200px 0 0 -300px;
}
.box img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class=”box” id=”box”>
<img id=”img” src=”http://sandbox.runjs.cn/uploads/rs/269/ikifpcmz/CapturesP0.png” />
</div>
</body>
<script type=”text/javascript”>
$(document).ready(function () {
var auto = setInterval(function () {
$(“#img”).attr(“src”, imgSrc + “/CapturesP” + imgNum + “.png”);
imgNum–;
if (imgNum > maxImg) { imgNum = minImg; }
if (imgNum < minImg) { imgNum = maxImg; }
}, 500);
$(“#box”).click(function () {
clearInterval(auto);
});
var mouseOrignX = 0,
mouseOrignY = 0;//鼠标初始的坐标值
var mouseX = 0,
mouseY = 0;//鼠标当前坐标
var maxImg = 35;//最大图片序号
var minImg = 0;//最小图片序号
var sign = false;
var step = 7;//鼠标灵敏度
var imgSrc = “http://sandbox.runjs.cn/uploads/rs/269/ikifpcmz”;
var imgNum = minImg;//当前图片序号
$(“#img”).attr(“src”, imgSrc + “/CapturesP” + imgNum + “.png”);
$(document).bind(‘touchstart mousedown’, function (e) {
sign = true;
var touch;
if (event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
mouseOrignY = touch.pageY;
mouseOrignX = touch.pageX;
});
$(document).bind(‘touchmove mousemove’, function (e) {
if (sign) {
window.event.preventDefault(); //阻止页面的滑动默认事件
var touch;
if (event.touches) {
touch = event.touches[0];
} else {
touch = event;
}
mouseX = touch.clientX;
mouseY = touch.clientY;
if ((mouseX – mouseOrignX) < 0 && (mouseX – mouseOrignX) % step == 0 && imgNum <= maxImg) {
imgNum–;
} else if ((mouseX – mouseOrignX) > 0 && (mouseX – mouseOrignX) % step == 0 && imgNum <= maxImg) {
imgNum++;
}
if (imgNum > maxImg) { imgNum = minImg; }
if (imgNum < minImg) { imgNum = maxImg; }
$(“#img”).attr(“src”, imgSrc + “/CapturesP” + imgNum + “.png”);
return false;
}
});
$(document).bind(‘touchend mouseup’, function () {
sign = false;
});
});
</script>
</html>
标准前端开发规范文档|前端开发实例 百度api|网游游戏开发前端
» 本文来自：前端开发者 » 《前端开发效果_立体物品预览》
» 本文链接地址：https://www.rokub.com/5120.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册