<!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. dos生成目录树

    1. tree命令详解 [Tree命令作用] 以图形显示驱动器或路径的文件夹结构. [Tree命令格式] 在命令行窗口使用tree /?查看帮助. TREE [drive:][path] [/F] [ ...

  2. android摄像头获取图像——第二弹

    使用android内的Camera对象 (1)Camera是控制着摄像头的api,拥有一系列控制摄像头的上层方法:camera类能够调用底层的摄像头接口,完成启动摄像头.预 览摄像头图像.拍照等功能: ...

  3. Mecanim Control

    http://www.ufe3d.com/doku.php/mecanimcontrol Mecanim Control Your ultimate solution for Mecanim base ...

  4. Educational Codeforces Round 20 C(math)

    題目鏈接: http://codeforces.com/problemset/problem/803/C 題意: 給出兩個數n, k, 將n拆分成k個數的和,要求這k個數是嚴格遞增的,並且這k個數的g ...

  5. Educational Codeforces Round 19 A, B, C, E(xjb)

    题目链接:http://codeforces.com/contest/797 A题 题意:给出两个数n, k,问能不能将n分解成k个因子相乘的形式,不能输出-1,能则输出其因子: 思路:将n质因分解, ...

  6. 51nod1402(贪心)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1402 题意:中文题诶- 思路:贪心 对于一个桩点,如果我们只考 ...

  7. typescript学习笔记（一）----基础类型

    1.使用typescript前第一个操作就是全局配置typescript环境 ---------------npm install -g typescript 2.typescript(以下称为ts, ...

  8. 「今日 GitHub 趋势」让全世界程序员体会中国的 12306 抢票狂潮

    [2018年1月7日 GitHub 趋势] No.1:yyx990803 / build-your-own-mint 单日 714 星 使用 Plaid,Google 表格和 CircleCI 构建您 ...

  9. VUE循环菜单

  10. C# 委托链、多路广播委托

    委托链.多路广播委托:也就是把多个委托链接在一起,我们把链接了多个方法的委托称为委托链或多路广播委托 例: class HelloWorld { //定义委托类型 delegate void Dele ...