网站地图
首页
php教程
asp.net教程
手机开发
css教程
网页制作
办公数码
jsp教程
asp教程
ps教程
当前位置:
编程学习网
>>
办公数码
>
浏览器
> >
浏览器兼容模式怎么设置_兼容多款浏览器的ImageZoom图片放大效果
浏览器兼容模式怎么设置_兼容多款浏览器的ImageZoom图片放大效果
发布时间:2018-07-16
【www.gdgbn.com--浏览器】
提示:您可以先修改部分代码再运行
兼容各种
浏览器
的ImageZoom图片放大效果
<script language="javascript"> eval(function(p,a,c,k,e,r){e=function(c){return(c<62?"":e(parseInt(c/62)))+((c=c%62)>35?String.fromCharCode(c+29):c.toString(36))};if("0".replace(0,e)==0){while(c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=function(){return"([3-59cf-hj-mo-rt-yCG-NP-RT-Z]|[12]w)"};c=1};while(c--)if(k[c])p=p.replace(new RegExp("b"+e(c)+"b","g"),k[c]);return p}("5 $$,$$B,$$A,$$F,$$D,$$E,$$S;(3(){5 O,B,A,F,D,E,S;O=3(id){4"1R"==1y id?G.getElementById(id):id};O.emptyFunction=3(){};O.extend=3(H,Z){I(5 N P Z){H[N]=Z[N]}4 H};O.deepextend=3(H,Z){I(5 N P Z){5 17=Z[N];9(H===17)continue;9(1y 17==="c"){H[N]=C.callee(H[N]||{},17)}J{H[N]=17}}4 H};O.wrapper=3(me,1T){5 1z=3(){me.Q(11,C)};5 1A=3(){};1A.18=1T.18;1z.18=new 1A;4 1z};B=(3(K){5 b={12:/12/.x(K)&&!/1B/.x(K),1B:/1B/.x(K),1U:/webkit/.x(K)&&!/1C/.x(K),1V:/1V/.x(K),1C:/1C/.x(K)};5 1j="";I(5 i P b){9(b[i]){1j="1U"==i?"19":i;1D}}b.19=1j&&1E("(?:"+1j+")[\/: ]([\d.]+)").x(K)?1E.$1:"0";b.ie=b.12;b.1W=b.12&&1G(b.19,10)==6;b.ie7=b.12&&1G(b.19,10)==7;b.1X=b.12&&1G(b.19,10)==8;4 b})(1H.navigator.userAgent.toLowerCase());A=3(){5 k={isArray:3(1Y){4 Object.18.toString.1k(1Y)==="[c 1Z]"},1l:3(v,R,f){9(v.1l){4 1m(f)?v.1l(R):v.1l(R,f)}J{5 L=v.1a;f=1m(f)?0:f<0?1n.20(f)+L:1n.21(f);I(;f
=L-1?L-1:f<0?1n.20(f)+L:1n.21(f);I(;f>-1;f--){9(v[f]===R)4 f}4-1}}};3 X(c,r){9(undefined===c.1a){I(5 j P c){9(w===r(c[j],j,c))1D}}J{I(5 i=0,L=c.1a;i
var ImageZoom = function(image, viewer, options) { this._initialize( image, viewer, options ); this._initMode( this.options.mode ); this._oninit(); this._initLoad(); }; ImageZoom.prototype = { //初始化程序 _initialize: function(image, viewer, options) { this._image = $$(image);//原图 this._zoom = document.createElement("img");//显示图 this._viewer = $$(viewer);//显示框 this._viewerWidth = 0;//显示框宽 this._viewerHeight = 0;//显示框高 this._preload = new Image();//预载对象 this._rect = null;//原图坐标 this._repairLeft = 0;//显示图x坐标修正 this._repairTop = 0;//显示图y坐标修正 this._rangeWidth = 0;//显示范围宽度 this._rangeHeight = 0;//显示范围高度 this._timer = null;//计时器 this._loaded = false;//是否加载 this._substitute = false;//是否替换 var opt = this._setOptions(options); this._scale = opt.scale; this._max = opt.max; this._min = opt.min; this._originPic = opt.originPic; this._zoomPic = opt.zoomPic; this._rangeWidth = opt.rangeWidth; this._rangeHeight = opt.rangeHeight; this.delay = opt.delay; this.autoHide = opt.autoHide; this.mouse = opt.mouse; this.rate = opt.rate; this.onLoad = opt.onLoad; this.onStart = opt.onStart; this.onMove = opt.onMove; this.onEnd = opt.onEnd; var oThis = this, END = function(){ oThis._end(); }; this._END = function(){ oThis._timer = setTimeout( END, oThis.delay ); }; this._START = $$F.bindAsEventListener( this._start, this ); this._MOVE = $$F.bindAsEventListener( this._move, this ); this._MOUSE = $$F.bindAsEventListener( this._mouse, this ); this._OUT = $$F.bindAsEventListener( function(e){ if ( !e.relatedTarget ) this._END(); }, this ); }, //设置默认属性 _setOptions: function(options) { this.options = {//默认值 mode: "simple",//模式 scale: 0,//比例(大图/原图) max: 10,//最大比例 min: 1.5,//最小比例 originPic: "",//原图地址 zoomPic: "",//大图地址 rangeWidth: 0,//显示范围宽度 rangeHeight:0,//显示范围高度 delay: 20,//延迟结束时间 autoHide: true,//是否自动隐藏 mouse: false,//鼠标缩放 rate: .2,//鼠标缩放比率 onLoad: $$.emptyFunction,//加载完成时执行 onStart: $$.emptyFunction,//开始放大时执行 onMove: $$.emptyFunction,//放大移动时执行 onEnd: $$.emptyFunction//放大结束时执行 }; return $$.extend(this.options, options || {}); }, //根据模式初始化函数属性 _initMode: function(mode) { mode = $$.extend({ options:{}, init: $$.emptyFunction, load: $$.emptyFunction, start: $$.emptyFunction, end: $$.emptyFunction, move: $$.emptyFunction, dispose:$$.emptyFunction }, (ImageZoom._MODE || {})[ mode.toLowerCase() ] || {} ); this.options = $$.extend( mode.options, this.options ); this._oninit = mode.init; this._onload = mode.load; this._onstart = mode.start; this._onend = mode.end; this._onmove = mode.move; this._ondispose = mode.dispose; }, //初始化加载 _initLoad: function() { var image = this._image, originPic = this._originPic, useOrigin = !this._zoomPic && this._scale, loadImage = $$F.bind( useOrigin ? this._loadOriginImage : this._loadImage, this ); //设置自动隐藏 if ( this.autoHide ) { this._viewer.style.display = "none"; } //先加载原图 if ( originPic && originPic != image.src ) {//使用自定义地址 image.onload = loadImage; image.src = originPic; } else if ( image.src ) {//使用元素地址 if ( !image.complete ) {//未载入完 image.onload = loadImage; } else {//已经载入 loadImage(); } } else { return;//没有原图地址 } //加载大图 if ( !useOrigin ) { var preload = this._preload, zoomPic = this._zoomPic || image.src, loadPreload = $$F.bind( this._loadPreload, this ); if ( zoomPic != preload.src ) {//新地址重新加载 preload.onload = loadPreload; preload.src = zoomPic; } else {//正在加载 if ( !preload.complete ) {//未载入完 preload.onload = loadPreload; } else {//已经载入 this._loadPreload(); } } } }, //原图放大加载程序 _loadOriginImage: function() { this._image.onload = null; this._zoom.src = this._image.src; this._initLoaded(); }, //原图加载程序 _loadImage: function() { this._image.onload = null; if ( this._loaded ) {//大图已经加载 this._initLoaded(); } else { this._loaded = true; if ( this._scale ) {//有自定义比例才用原图放大替换大图 this._substitute = true; this._zoom.src = this._image.src; this._initLoaded(); } } }, //大图预载程序 _loadPreload: function() { this._preload.onload = null; this._zoom.src = this._preload.src; if ( this._loaded ) {//原图已经加载 //没有使用替换 if ( !this._substitute ) { this._initLoaded(); } } else { this._loaded = true; } }, //初始化加载设置 _initLoaded: function(src) { //初始化显示图 this._initSize(); //初始化显示框 this._initViewer(); //初始化数据 this._initData(); //开始执行 this._onload(); this.onLoad(); this.start(); }, //初始化显示图尺寸 _initSize: function() { var zoom = this._zoom, image = this._image, scale = this._scale; if ( !scale ) { scale = this._preload.width / image.width; } this._scale = scale = Math.min( Math.max( this._min, scale ), this._max ); //按比例设置显示图大小 zoom.width = Math.ceil( image.width * scale ); zoom.height = Math.ceil( image.height * scale ); }, //初始化显示框 _initViewer: function() { var zoom = this._zoom, viewer = this._viewer; //设置样式 var styles = { padding: 0, overflow: "hidden" }, p = $$D.getStyle( viewer, "position" ); if ( p != "relative" && p != "absolute" ){ styles.position = "relative"; }; $$D.setStyle( viewer, styles ); zoom.style.position = "absolute"; //插入显示图 if ( !$$D.contains( viewer, zoom ) ){ viewer.appendChild( zoom ); } }, //初始化数据 _initData: function() { var zoom = this._zoom, image = this._image, viewer = this._viewer, scale = this._scale, rangeWidth = this._rangeWidth, rangeHeight = this._rangeHeight; //原图坐标 this._rect = $$D.rect( image ); //修正参数 this._repairLeft = image.clientLeft + parseInt($$D.getStyle( image, "padding-left" )); this._repairTop = image.clientTop + parseInt($$D.getStyle( image, "padding-top" )); //设置范围参数和显示框大小 if ( rangeWidth > 0 && rangeHeight > 0 ) { rangeWidth = Math.ceil( rangeWidth ); rangeHeight = Math.ceil( rangeHeight ); this._viewerWidth = Math.ceil( rangeWidth * scale ); this._viewerHeight = Math.ceil( rangeHeight * scale ); $$D.setStyle( viewer, { width: this._viewerWidth + "px", height: this._viewerHeight + "px" }); } else { var styles; if ( !viewer.clientWidth ) {//隐藏 var style = viewer.style; styles = { display: style.display, position: style.position, visibility: style.visibility }; $$D.setStyle( viewer, { display: "block", position: "absolute", visibility: "hidden" }); } this._viewerWidth = viewer.clientWidth; this._viewerHeight = viewer.clientHeight; if ( styles ) { $$D.setStyle( viewer, styles ); } rangeWidth = Math.ceil( this._viewerWidth / scale ); rangeHeight = Math.ceil( this._viewerHeight / scale ); } this._rangeWidth = rangeWidth; this._rangeHeight = rangeHeight; }, //开始 _start: function() { clearTimeout( this._timer ); var viewer = this._viewer, image = this._image, scale = this._scale; viewer.style.display = "block"; this._onstart(); this.onStart(); $$E.removeEvent( image, "mouseover", this._START ); $$E.removeEvent( image, "mousemove", this._START ); $$E.addEvent( document, "mousemove", this._MOVE ); $$E.addEvent( document, "mouseout", this._OUT ); this.mouse && $$E.addEvent( document, $$B.firefox ? "DOMMouseScroll" : "mousewheel", this._MOUSE ); }, //移动 _move: function(e) { clearTimeout( this._timer ); var x = e.pageX, y = e.pageY, rect = this._rect; if ( x < rect.left || x > rect.right || y < rect.top || y > rect.bottom ) { this._END();//移出原图范围 } else { var zoom = this._zoom, pos = this._repair( x - rect.left - this._repairLeft, y - rect.top - this._repairTop ); this._onmove( e, pos ); //设置定位 zoom.style.left = pos.left + "px"; zoom.style.top = pos.top + "px"; this.onMove(); } }, //修正坐标 _repair: function(x, y) { var scale = this._scale, zoom = this._zoom, viewerWidth = this._viewerWidth, viewerHeight = this._viewerHeight; //修正坐标 x = Math.ceil( viewerWidth / 2 - x * scale ); y = Math.ceil( viewerHeight / 2 - y * scale ); //范围限制 x = Math.min( Math.max( x, viewerWidth - zoom.width ), 0 ); y = Math.min( Math.max( y, viewerHeight - zoom.height ), 0 ); return { left: x, top: y }; }, //结束 _end: function() { this._onend(); this.onEnd(); if ( this.autoHide ) { this._viewer.style.display = "none"; } this.stop(); this.start(); }, //鼠标缩放 _mouse: function(e) { this._scale += ( e.wheelDelta ? e.wheelDelta / (-120) : (e.detail || 0) / 3 ) * this.rate; var opt = this.options; this._rangeWidth = opt.rangeWidth; this._rangeHeight = opt.rangeHeight; this._initSize(); this._initData(); this._move(e); e.preventDefault(); }, //开始 start: function() { if ( this._viewerWidth && this._viewerHeight ) { var image = this._image, START = this._START; $$E.addEvent( image, "mouseover", START ); $$E.addEvent( image, "mousemove", START ); } }, //停止 stop: function() { clearTimeout( this._timer ); $$E.removeEvent( this._image, "mouseover", this._START ); $$E.removeEvent( this._image, "mousemove", this._START ); $$E.removeEvent( document, "mousemove", this._MOVE ); $$E.removeEvent( document, "mouseout", this._OUT ); $$E.removeEvent( document, $$B.firefox ? "DOMMouseScroll" : "mousewheel", this._MOUSE ); }, //修改设置 reset: function(options) { this.stop(); var viewer = this._viewer, zoom = this._zoom; if ( $$D.contains( viewer, zoom ) ) { viewer.removeChild( zoom ); } var opt = $$.extend( this.options, options || {} ); this._scale = opt.scale; this._max = opt.max; this._min = opt.min; this._originPic = opt.originPic; this._zoomPic = opt.zoomPic; this._rangeWidth = opt.rangeWidth; this._rangeHeight = opt.rangeHeight; //重置属性 this._loaded = this._substitute = false; this._rect = null; this._repairLeft = this._repairTop = this._viewerWidth = this._viewerHeight = 0; this._initLoad(); }, //销毁程序 dispose: function() { this._ondispose(); this.stop(); if ( $$D.contains( this._viewer, this._zoom ) ) { this._viewer.removeChild( this._zoom ); } this._image.onload = this._preload.onload = this._image = this._preload = this._zoom = this._viewer = this.onLoad = this.onStart = this.onMove = this.onEnd = this._START = this._MOVE = this._END = this._OUT = null } } </script>
按大图放大
放大2倍
放大5倍
放大10倍
原图:
大图:
<script> var iz = new ImageZoom( "idImage", "idViewer", { onLoad: function(){ $$("idStop").value = "暂停"; } } ); $$("idScale").onchange = function(){ iz.reset({ scale: this.value | 0 }); } $$("idChange").onclick = function(){ iz.reset({ scale: 5, originPic: $$("idChangeOrigin").value, zoomPic: $$("idChangeZoom").value }); $$("idScale").selectedIndex = 2; } $$("idChangeReturn").onclick = function(){ iz.reset({ originPic: "http://filesimg.111cn.net/2010/03/20100404073512391.jpg", zoomPic: "" }); } $$("idRange").onclick = function(){ if ( this.value == "指定范围" ) { iz.reset({ rangeWidth: 40, rangeHeight: 40 }); this.value = "自动范围"; } else { $$D.setStyle( $$("idViewer"), { width: "", height: "" } ); iz.reset({ rangeWidth: 0, rangeHeight: 0 }); this.value = "指定范围"; } } $$("idHide").onclick = function(){ if ( this.value == "自动隐藏" ) { iz.autoHide = true; this.value = "取消隐藏"; } else { iz.autoHide = false; iz._viewer.style.display = "block"; this.value = "自动隐藏"; } } $$("idMouse").onclick = function(){ if ( this.value == "鼠标缩放" ) { iz.mouse = true; this.value = "取消缩放"; } else { iz.mouse = false; iz.reset({ scale: $$("idScale").value | 0 }); this.value = "鼠标缩放"; } } $$("idStop").onclick = function(){ if ( this.value == "暂停" ) { iz.stop(); this.value = "继续"; } else { iz.start(); this.value = "暂停"; } } </script>
提示:您可以先修改部分代码再运行
本文来源:
http://www.gdgbn.com/bangongshuma/24021/
上一篇:
json|js chrome i6 ie浏览器判断代码
下一篇:
[兼容多浏览器]兼容多浏览左右浮动广告代码
相关推荐
phpstudy|php 简单生成html文件类
将指定的记录生成excel文件格式|将指定的记录生成excel文件
asp.net_asp 查询数据库所有表中存在某个字符串
[php中几种方法]php中几种常见安全设置详解
[ie6下如何实现png背景透明度]ie6下如何实现png背景透明
ajax php函数_ajax+php 无刷新数据调用经典实例
[excel批量导入图片]将excel中的数据批量导入到access
[asp是什么意思]asp无限级分类支持js收缩伸展
【cookies可以清理吗】用cookies友情链接作弊方法
免费的_免费1g全能网站空间
网友关注
asp.net|asp 曲线图生成实例代码
asp生成静态页面|asp生成静态页面文件代码
select 默认选中_select 添加 删除多选框js代码
[站长如何赚钱]站长如何充分利用友情链接平台做外链
[fckeditor 漏洞]FCKeditor 如何清除内容代码
【类似google提示框】类似google提示那种上下方向键
[asp提交订单代码]纯ASP代码生成图表函数-柱状图
[mysql下载]MySQL 缓存 Query Cache
【http 长连接】如何减少http连接提升体验
【asp.net core】asp.net 获取Datalist Checkbox的值程序
热门标签
浏览器怎么设置兼容模式
ie浏览器兼容模式
最新浏览器
浏览器
phpstudy_php cookies 删除,赋值方法
浏览器
ie60|IE6究竟支不支持!important分析
浏览器
简单的可行性报告 范文_简单的可见即所得的CSS编辑器
浏览器
[css超出部分省略号]css dispay:inline-block在不同浏览器用法分析
浏览器
[ie60]ie6 position约对定位错位解决办法
浏览器
css超出部分省略号|css IE6 position:fixed (固定定位)通过position:absolute的解决方案
浏览器
css圆角背景与三角形|CSS圆角背景与三角形实现技巧
浏览器
javascript学习指南|javascript 浏览器类型及版本信息检测代码
浏览器
利用病毒|利用bindEvent() unBindEvent()检测用户浏览器类型
浏览器
将百度设为首页桌面|设为首页与添加收藏夹代码【兼容多浏览器】
浏览器热门文章
浏览器
[兼容多浏览器]兼容多浏览左右浮动广告代码
浏览器
【js浏览器兼容】js多兼容全选/反选代码
浏览器
json_js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome
浏览器
[css超出部分省略号]css hack定义兼容多浏览器ie6,ie7,ie8.firefox
浏览器
百度和谷歌的对比_百度和谷歌对垃圾链接的处罚对比
浏览器
【javascript学习指南】javascript 兼容各浏览器的动画效果
浏览器
【settimeout和setinterval区别】setTimeout与setInterval在不同浏览器下的差异
浏览器
[高性钙b12功能是什么]编写高性能的JavaScript 脚本的加载与执行
浏览器
【百度和谷歌的对比】百度和谷歌的差别
浏览器
phpstudy_php 解决各种应用的乱码问题
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
Copyright©2006-2019 编程学习网 www.gdgbn.com 版权所有