<!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. 如何将基于对话框的MFC工程改成基于BCG的

    1.stdafx.h 加入如下内容.BCGCBProInc.h间接导入了lib. 2.应用程序类的父类由CWinApp改成CBCGPWinApp.构造函数增加如下代码: 3.对话框的父类有CDialo ...

  2. HDU5894【组合数学】

    题意: 现在 m个考生人需要坐在有n个座位的圆桌上. 你需要安排位置,使得任意两个考生之间相距至少k个位置. 桌子有编号,考生a和b交换位置视作一种方案,问有多少方案,mod 1e9+7. (0 &l ...

  3. Mecanim动画系统 - 在角色上使用Mask 叠加动画层

    http://www.narkii.com/club/thread-305706-1.html 2013-10-9 01:15 上传 下载附件 (78.65 KB) 导读:五分钟了解Mecanim角色 ...

  4. ionic4+angular7+cordova开发入门

    前言 ionic是一个垮平台开发框架,可通过web技术开发出多平台的应用.但只建议开发简单应用.复杂的应用需要用到许多cordova插件,而cordova插件的更新或者移动平台的更新很可能导致插件的不 ...

  5. ubuntu 安装R 语言

    我个人的环境是 ubuntu 12.04 64 位桌面版. 我自己在安装R 语言时,发现它依赖的库真不是一般的多,所以我在这里简单记录一下我整个安装过程 首先你需要安装 apt-get install ...

  6. Spark 学习(三) maven 编译spark 源码

    spark 源码编译 scala 版本2.11.4 os:ubuntu 14.04 64位 memery 3G spark :1.1.0 下载源码后解压 1 准备环境,安装jdk和scala,具体参考 ...

  7. 集合：set

    set 就是数学上的集合——每个元素最多只出现一次.和sort一样,自定义一个类型也可以构造set ,但是必须定义“小于”运算符. 例子: 输入一个文本,找出所有不同的单词(连续的字母序列),按字典从 ...

  8. Java内置锁和简单用法

    一.简单的锁知识 关于内置锁 Java具有通过synchronized关键字实现的内置锁,内置锁获得锁和释放锁是隐式的,进入synchronized修饰的代码就获得锁,走出相应的代码就释放锁. jav ...

  9. hdu4027Can you answer these queries?(线段树）

    链接 算是裸线段树了,因为没个数最多开63次 ,开到不能再看就标记.查询时,如果某段区间被标记直接返回结果,否则继续向儿子节点更新. 注意用——int64 注意L会大于R 这点我很纠结..您出题人故意 ...

  10. mysql设置自增长列的当前值

    -- 查看表中自增长列的当前值 SELECT Auto_increment FROM information_schema.`TABLES` WHERE Table_Schema='rhr' AND ...