图片旋转,鼠标滚轮缩放,镜像,切换图片js代码

最新推荐文章于 2023-07-04 08:10:44 发布

最骚的就是你

最新推荐文章于 2023-07-04 08:10:44 发布

阅读量3.5k

点赞数 1

分类专栏： web前端学习文章标签：图片鼠标 javascript

本文链接：https://blog.csdn.net/libin_1/article/details/50521474

版权

这篇博客分享了一个使用JavaScript实现的图片操作代码，包括图片的旋转、鼠标滚轮缩放以及镜像切换功能。提供了demo下载链接及源码参考。

摘要由CSDN通过智能技术生成

这里写图片描述

demo下载地址：http://download.csdn.net/detail/cometwo/9404811

感谢博客：http://www.cnblogs.com/cloudgamer/archive/2010/08/16/ImageTrans.html

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>图片旋转,鼠标滚轮缩放,镜像,切换图片</title>
        <meta charset="utf-8" />
        <!--<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>-->
        <script type="text/javascript" src="js/abc.js"></script>
    </head>

    <body>

        <h1 style="text-align: center;color: blue;">效果预览</h1>
        <script>
            //容器对象
            var ImageTrans = function(container, options) {
    
                this._initialize(container, options);
                this._initMode();
                if (this._support) {
                    this._initContainer();
                    this._init();
                } else { //模式不支持
                    this.onError("not support");
                }
            };
            ImageTrans.prototype = {
                //初始化程序
                _initialize: function(container, options) {
    
                    var container = this._container = $$(container);
					this._clientWidth = container.clientWidth; //变换区域宽度
					this._clientHeight = container.clientHeight; //变换区域高度
					this._img = new Image(); //图片对象
					this._style = {}; //备份样式
					this._x = this._y = 1; //水平/垂直变换参数
					this._radian = 0; //旋转变换参数
					this._support = false; //是否支持变换
					this._init = this._load = this._show = this._dispose = $$.emptyFunction;
                    var opt = this._setOptions(options);
                    this._zoom = opt.zoom;
                    this.onPreLoad = opt.onPreLoad;
                    this.onLoad = opt.onLoad;
                    this.onError = opt.onError;
                    this._LOAD = $$F.bind(function() {
    
						this.onLoad();
						this._load();
						this.reset();
						this._img.style.visibility = "visible";
					}, this);
					$$CE.fireEvent(this, "init");
                },
                //设置默认属性
                _setOptions: function(options) {
    
                    this.options = { //默认值
                        mode: "css3|filter|canvas",
                        zoom: .1, //缩放比率
                        onPreLoad: function() {
    }, //图片加载前执行
                        onLoad: function() {
    }, //图片加载后执行
                        onError: function(err) {
    } //出错时执行
                    };
                    return $$.extend(this.options, options || {});
				},
				//模式设置
				_initMode: function() {
    
					var modes = ImageTrans.modes;
					this._support = $$A.some(this.options.mode.toLowerCase().split("|"), function(mode) {
    
						mode = modes[mode];
						if (mode && mode.support) {
							mode.init && (this._init = mode.init); //初始化执行程序
							mode.load && (this._load = mode.load); //加载图片执行程序
							mode.show && (this._show = mode.show); //变换显示程序
							mode.dispose && (this._dispose = mode.dispose); //销毁程序
							//扩展变换方法
							$$A.forEach(ImageTrans.transforms, function(transform, name) {
    
								this[name] = function() {
    
									transform.apply(this, [].slice.call(arguments));
									this._show();
								}
							}, this);
							return true;
						}
					}, this);
				},
				//初始化容器对象
				_initContainer: function() {
    
					var container = this._container,
						style = container.style,
						position = $$D.getStyle(container, "position");
					this._style = {
						"position": style.position,
						"overflow": style.overflow
					}; //备份样式
					if (position != "relative" && position != "absolute") {
						style.position = "relative";
					}
					style.overflow = "hidden";
					$$CE.fireEvent(this, "initContainer");
				},
				//加载图片
				load: function(src) {
    
					if (this._support) {
						var img = this._img,
							oThis = this;
						img.onload || (img.onload = this._LOAD);
						img.onerror || (img.onerror = function() {
    
							oThis.onError("err image");
						});
						img.style.visibility = "hidden";
						this.onPreLoad();
						img.src = src;
					}
				},
				//重置
				reset: function() {
    
					if (this._support) {
						this._x = this._y = 1;
						this._radian = 0;
						this._show();
					}
				},
				//销毁程序
				dispose: function() {
    
					if (this._support) {
						this._dispose();
						$$CE.fireEvent(this, "dispose");
						$$D.setStyle(this._container, this._style); //恢复样式
						this._container = this._img = this._img.onload = this._img.onerror = this._LOAD = null;
					}
				}
			};
			//变换模式
			ImageTrans.modes = function() {
    
				var css3Transform; //ccs3变换样式
				//初始化图片对象函数
				function initImg(img, container) {
    
					$$D.setStyle(img, {
						position: "absolute",
						border: 0,
						padding: 0,
						margin: 0,
						width: "auto",
						height: "auto", //重置样式
						visibility: "hidden" //加载前隐藏
					});
					container.appendChild(img);
				}
				//获取变换参数函数
				function getMatrix(radian, x, y) {
    
					var Cos = Math.cos(radian),
						Sin = Math.sin(radian);
					return {
						M11: Cos * x,
						M12: -Sin * y,
						M21: Sin * x,
						M22: Cos * y
					};
				}
				return {
					css3: { //css3设置
						support: function() {
    
							var style = document.createElement("div").style;
							return $$A.some(
								["transform", "MozTransform"

最低0.47元/天解锁文章

最骚的就是你

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
图片旋转,鼠标滚轮缩放,镜像,切换图片js代码

<!DOCTYPE html><html lang="zh-cn"> <head> <title>图片旋转,鼠标滚轮缩放,镜像,切换图片</title> <meta charset="utf-8" /> <!--<script type="text/javascript" src="js/jquery-1.11.1.min.js"></scr
复制链接

扫一扫