当前位置：首页 > 编程教程 > javascript技术文章 > JS实现图片旋转动画效果封装与使用示例

JS实现图片旋转动画封装与使用的实例及代码

  • 发布时间：
  • 作者：码农之家
  • 点击：171

这篇文章主要知识点是关于JS、图片、旋转动画、js实现图片旋转 js滚动鼠标中间对图片放大缩小 的内容，如果大家想对相关知识点有系统深入的学习，可以参阅以下电子书

你不知道的JavaScript（上卷）
你不知道的JavaScript（上卷）扫描版
  • 类型：JS大小：8.4 MB格式：PDF作者：普森
立即下载

JS实现图片旋转动画效果封装与使用示例

本文实例讲述了JS实现图片旋转动画效果封装与使用。分享给大家供大家参考，具体如下：

核心封装代码如下：

//图片动画封装
function SearchAnim(opts) {
    for(var i in SearchAnim.DEFAULTS) {
      if (opts[i] === undefined) {
        opts[i] = SearchAnim.DEFAULTS[i];
      }
    }
    this.opts = opts;
    this.timer = null;
    this.elem = document.getElementById(opts.elemId);
    this.startAnim();
}
SearchAnim.prototype.startAnim = function () {
    this.stopAnim();
    this.timer = setInterval(() => {
      var startIndex = this.opts.startIndex;
      if (startIndex == 360) {
        this.opts.startIndex = 0;
      }
      this.elem.style.transform = "rotate("+ (startIndex) +"deg)";
      this.opts.startIndex += 5;
    }, this.opts.delay);
    setTimeout(() => {
      this.stopAnim();
    }, this.opts.duration);
}
SearchAnim.prototype.stopAnim = function() {
    if (this.timer != null) {
      clearInterval(this.timer);
    }
}
SearchAnim.DEFAULTS = {
    duration : 60000,
    delay : 200,
    direction : true,
    startIndex : 0,
    endIndex : 360
}

使用方法：

随便创建一img标签

然后如下调用即可：

new SearchAnim({
  elemId : "wait-icon",
  delay : 20,
});

完整示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net JS旋转动画</title>
</head>
<img src="https://files.jb51.net/file_images/article/201807/201879100307926.jpg" id="wait-icon"/>
<script>
//图片动画封装
function SearchAnim(opts) {
    for(var i in SearchAnim.DEFAULTS) {
      if (opts[i] === undefined) {
        opts[i] = SearchAnim.DEFAULTS[i];
      }
    }
    this.opts = opts;
    this.timer = null;
    this.elem = document.getElementById(opts.elemId);
    this.startAnim();
}
SearchAnim.prototype.startAnim = function () {
    this.stopAnim();
    this.timer = setInterval(() => {
      var startIndex = this.opts.startIndex;
      if (startIndex == 360) {
        this.opts.startIndex = 0;
      }
      this.elem.style.transform = "rotate("+ (startIndex) +"deg)";
      this.opts.startIndex += 5;
    }, this.opts.delay);
    setTimeout(() => {
      this.stopAnim();
    }, this.opts.duration);
}
SearchAnim.prototype.stopAnim = function() {
    if (this.timer != null) {
      clearInterval(this.timer);
    }
}
SearchAnim.DEFAULTS = {
    duration : 60000,
    delay : 200,
    direction : true,
    startIndex : 0,
    endIndex : 360
}
new SearchAnim({
  elemId : "wait-icon",
  delay : 20,
});
</script>
<body>
</body>
</html>

使用本站HTML/CSS/JS在线运行测试工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下测试运行效果：

 JS实现图片旋转动画效果封装与使用示例

希望本文所述对大家JavaScript程序设计有所帮助。

js实现图片旋转 js滚动鼠标中间对图片放大缩小

从开通博客园到今天，有两个多月了。我发现之前没有开通博客记录自己所做的东西，真是后悔啊。

现在一点一点把自己所做的功能以博客的形式记录下来，一方面可以给大家分享，大家一起学习，同时自己也从新回顾一下。

这个图片放大，缩小和旋转，我采用canvas画布这个来做的，核心点就在js中去控制鼠标状态及事件。

我先给大家展示一下效果图。

js实现图片旋转 js滚动鼠标中间对图片放大缩小

鼠标移到画布范围内就会出现下方的操作栏，每次以90度选择。

1.在引入js的时候一定要注意了，由于在使用画布canvas时，需要等图片加载完成后才可以执行画布里的内容。js要在最后引入。

js实现图片旋转 js滚动鼠标中间对图片放大缩小

2.js中要在图片加载完成之后在方法

js实现图片旋转 js滚动鼠标中间对图片放大缩小

