<!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. Spring4新特性

    参考 : https://jinnianshilongnian.iteye.com/blog/1990081

  2. Delphi TXLSReadWriteII导出Excel

    TXLSReadWriteII导出Excle (有点复杂,可以自己简化一下,直接从项目中抓取的) procedure TformSubReport.DataToExcel(_Item: Integer ...

  3. linux安装rabbitmq3.6.5

    一.准备依赖包 yum install build-essential openssl openssl-devel unixODBC unixODBC-devel make gcc gcc-c++ k ...

  4. 十一、Composite 组合模式

    原理: 代码清单 Entity public abstract class Entry { public abstract String getName(); public abstract int ...

  5. python--第十三天总结（html ，css 语法）

    概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...

  6. php curl请求回来的中文为乱码

    在浏览器访问回来的编码格式是正常的,但是从php curl 请求过来的确实乱码,之前也试过这个函数好像不行,今天吧最后一个参数换了,简单粗暴,可以了mb_convert_encoding($res, ...

  7. centos7 下安装pycharm

    CentOS 7环境下Pycharm安装流程记录: 1.准备安装文件: 方法1: 使用内置火狐浏览器访问下载最新格式为tar.gz的压缩包 网址:https://www.jetbrains.com/p ...

  8. c++11 线程池学习笔记 (一) 任务队列

    学习内容来自一下地址 http://www.cnblogs.com/qicosmos/p/4772486.html github https://github.com/qicosmos/cosmos ...

  9. Delphi 域名解析为IP地址

    花生壳:1.LJSZForm-Lable1-Caption改成 “IP地址或域名:”2.LJSZForm-BitBtn1Click-注释掉--else if IsIP(Trim(IPEdit.Text ...

  10. 20175316盛茂淞 2018-2019-2 《Java程序设计》第2周课上测试总结

    20175316 2018-2019-2 <Java程序设计>第2周课上测试总结 上周考试题目总结 题目1 题目要求: 在Ubuntu中用自己的有位学号建一个文件,教材p29 Exampl ...