<!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. 201621123016 《Java程序设计》第八周学习总结

    1. 本周学习总结 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 ArrayList在调用contains方法时会调用indexOf方法得到 ...

  2. lightoj 1078【同余定理】

    题意: 给你一个n和一个数 digit ,问你最少需要多少个 digit 使得整除于n; 思路: 同余定理(a+b)%n=(a%n+b%n)%n; (m%n+m%n*10+m%n*100+m%n*10 ...

  3. MySQL存储引擎的区别

    一.mysql中myisam,innodb和memory三个存储引擎的区别 1.区别:1) MyISAM管理非事务表.提供高速存储和检索,以及全文搜索能力.MyISAM在所有MySQL配置里被支持,是 ...

  4. UGUI技术之LayoutGroup布局实现详解

    继续学习unity4.6,unity的LayoutGroup分为三种, Horizontal Layout Group(水平布局)Vertical Layout Group(垂直布局)Grid Lay ...

  5. [Xcode 实际操作]三、视图控制器-(1)使用UIScrollView展示多个视图可控制器

    目录:[Swift]Xcode实际操作 本文将演示使用滚动视图创建多个页面. [Create a new Xcode project]->[Single View App]->[Next] ...

  6. 浅谈H5技术

    1.什么是H5:HTML5将成为HTML.XHTML以及HTML  DOM的新标准.目前仍处于完善之中.然而,大部分现代浏览器已经具备了某些HTML5支持. 2.背景:HTML5 是 W3C 与 WH ...

  7. UWP 版本号

    一:版本号 个人开发者对于版本号的命名相对随便一点,如果是大公司的话,命名则要规范一点.以开发UWP为例 在创建包的时候,开发者可以自定义版本号或者点击自动增加. 二:对应上图中的四个格子中的数字 第 ...

  8. 2017 Multi-University Training Contest - Team 1 Add More Zero

    Problem Description There is a youngster known for amateur propositions concerning several mathemati ...

  9. CPU占用分析

    用TOP命令很容易定位到时谁占用CPU最高 多线程的进程,我们要知道实际上占用cpu的最小单位是线程,所以肯定是众线程中的某一个或几个占用CPU过高导致的.top -H -p pid命令查看进程内各个 ...

  10. CF1081E Missing Numbers

    思路: 贪心乱搞. 实现: #include <bits/stdc++.h> using namespace std; typedef long long ll; const ll m = ...