主要的地方就是这个啦，其它就是js方法了，我就不一一解释了，有js功底的能看懂，如果有地方不懂，或者需要改进的就在下面评论出来，大家一起学习。

下面我就贴出代码了，需要演示项目源码的小伙伴也评论出来，我把演示项目发出来。

这是目录结构，也不需要什么jar包。image下面就是图片啦。

js实现图片旋转 js滚动鼠标中间对图片放大缩小

 html页面代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/pictureCss.css" rel="external nofollow" />
<link >
</head>
<body>
<div id="pandiv">
    <img src="../image/3.png" >
    <canvas id="canvas" width="700" height="500" > </canvas>
    <div id="control" >
    <img id="left" src="../image/left1.png" onclick="rateImage(270)">
    <img id="right" src="../image/right1.png" onclick="rateImage(90)">
  </div>
  </div>
  <script type="text/javascript" src="../js/pictureJs.js"></script>
</body>
</html>

css样式代码

@CHARSET "UTF-8";
 
* {
  margin: 0px;
  padding: 0px;
}
 
#pandiv {
  width: 700px;
  height: 500px;
}
 
#control {
  background: #ccc;
  opacity: 0.7;
  width: 200px;
  height: 30px;
  display: none;
  padding-top: 5px;
  position: absolute;
  left: 250px;
  top: 450px;
}
 
#canvas {
  border: 1px solid black;
}
 
#left {
  float: left;
  display: block;
}
 
#right {
  float: right;
  display: block;
}

核心重点js代码：

/**
 *
 */
 
var canvas = document.getElementById("canvas");
var pandiv = document.getElementById("pandiv");
var cxt = canvas.getContext("2d");
var control = document.getElementById("control");
var imgScale = 1;
var img;
var imgX = 0;
var imgY = 0;
var currentRate = 0;
/**当前的旋转角度*/
var mouseDownLocation;
var isMouseDown = false;
 
window.onload = function() {
  var bbox = canvas.getBoundingClientRect();
  var imageUrl = $("#pandiv>img").attr("src");
  img = new Image();
  img.src = imageUrl;
  img.id = "pic";
 
  loadImage();
  drawImage();
}
 
function reLoadImage() {
  loadImage();
}
function loadImage() {
  if (img.width <= canvas.width && img.height <= canvas.height) {
    imgX = (canvas.width - img.width * imgScale) / 2
    imgY = (canvas.height - img.height * imgScale) / 2;
  } else {
    var ratio = img.width / img.height;
    widthTime = img.width / canvas.width;
    heightTime = img.height / canvas.height;
 
    if (widthTime > heightTime) {
      img.width = canvas.width;
 
      img.height = canvas.width / ratio;
    } else {
      img.height = canvas.height;
      img.width = canvas.height * ratio;
 
    }
 
    imgX = (canvas.width - img.width * imgScale) / 2
    imgY = (canvas.height - img.height * imgScale) / 2
  }
}
 
//var backGroundColor = ['#223344', '#445566', '#667788', '#778899'];
//var backGroundColorIndex = 0;
function drawImage() {
 
  var bbox = canvas.getBoundingClientRect();
 
  //cxt.clearRect(0, 0, canvas.width, canvas.height);
  cxt.clearRect(-200, -200, canvas.width * 2, canvas.height * 2);
 
  // cxt.fillStyle = backGroundColor[backGroundColorIndex++ % backGroundColor.length];
  //cxt.fillRect(0, 0, canvas.width, canvas.height);
 
  cxt.drawImage(img, imgX, imgY, img.width * imgScale, img.height * imgScale);
}
 
// windowToCanvas此方法用于鼠标所在点的坐标切换到画布上的坐标
function windowToCanvas(canvas, x, y) {
  var bbox = canvas.getBoundingClientRect();
  return {
    x : x - bbox.left - (bbox.width - canvas.width) / 2,
    y : y - bbox.top - (bbox.height - canvas.height) / 2
  };
}
 
function isPointInImageArea(point) {
  return true;
  //return (point.x > imgX && point.x < imgX + img.width * imgScale &&
  //point.y > imgY && point.y < imgY + img.height * imgScale);
}
function isPointInCanvasArea(point) {
  return true;
  //var bbox = canvas.getBoundingClientRect();
  //return (point.x > bbox.left && point.x < bbox.right && point.y > bbox.//top && point.y < bbox.bottom);
}
function isDivArea(point) {
  return true;
  //var bbox =pandiv.getBoundingClientRect();
  //return (point.x > bbox.left && point.x < bbox.right && point.y > bbox.//top && point.y < bbox.bottom);
}
 
