<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <!--删除默认的苹果工具栏和菜单栏-->

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- 控制状态栏显示样式-->

    <link rel="stylesheet" href="css/swiper.min.css">

    <link rel="stylesheet" href="css/index.css">

    <script src="js/jquery-3.1.1.min.js"></script>

    <script src="js/html2canvas.js"></script>

</head>

<body>

<!-- 轮播开始 -->

<div class="wrap">

    <div class="swiper-container">

        <div class="swiper-wrapper">

            <div class="swiper-slide">

                <!-- 大图 -->

                <img src="img/1_01.jpg">

                <img src="img/1_02.jpg">

                <img src="img/1_03.jpg">

                <img src="img/1_04.jpg">

                <!-- 大图end -->

                <div class="code2Top">

                    <!-- 头像 -->

                    <img src="img/xiaotu.jpg" alt="头像"/>

                    <span>我是吴亦凡</span>

                </div>

                <div class="code2Bottom">

                    <!-- 二维码图片 -->

                    <img src="img/ewm.png" alt="" />

                </div>

            </div>

            <div class="swiper-slide code1">

                <!-- 大图 -->

                <img src="img/2_01.jpg">

                <img src="img/2_02.jpg">

                <img src="img/2_03.jpg">

                <img src="img/2_04.jpg">

                <!-- 大图end -->

                <div class="code1Bottom">

                    <!-- 二维码图片 app下载 -->

                    <img src="img/ewm.png" alt="" />

                </div>

            </div>

        </div>

        <div class="swiper-pagination"></div>

    </div>

    <!-- 轮播结束 -->

    <!-- 按钮开始 -->

    <div class="extendBtn">

        <a class="down" href="img/ewm.png" download="downImg">保存到手机</a>

    </div>

    <!-- 按钮结束 -->

</div>

<script src="js/swiper.min.js"></script>

<script type="text/javascript">    

    //画图

    var pic;

    var canvas2 = document.createElement("canvas");

    //let _canvas = document.querySelector('.test');//有些手机不兼容let

    var _canvas = document.querySelector('.swiper-slide');

    var w = parseInt(window.getComputedStyle(_canvas).width);

    var h = parseInt(window.getComputedStyle(_canvas).height);

    //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了

    canvas2.width = w * 2;

    canvas2.height = h * 2;

    canvas2.style.width = w + "px";

    canvas2.style.height = h + "px";

    //可以按照自己的需求，对context的参数修改,translate指的是偏移量

    var context = canvas2.getContext("2d");

    context.scale(2,2);

    //图片轮播

    var swiper = new Swiper('.swiper-container', {

        loop : true,

        pagination: '.swiper-pagination',

        effect: 'coverflow',

        grabCursor: true,

        centeredSlides: true,

        slidesPerView: 'auto',

        coverflow: {

            rotate: 0,

            stretch: 40,

            depth: 120,

            modifier: 2,

            slideShadows : true

        },

        onSlideChangeEnd:function(swiper){

            //截图

            html2canvas(document.querySelector('.swiper-slide-active'),{canvas:canvas2}).then(function(canvas) {

                pic=canvas;//画布

                //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载

                document.querySelector(".down").setAttribute('href',canvas.toDataURL());

            });

        }

    });

    //alert(swiper.realIndex)

    var $width = $(".swiper-slide.swiper-slide-active").width();

    var $scale = $(".swiper-slide.swiper-slide-active").width()/0.5625;

    $(".swiper-slide").height($scale);

</script>

</body>

</html>

手机端3d旋转木马效果+保存图片到本地的更多相关文章

  1. js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得，放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式

    js replace 全局替换   js 的replace 默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换. <scrip ...

  2. HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  3. HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相冊

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  4. jQuery仿3D旋转木马效果插件(带索引按钮)

    项目中需要用到旋转木马效果,但是我在网上找的插件,基本都是不带按钮或者只是带前后按钮的,而项目要求的是带索引按钮,也就是说有3张图片轮播,对应的要有3个小按钮,点击按钮,对应的图片位于中间位置.于是就 ...

  5. CSS3 实现3D旋转木马效果

    基本原理: 1.首先我们需要让图片能旋转的效果,我们让所有图片绝对定位(position:absolute),共用一个中心点. 2.对于舞台我们加一个视距,比如下面的demo是 perspective ...

  6. slideToggle+slideup实现手机端折叠菜单效果

    折叠菜单的效果,网上有很多的插件,比如bootstrap的 Collapse ,很好用也很简单,但是如果你使用的不是bootstrap框架,就会造成很多不必要的麻烦,比如默认样式被修改,代码冗余等等, ...

  7. html5 手机端 通讯录 touch 效果

    不说那么多直接上代码. <html> <head> <meta http-equiv="Content-Type" content="tex ...

  8. 一个实现 手机端“输入验证码 ”效果Demo

    之前在“掘金”上看到这样一个demo 我觉得很有意思,于是今天把它搬下来,记在自己的“小本本”里也许会对以后的项目有点用,若要自己去实现这样一个案例也能实现,但是可能没有那么“妙”. 想法: 1.使用 ...

  9. 3D旋转仿伪3D立体效果，手机端

    偶然在书上看到这段代码,感觉很舒服,直街附代码吧,原生JS.手机端旋转效果仿立体效果. 纯JS代码足够了. var img=document.createElement('img'); img.set ...

随机推荐

  1. 转载：Opencv调整运行窗口图片的大小

    本文来自:http://blog.csdn.net/cumtml/article/details/52807961 Opencv在运算时显示图片问题 总结在opencv中,图片显示的问题.简要解决图片 ...

  2. django 的model是如何把字段加入到meta中的

    def contribute_to_class(self, cls, name): self.set_attributes_from_name(name) self.model = cls cls._ ...

  3. 微信小程序 支付功能 服务器端（TP5.1）实现

    首先下载微信支付SDK ,将整个目录的文件放在 /application/extend/WxPay 目录下 在使用SDK之前我们需要对 WxPay.Config.php 进行配置 <?php n ...

  4. 30个php操作redis常用方法代码例子(转载)

    1.connect 描述:实例连接到一个Redis.参数:host: string,port: int返回值:BOOL 成功返回:TRUE;失败返回:FALSE示例: $redis = new red ...

  5. ArcGIS自定义脚本-通过txt/excel/dbf/table生成多边形要素类

    ArcGIS自定义脚本-通过txt/excel/dbf/table生成多边形要素类 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:读取文本文件,常见多边形要素 ...

  6. DJango 基础(6)

    Django模型基础 知识点: 数据库的配置 使用django中的模型 将模型映射到数据库 数据的增删改查基本操作 数据库的配置 1.在settings.py中配置DATABASES: DATABAS ...

  7. layui模板和jfinal混合使用注意

    <!-- 列表信息展示 --> <div class="layui-row"> <table class="layui-table" ...

  8. FortiGate上架前准备

    1.收集信息 1.网络拓扑信息(了解网络拓扑信息有助于网络方案的规划) 2.环境信息(了解部署位置.部署模式.最大吞吐.最大用户数有助于对设备性能的评估) 3.客户需求,对FortiGate部署的功能 ...

  9. swift static func 和 class func

    Swift中static func 相当于class final func.禁止这个方法被重写 clas func  可以被继承重写

  10. 微软Office Online服务安装部署（一）

    1.要使用office online功能,首先需要的是2台主机,并且主机的系统要求是windwos Server 我把他命名为Server和Client(两台服务器 用户必须为administrato ...