<!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. 李清华201772020113《面向对象程序设计（Java）》第六周学习总结

    第一部分 理论知识 1.继承 用已有类来构建新类的一种机制.新类可以继承父类的方法和域,同时可以在新类中添加新的方法和域. 已有类称为:超类.基类或父类.新类称作:子类.派生类或孩子类. 子类的构造器 ...

  2. 第二篇*2、Python字符串格式化

    1.字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 1)百分号方式 %[(name)][flags][width].[precision]typecode (nam ...

  3. mvc中view与controll之间传递参数时，可以使用url进行传递

    mvc中view与controller之间传递参数时,可以使用url进行传递,但是在url的地址中需要加上“id=123”这样的东西才行. 具体如代码: window.location.href = ...

  4. Django 重写用户模型

    AUTH_USER_MODEL = 'myapp.MyUser' django——重写用户模型 Django内建的User模型可能不适合某些类型的项目.例如,在某些网站上使用邮件地址而不是用户名作为身 ...

  5. 【ESP8266】、ESP8266通讯使用的AT指令

    一.AT指令介绍 AT(Attention), AT指令一般应用于终端设备和PC应用之间建立连接.通过AT指令来控制. 二.常用AT指令 AT指令主要分为: 基础AT指令,WIFI功能AT指令,TCP ...

  6. 搭建EOS环境

    [搭建EOS环境] 1.Ubuntu 18.04 下安装eosio wget https://github.com/eosio/eos/releases/download/v1.4.4/eosio_1 ...

  7. centos系统有多个内核，修改默认启动内核

    打开系统文件 vim  /boot/grub/grub.conf default=0,意思是GRUB在默认情况下,也就是用户没有选择的情况下,去启动显示在用户界面的第一个系统:GRUB启动系统时是从0 ...

  8. node.js中express框架的基本使用

    express是一个基于node.js平台的,快速,开放,极简的web开发框架. 一.安装 express npm install express --save 二.简单使用 express //引入 ...

  9. vue 总结

    VUE总结 双花括号{{}} 01.index.hmlt main.js 内存的数据可以更改 v-model 双休数据绑定 代码: <!DOCTYPE html> <html lan ...

  10. spring mvc controller中的参数验证机制（一）

    一.验证用到的注解 @Valid 对传到后台的参数的验证 @BindingResult 配合@Valid使用,验证失败后的返回 二.示例 1.传统方式 @PostMapping public User ...