canvas.onmousewheel = canvas.onwheel = function(event) {
 
  var pos = windowToCanvas(canvas, event.clientX, event.clientY);
  event.wheelDelta = event.wheelDelta ? event.wheelDelta
      : (event.deltaY * (-40));
 
  if (event.wheelDelta > 0) {
    //alert("放大");
    if (isPointInImageArea(pos)) {
      imgScale *= 2;
      //imgX = imgX * 2 - pos.x;
      // imgY = imgY * 2 - pos.y;
      imgX = (canvas.width - img.width * imgScale) / 2
      imgY = (canvas.height - img.height * imgScale) / 2
    } else {
      imgScale *= 2;
      //imgX = (canvas.width - img.width * imgScale) / 2;
      //imgY = (canvas.height - img.height * imgScale) / 2;
      imgX = (canvas.width - img.width * imgScale) / 2
      imgY = (canvas.height - img.height * imgScale) / 2
    }
  } else {
    //alert("缩小");
    if (isPointInImageArea(pos)) {
      imgScale /= 2;
      //imgX = imgX * 0.5 + pos.x * 0.5;
      // imgY = imgY * 0.5 + pos.y * 0.5;
      imgX = (canvas.width - img.width * imgScale) / 2
      imgY = (canvas.height - img.height * imgScale) / 2
    } else {
      imgScale /= 2;
      // imgX = (canvas.width - img.width * imgScale) / 2;
      // imgY = (canvas.height - img.height * imgScale) / 2;
      imgX = (canvas.width - img.width * imgScale) / 2
      imgY = (canvas.height - img.height * imgScale) / 2
    }
  }
 
  drawImage();
 
  return false;
}
 
/**旋转angle度*/
function rateImage(angle) {
  currentRate = (currentRate + angle) % 360;
 
  cxt.clearRect(0, 0, canvas.width, canvas.height);
  //cxt.save();
  cxt.translate(canvas.width / 2, canvas.height / 2);
  cxt.save();
  cxt.rotate(angle * Math.PI / 180);
  cxt.translate(-canvas.width / 2, -canvas.height / 2);
  imgScale = 1;
  reLoadImage();
 
  drawImage();
  //cxt.restore();
}
 
/**鼠标按下*/
pandiv.onmousedown = function(event) {
  mouseDownLocation = windowToCanvas(canvas, event.clientX, event.clientY);
  if (isPointInImageArea(mouseDownLocation)) {
    isMouseDown = true;
    document.title = 'mouse down';
  }
}
/**鼠标弹起*/
document.body.onmouseup = function() {
  isMouseDown = false;
  canvas.style.cursor = "default";
  document.title = 'mouse up';
}
/**鼠标移动*/
pandiv.onmousemove = function(event) {
  if (isMouseDown) {
    canvas.style.cursor = "move";
    var newMouseLocation = windowToCanvas(canvas, event.clientX,
        event.clientY);
    if (isDivArea({
      x : event.clientX,
      y : event.clientY
    })) {
      var x = newMouseLocation.x - mouseDownLocation.x;
      var y = newMouseLocation.y - mouseDownLocation.y;
      mouseDownLocation = newMouseLocation;
      /**根据角度，计算图片偏移*/
      if (0 == currentRate) {
        imgX += x;
        imgY += y;
      } else if (90 == currentRate) {
        imgX += y;
        imgY -= x;
      } else if (180 == currentRate) {
        imgX -= x;
        imgY -= y;
      } else if (270 == currentRate) {
        imgX -= y;
        imgY += x;
      }
    } else {
      /** 鼠标移动至画布范围外，置鼠标弹起 */
      isMouseDown = false;
      canvas.style.cursor = "default";
      document.title = 'mouse up';
    }
    drawImage();
  }
}
pandiv.onmouseover = function() {
  //alert("1");
  control.style.display = "block";
 
}
canvas.onmouseout = function() {
  //alert("1");
  control.style.display = "none";
}　　

这就是实现这个图片旋转，放大，缩小的演示代码。

由于这几天在做一个切换图片的功能，点击上一页，下一页实现图片切换，这个功能以及快全部实现了，到时候我搭建一个框架的演示项目，来给大家展示图片切换上一张，下一张，也包括旋转，放大缩小功能。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。

JS动画 相关电子书
学习笔记
网友NO.418735

JS+canvas绘制的动态机械表动画效果

