您的位置:首页 > 移动开发 > 微信开发

模仿微信朋友圈 仿微信js-sdk wx.previewImage javascript实现,支持图片预览,滑动切换,双指缩放,图片缓存 h5 html5 js

2016-01-27 16:12 1326 查看

该组件已被弃用 如有需求请选择最新组件

最新组件previewImage-mobile-地址

新组件-仿微信js-sdk wx.previewImage JavaScript实现,支持图片预览,滑动切换,双指缩放,图片缓存;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<style>
    html,body,.cover{margin:0;height:100%;width: 100%;}
    img{height:100px;width:100px;position:relative;display:block;margin:0 auto;}
    .cover{background-color:rgba(0, 0, 0, 1);position:fixed;top: 0;left:0;display:none;}
    .bg-animation{animation: bg 0.4s;-webkit-animation: bg 0.4s;display:block !important;}
@keyframes bg
    {
    from {background: rgba(0, 0, 0, 0);}
    to {background: rgba(0, 0, 0, 1);}
    }
@-webkit-keyframes bg /* Safari 和 Chrome */
    {
    from {background: rgba(0, 0, 0, 0);}
    to {background: rgba(0, 0, 0, 1);}
    }
</style>
<body>
    <img src="img/pb1.jpg" alt="" class='img'>
    <img src="img/pb2.jpg" alt="" class='img'>
    <img src="img/pb3.jpg" alt="" class='img'>
    <img src="img/db4.jpg" alt="" class='img'>
    <div class="cover"></div>
</body>
<script src="preview.js"></script>
<script>
    preView.init('.img','.cover');
</script>
</html>
preview.js
(function(doc,win){
var preview = function(){
this.win_w=doc.body.offsetWidth; //屏幕宽度
this.win_h=doc.documentElement.clientHeight; //屏幕高度
this.index=1;
}
preview.prototype.init = function(selector,c_selector){
this.el=$$(selector);
var pre=this;
function large(){
var trans="0.4s cubic-bezier(0.42, 0, 0.61, 0.75)";
this.style.webkitTransition=trans;
if(this.className.indexOf('iamlarge')==-1){
this.className+=' iamlarge';
var scroll_top=doc.body.scrollTop; //滚动条上卷高度
this.style.transition=trans;
(function(){
var scale= pre.win_w>650?650/this.width:pre.win_w/this.width;
var imgeh=this.height*scale;
var move_y=((pre.win_h-this.height)/2-this.offsetTop+scroll_top)/scale;
var move_x=((pre.win_w-this.width)/2-this.offsetLeft)/scale;
var tran="scale("+scale+","+scale+") translate3d("+move_x+"px,"+move_y+"px,0)";
$$(c_selector)[0].className+=" bg-animation";
this.style.zIndex=pre.index;
this.style.transform=tran;
this.style.webkitTransform=tran;
pre.index++;
}.call(this))
}else{
this.className=this.className.replace(' iamlarge','');
var tran="scale(1,1) translate3d(0,0,0)";
this.style.transform=tran;
this.style.webkitTransform=tran;



demo下载地址
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息