<!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. 718. Maximum Length of Repeated Subarray

    Given two integer arrays A and B, return the maximum length of an subarray that appears in both arra ...

  2. 483. Smallest Good Base

    For an integer n, we call k>=2 a good base of n, if all digits of n base k are 1. Now given a str ...

  3. Lightoj1000【简单A+B】

    balababalabalabala! #include<stdio.h> #include<queue> #include<string.h> #include& ...

  4. 3D max模型导入unity 3D中注意事项

    一.单位,比例统一   在建模型前先设置好单位,在同一场景中会用到的模型的单位设置必须一样,模型与模型之间的比例要正确,和程序的导入单位一致,即便到程序需要缩放也可以统一调整缩放比例.统一单位为米. ...

  5. MecanimControl插件随笔

    ----------------------------------------- 4个animatorController是怎么回事? 分别对应 1镜像动画速度>0 2镜像播放速度<0 ...

  6. apringboot aop权限控制

    + 定义切面: ···@Aspect @Component public class LoginInterceptor { @Around("@annotation(lock)") ...

  7. nacos启动

    nacos下载 https://github.com/alibaba/nacos 1.执行数据库脚本 2.修改配置文件application.propertiesspring.datasource.p ...

  8. 转 在shell脚本中使用expect实现scp传输问题

    1.安装expect expect用于shell脚本中自动交互,其是基于tcl编程语言的工具.所以安装expect首先安装tcl.本文中使用的是expect5.45和tcl8.6.6. 安装tcl [ ...

  9. GDB 格式化结构体输出

    转载:http://blog.csdn.net/unix21/article/details/9991925 set print addressset print address on打开地址输出,当 ...

  10. python_15(jquery)

    第1章 iquery 1.1 官网 1.2 流程图 1.3 Javascripts方法 1.4 书写格式 1.5 jQuery 的两大特 1.6 对比javascript代码量 第2章 入口函数(重要 ...