本文实例讲述了JS+canvas绘制的动态机械表动画效果。分享给大家供大家参考，具体如下： 先来看看运行效果： 完整实例代码： !DOCTYPE htmlhtmlhead lang="en" meta charset="UTF-8" titlewww.jb51.net canvas时钟/title style canvas { border: 1px solid red; } /style/headbodycanvas width="800" height="600"/canvas/bodyscript function Clock(opt) { for (var key in opt) { this[key] = opt[key]; } this.init(); } Clock.prototype = { init: function () { var self = this; var ctx = this.ctx; this.timer = setInterval(function(){ ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); self.drawDial(); self.drawDegreeScale(); self.drawNumber(); self.drawPointers(); },1000); }, drawDial: function () { var ctx = this.ctx; ctx.save(); ctx.beginPath(); ctx.lineWidth = this.clockDialW; ctx.strokeStyle = this.clockDialColor; ctx.arc(this.clockX, this.clockY, this.clockRadius, 0, 2 * Math.PI); ctx.stroke(); ctx.restore(); }, drawDegreeScale: function () { var ctx = this……

网友NO.159157

原生JS检测CSS3动画是否结束的方法详解

本文实例讲述了原生JS检测CSS3动画是否结束的方法。分享给大家供大家参考，具体如下： 不知道大家在做网页的时候有没有碰到这种情况：当你使用CSS3的动画属性时，想要在动画结束后添加一系列操作，但往往这些操作可能会发生在与动画同时出现或者是在动画还没结束时就发生了。 针对这种情况我们会使用js来监听动画是否结束即它的style的transition属性是否为 transitionend ;下面我们通过一个简单的例子来理解一下我这句话的含义： 代码如下： !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" meta http-equiv="X-UA-Compatible" content="ie=edge" title通过原生js检测CSS3的动画结束/title style *{padding: 0;margin: 0;} .test{ width: 200px; height: 200px; border: 1px soli black; background: red; transition-property:width; transition-duration: 3s; } /* 动画 */ .test.m……

网友NO.105549

JS+CSS实现网页加载中的动画效果

本文实例为大家分享了JS实现网页加载中效果的具体代码，供大家参考，具体内容如下 需要材料： 一张loading动画的gif图片 基本逻辑： 模态框遮罩 + loading.gif动图， 默认隐藏模态框 页面开始发送Ajax请求数据时，显示模态框 请求完成，隐藏模态框 下面我们通过Django新建一个web应用，来简单实践下 实践 1.新建一个Django项目，创建应用app01, 配置好路由和static，略。将gif动图放到静态文件夹下，结构如下： 2.视图中定义一个函数，它返回页面test.html： def test(request): return render(request, 'test.html') 3.test.html页面如下： !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleTitle/title !-- 导入css样式 -- link rel="stylesheet" href="/static/css/loading.css" rel="external nofollow" !-- 导入jquery 和 js文件 -- script src="/static/plugins/jquery-3.2.1.js"/script script src="/static/js/loading.js"/script/headbodyh1你好啊，朋友……

网友NO.523024

tween.js缓动补间动画算法示例

一、理解tween.js 如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了，首先b、c、d三个参数（即初始值，变化量，持续时间）在缓动开始前，是需要先确定好的。 首先引入一个概念就补间动画 Flash做动画时会用到Tween类，利用它可以做很多动画效果，例如缓动、弹簧等等。 tween.js在Flash中可以解释为补间动画. 那么问题来了,什么是补间动画呢? 相信学过Flash的都知道补间动画是flash主要的非常重要的表现手段之一.补间动画有动作补间动画与形状补间动画两种,但是在js中却不需要了解这么多. 好了,废话不多说,先看看百度百科关于补间动画给出的定义: 补间动画：做flash动画时，在两个关键帧中间需要做“补间动画”，才能实现图画的运动； 插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得……

网友NO.785145

Vue.js每天必学之过渡与动画

通过 Vue.js 的过渡系统，可以在元素从 DOM 中插入或移除时自动应用过渡效果。Vue.js 会在适当的时机为你触发 CSS 过渡或动画，你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作。 为了应用过渡效果，需要在目标元素上使用 transition 特性： div v-if="show" transition="my-transition"/div transition 特性可以与下面资源一起用： •v-if •v-show •v-for （只在插入和删除时触发，使用 vue-animated-list 插件） •动态组件 （介绍见组件） •在组件的根节点上，并且被 Vue 实例 DOM 方法（如 vm.$appendTo(el)）触发。 当插入或删除带有过渡的元素时，Vue 将： 1.尝试以 ID "my-transition" 查找 JavaScript 过渡钩子对象——通过 Vue.transition(id, hooks) 或 transitions 选项注册。如果找到了，将在过渡的不同阶段调用相应的钩子。 2.自动嗅探目标元素是否有 CSS 过渡或动画，并……

<
1
>
发布评论

最新文章

文章排行

最新电子书

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助：520161757@qq.com