h5-cli
Version:
hello
196 lines (176 loc) • 7.02 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="format-detection" content="telephone=no" />
<meta name="spm-id" content="100.1551"/>
<link rel="dns-prefetch" href="//s.yuantutech.com" />
<link rel="dns-prefetch" href="//api.yuantutech.com" />
<title>图片查看</title>
<link rel="stylesheet" type="text/css" href="//daily.yuantutech.com/yuantu/h5-cli/1.12.0/component/frozen.css">
<link rel="stylesheet" type="text/css" href="//daily.yuantutech.com/yuantu/h5-cli/1.12.0/pages/reg-type.css">
</head>
<body>
<style type="text/css">
.photo-view{
position:fixed;
background-color:rgba(0,0,0,0.9);
height:100%;
width:100%;
}
.photo-item{
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background-image:url(//image.yuantutech.com/user/040628edeb5bf5aad2333fb3e21d0d06-750-750.jpg);
background-size:100% auto;
background-position: center center;
background-repeat:no-repeat;
}
</style>
<div class="photo-view">
<div style="height:100%;" id="abc">
<div class="photo-item"></div>
<div class="photo-item"></div>
<div class="photo-item" style="transform:translateX(100%)"></div>
</div>
</div>
<script charset="utf-8" src="//daily.yuantutech.com/yuantu/h5-cli/1.12.0/??libs/zepto.js,libs/sea.js,libs/seajs-combo.js,config.js,libs/windvane.js,libs/punycode.js,libs/querystring.js,libs/vTemplate.js,component/VModule.js,component/PageModule.js,libs/md5.js,libs/io.js,libs/url.js,libs/util.js,libs/juicer.js,libs/cache.js"></script>
<script async src="https://s.yuantutech.com/yuantu/spm/1.0.17/??spm.js,track.js,view.js"></script>
<script type="text/javascript">
define("Slider",function(require, exports, module){
var Hammer = require("libs/hammer");
function Slide( opt ){
// this.opt = opt;
this.element = opt.element;
this.itemWidth = opt.itemWidth;
this.itemCount = opt.itemCount;
this.loop = true;
this.currentIndex = 0;
this.init();
};
Slide.prototype = {
construcotr:Slide,
init:function(){
var self = this;
var hammertime = new Hammer(this.element, { direction: Hammer.DIRECTION_HORIZONTAL });
var startX = 0;
var itemWidth = this.itemWidth;
//阻止页面上下滚动
// document.body.addEventListener("touchmove", function(e){
// e.preventDefault();
// });
hammertime.on('panstart', function(ev) {
$(self.element).removeClass("animation");
// console.log(ev);
// startX = ev.
});
hammertime.on('panmove', function(ev) {
// console.log(ev);
// console.log(ev.deltaX);
//console.log(self.calculationTransfromX() + ev.deltaX * (1-Math.abs(ev.deltaX)/(itemWidth*3)) )
self.transform( self.calculationTransfromX() + ev.deltaX * (1-Math.abs(ev.deltaX)/(itemWidth*3)) );
});
hammertime.on('panend', function(ev) {
// console.log(ev);
/**
DIRECTION_NONE 1
DIRECTION_LEFT 2 ++
DIRECTION_RIGHT 4 --
DIRECTION_UP 8
DIRECTION_DOWN 16
DIRECTION_HORIZONTAL 6
DIRECTION_VERTICAL 24
DIRECTION_ALL 30
*/
$(self.element).addClass("animation");
var dir = ev.direction;
var deltaX = Math.abs( ev.deltaX );
var velocityX = Math.abs( ev.velocityX );
// console.log("next", deltaX, self.itemWidth/2 , velocityX, dir)
if( deltaX > self.itemWidth/3 || velocityX > 0.3){
// console.log(ev.deltaX)
if( ev.deltaX < 0){
// console.log("next", ev.deltaX, ev.velocityX)
self.switchToNext();
}
if( ev.deltaX > 0){
// console.log("prev", ev.deltaX, ev.velocityX)
self.switchToPrev();
}
}else{
self.switchToIndex( self.currentIndex )
}
self.autoSwitch();
});
// hammertime.get('panmove').set({ direction: Hammer.DIRECTION_HORIZONTAL });
},
transform:function( deltaX ){
// console.log( deltaX )
//this.element.style.WebkitTransform = "translate3d("+ deltaX +"px,0,0)";
this.element.style.WebkitTransform = "translate("+ deltaX +"px)";
this.clearAutoSwitch();
},
switchToPrev:function(){
var index = --this.currentIndex;
index = index >= 0 ? index : 0;
this.switchToIndex( index );
},
switchToNext:function(){
var index = ++this.currentIndex;
// console.log(index)
index = index < this.itemCount ? index : this.itemCount;
this.switchToIndex( index );
},
switchToIndex:function( index ){
this.currentIndex = index != undefined ? index : this.currentIndex;
this.transform( this.calculationTransfromX() );
this.onChange( this.currentIndex );
},
calculationTransfromX:function( ){
return -this.itemWidth * this.currentIndex;
},
clearAutoSwitch:function(){
this.interval && clearInterval( this.interval )
},
autoSwitch:function(){
var self = this;
this.clearAutoSwitch();
this.interval = setInterval(function(){
if( self.currentIndex < self.itemCount ){
self.switchToNext();
}else{
self.switchToIndex(0);
}
}, 5000);
},
onChange:function(index){
}
}
module.exports = Slide;
})
seajs.use("Slider", function(Slide, b){
var s = new Slide({
element:document.querySelector('#abc'),
itemWidth:window.innerWidth,
itemCount:3
});
})
</script>
<script type="text/javascript">
var currentPhoto = "//image.yuantutech.com/user/040628edeb5bf5aad2333fb3e21d0d06-750-750.jpg";
var photoList = [
"//image.yuantutech.com/user/040628edeb5bf5aad2333fb3e21d0d06-750-750.jpg",
"//image.yuantutech.com/user/2fac4d6ee00dd5a8850502ccc9077839-638-478.jpg",
"//image.yuantutech.com/user/0940b40e0e12268986c62d6e6e7582d9-401-268.png"
]
// PhotoSlideView(,[])
</script>
</body>
</html>