<!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. leetcode33

    class Solution { public: int search(vector<int>& nums, int target) { //这个题是给一个排序数组,但是数组里面内 ...

  2. 安装和激活Office 2019

    有条件请支持正版!相比费尽力气找一个可能不太安全的激活工具,直接买随时随地更新的Office 365确实是最好的办法.暂时没有经济实力的,可以看看这篇文章.下载OTP工具 首先到Office Tool ...

  3. STL里的内存池实现

    这个貌似有点复杂,解决的主要问题 就是 减少 内存分配次数,减少用户态核心态切换中断次数,提高运行速度,预分配 和线程池一个道理,预分配 ////////////////////自由链表 union ...

  4. 并发中的volatile

    目录 1. 概述 2. volatile的特性 3. volatile写-读的内存语义 4. volatile内存语义的实现 5. JSR-133为什么要增强volatile的内存语义 6. 总结 1 ...

  5. 最适合入门的Laravel中级教程(三)表单验证

    做开发有个原则是永远不能信任用户输入的数据: 即便前端已经做了验证: 在后端 php 也必须要再次验证: laravel 为表单验证提供了强大且简单的方案: 创建示例路由: routes/web.ph ...

  6. 微信开发 invalid openid

    微信开发时候测试号运行正常,换到正式号就会报invalid openid的错误. 看了微信问答系统里的答案,说是json格式的问题,但是我这边不是这个原因. 后来突然想到了,应该是AppId和AppS ...

  7. cdnbest站点里设置防盗链

    设置需求只允许 test.kangleweb.com 访问  ,其他网站链接全部拒绝 (注:如果test.kangleweb.com是用https访问,那引用的内容地址www447.yivpn.cn也 ...

  8. java学习笔记（四）：import语法

    Import 语法是给编译器寻找特定类的适当位置的一种方法. 创建一个Employee 类,包括四个实体变量姓名(name),年龄(age),职位(designation)和薪水(salary). p ...

  9. python--第十天总结（线程、进程和协程）

    Python线程 Threading用于提供线程相关的操作,线程是应用程序中工作的最小单元. #!/usr/bin/env python # -*- coding:utf-8 -*- import t ...

  10. linux启动http服务

    1.安装apache yum install httpd #根据提示,输入Y安装即可成功安装 systemctl start httpd.service #启动apache systemctl sto ...