<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<style>

    * {

        margin: 0;

        padding: 0;

    }

    body {

        background: #333;

    }

    #pageContent {

        width: 1000px;

        height: 750px;

        overflow: hidden;

        position: relative;

        margin: 5px auto;

    }

    #imgContainer {

        width: 1000px;

        height: 750px;

    }

    @font-face {

        font-family: 'Material Icons';

        font-style: normal;

        font-weight: 400;

        src: url(https://fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');

    }

    .material-icons {

        font-family: 'Material Icons';

        font-weight: normal;

        font-style: normal;

        line-height: 1;

        letter-spacing: normal;

        text-transform: none;

        display: inline-block;

        white-space: nowrap;

        word-wrap: normal;

        direction: ltr;

        -webkit-font-feature-settings: 'liga';

        -webkit-font-smoothing: antialiased;

    }

    i.material-icons {

        font-size: 24px;

        color: white;

        position: relative;

        border-radius: 50%;

        padding: 5px;

        margin: 3px;

        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

        transition: color 0.2s ease, background-color 0.2s ease, transform 0.3s ease;

    }

    i.material-icons:hover {

        background-color: transparent;

        transform: rotate(90deg);

        cursor: pointer;

        box-shadow: none;

    }

</style>

<div id="pageContent">

    <div id="imgContainer">

        <img id="imageFullScreen" style="display:block;" src="20190514094105947_4k.jpg">

    </div>

    <div style="position:fixed; bottom:0;width:1000px;text-align:center;">

        <i class="material-icons" onclick="imgRotate()" title="向右旋转">refresh</i>

    </div>

</div>

<script src="jquery.min.js?v=2.1.4"></script>

<script src="e-smart-zoom-jquery.js"></script>

<script>

    var current = 0;

    $(function () {

        $('#imageFullScreen').smartZoom({'containerClass': 'zoomableContainer'});

    });

    function imgRotate() {

        current = (current + 90) % 360;

        $('#imgContainer').css("transform", "rotate(" + current + "deg)");

    }

</script>

</body>

</html>

ps:需要先下载e-smart-zoom-jquery.js到本地

Js图片缩放代码 鼠标滚轮放大缩小 图片向右旋转的更多相关文章

  1. allegro设置鼠标滚轮放大缩小

    allegro设置鼠标滚轮放大缩小 allegro16版本以增加可以通过鼠标滚轮进行PCB的放大缩小.具体方法如下: 首先在HOME路径下找到PCBENV文件夹,进入该文件夹打开ENV文件. 在ENV ...

  2. idea通过Ctrl+鼠标滚轮放大/缩小字体

  3. viewer && ImageFlow 图片滚动组件 图片点击放大 可以滚轮放大缩小 viewer

    ImageFlow https://finnrudolph.com/products/imageflow https://github.com/countzero/ImageFlow http://w ...

  4. JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果

    JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...

  5. 使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...

  6. 函数传参，改变Div任意属性的值&&图片列表：鼠标移入/移出改变图片透明度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效

    <html> <head>     <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...

  8. C# GDI绘制矩形框，鼠标左键拖动可移动矩形框，滚轮放大缩小矩形框

    最近工作需要,要做一个矩形框,并且 用鼠标左键拖动矩形框移动其位置.网上查了一些感觉他们做的挺复杂的.我自己研究一天,做了一个比较简单的,发表出来供大家参考一下.如觉得简单,可路过,谢谢.哈哈. 先大 ...

  9. 【three.js练习程序】鼠标滚轮缩放

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 《C#入门经典》学习笔记（集合、比较和转换）

    http://xiang-ai-2002.blog.163.com/blog/static/8477933201041824429161/ 集合 C#中的数组是作为System.Array类的实例来执 ...

  2. 进击python第三篇：基础

    基础拾遗 序列解包 例: >>>x,y,z=1,2,3 >>>print x,y,z 1 2 3 交换变量也是没问题 >>>x,y=y,x > ...

  3. bzoj 2406: 矩阵【二分+有源汇上下界可行流】

    最大值最小,所以考虑二分 |Σaij-Σbij|<=mid,所以Σbij的上下界就是(Σaij-mid,Σaij+mid) 考虑建有上下界网络,连接(s,i,Σaik-mid,Σaik+mid) ...

  4. Luogu P4892 GodFly的寻宝之旅【状压dp】By cellur925

    题目传送门 又是一道状压+计数类好题hh(真香).数据范围非常友好,告诉我们\(n<=18\),非常符合状压的性质. 其实感觉和\(Hamilton\)路径那题还是有些相似的,我们可以类似地设计 ...

  5. NPOI用WorkbookFactory读写 2007以上格式文件(xlsx)

    //我用的最新的2.2.1版本 //第一步:引用DLL,5个全导入,包括ICSHARP.ZIP,是个开源压缩工具包.XLSX是压缩格式,需要它来解压 //第二部: using NPOI.SS.User ...

  6. ACM2015沈阳:B-Bazinga

    2019.1.24 数据范围:\(n<=500,m<=2000\) 这个题最裸的暴力就是对于每个字符串,都去验证一次,时间复杂度\(O(n^2m)\) 我们发现,如果对于字符串\(i\), ...

  7. win10无法写入删改c盘文件的解决方法

    前言 最近使用了win10系统,结果发现无法对c盘的文件进行写入删改,在网上到处搜集资料,终于找到了解决方法,这里总结一下. 首先,本文针对的是win10家庭版,家庭版默认是不提供组策略功能,而我们需 ...

  8. Bootstrap里的文件作用

    Bootstrap里的文件分别表示什么?都有什么用? bootstrap.css bootstrap.min.css bootstrap-responsive.css bootstrap-respon ...

  9. 牛客练习赛42C（枚举权值）

    传送门 思路:既然无法枚举每个情况,那就枚举每个出现过的权值,加和.那么每个权值出现了多少次呢?用总数减去一次都选不中这个数的次数即可,类似概率的方法. #include <bits/stdc+ ...

  10. JAVA常用知识总结（九）——线程

    sleep和wait的区别? sleep()来自Thread类,和wait()来自Object类.调用sleep()方法的过程中,线程不会释放对象锁.而 调用 wait 方法线程会释放对象锁 slee ...