<!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. 牛客 - 17968 - xor序列 - 线性基

    https://ac.nowcoder.com/acm/problem/17968 下面是错误的做法,因为题目要求必须使用x,而y在check的时候不一定用到等价于x的线性基来构成. 正确的做法是直接 ...

  2. IntelliJ IDEA 激活

    方法1 进入ide主页面,help-register-license server,然后输入 http://idea.iteblog.com/key.php   或者   http://idea.la ...

  3. HDU5880【AC自动机】

    题意: 给出n个字符串,再给出一个字符串,把之前出现过的字符串全部变成* 思路: AC自动机,Trie树上存的值是一个字符串的长度,也就是往前的长度,然后倒着处理一遍. 感想: 第三题AC自动机,本来 ...

  4. HDU1059 【DP·二进制数优化】

    题意: 有6种不同价值的物品,然后问你能不能分成两半使得两堆价值相等: 思路: 一共有20000*6=120000 多的价值, 总共背包有20000个,价值最大是120000,看看能不能DP到valu ...

  5. 【OpenJ_Bailian - 3468】电池的寿命（贪心）

    电池的寿命 Descriptions: 小S新买了一个掌上游戏机,这个游戏机由两节5号电池供电.为了保证能够长时间玩游戏,他买了很多5号电池,这些电池的生产商不同,质量也有差异,因而使用寿命也有所不同 ...

  6. 【书评】【不推荐】《TensorFlow：实战Google深度学习框架》（第2版）

    参考书 <TensorFlow:实战Google深度学习框架>(第2版) 这本书我老老实实从头到尾看了一遍(实际上是看到第9章,刚看完,后面的实在看不下去了,但还是会坚持看的),所有的代码 ...

  7. redis-分布式锁2

    https://wudashan.cn/2017/10/23/Redis-Distributed-Lock-Implement/ 站在巨人的肩膀上 本博客使用第三方开源组件Jedis实现Redis客户 ...

  8. cmd,bat和dos的区别

    区别 dos是磁盘操作系统(Disk Operating System),是个人计算机上的一类操作系统. bat是DOS命令,在任何dos环境下都可以使用. bat文件是dos下的批处理文件,批处理文 ...

  9. monxin cms 任意文件删除漏洞

    \program\diypage\receive\edit.php首先看到一个unlink($path);本来应该先看sql语句的,但知道是任意文件删除先跳过删除语句,看看$path怎么传入的倒推上去 ...

  10. AtCoder Beginner Contest 051 ABCD题

    A - Haiku Time limit : 2sec / Memory limit : 256MB Score : 100 points Problem Statement As a New Yea ...