xml地图|网站地图|网站标签 [设为首页] [加入收藏]

美高梅游戏网站

当前位置:美高梅游戏网站 > 美高梅游戏网站 > 美高梅棋牌用HTML5和原生js实现放大局部图片

美高梅棋牌用HTML5和原生js实现放大局部图片

来源:http://www.gd-chuangmei.com 作者:美高梅游戏网站 时间:2019-09-05 00:32

当ddpowerzoomer.js加载前,必须在页面导入jquery.xx.js,之后再导ddpowerzoomer.js

drawImage方法

context.drawImage(image,sx,sy,sh,dx,dy,dw,dh)

sxsy起始图像的横纵坐标,shsd起始图像的大小,dxdy复制图像的横纵坐标,dwdy复制图像的大小

下面我们用这个属性来做一个点击局部放大效果

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        var context;
        var canvas;
        var iMouseX, iMouseY = 1;
        var image;
       //绘制区域
        window.onload = function() {

            function draw(id){
                canvas = document.getElementById(id);
                if(canvas == null)
                    return false;
                context = canvas.getContext('2d');
                context.fillStyle = "#eeeeff";
                context.fillRect(0,0,400,300);
                //一边装载,一边绘制
                image = new Image();
                image.src = "img/2.png";
                image.onload = function() {
                    drawImg(context,image);
                };
            }
            //将原始图片添加到网页上
            function drawImg(context,image) {
                        context.drawImage(image,0,0,100,100);
            }
            draw('canvas');


         //点击原始图片放大事件 
        canvas.onclick = function(e) {//监听鼠标动作
           iMouseX = Math.floor(e.pageX);  
           iMouseY = Math.floor(e.pageY)-82;  
           context.drawImage(image,iMouseX,iMouseY,57,80,110,0,200,200);
        }
        }        
    </script>
</head>
<body>
    <h1>canvas元素示例</h1>
    <canvas id="canvas" width="400" height="300" ></canvas>
</body>
</html>

下面只讲ddpowerzoomer.js源码加载执行过程

1.文件第一行

jQuery.noConflict()  //防止jQuery冲突
2.文件末行
jQuery(document).ready(function($){ //initialize power zoomer on DOM load
ddpowerzoomer.init($)

})//当ddpowerzoomer.js所在文档加载完成后,执行这一行,初始化用于放大局部图片的dom节点(具体过程见下面)

 

init:function($){

var $magnifier=$('<div style="position:absolute;width:100px;height:100px;display:none;overflow:hidden;border:1px solid black;" />')//第一个div用于控制局部图片的移动
.append('<div style="position:relative;left:0;top:0;" />')//第二个div 用于存放放大后图片,以及控制该图片的移动
.appendTo(document.body) //将以上两个div添加到html文档内
ddpowerzoomer.$magnifier={outer:$magnifier, inner:$magnifier.find('div:eq(0)'), image:null} //初始化ddpowerzoomer.$magnifier,其中$magnifier,存在局部放大图片所用的所有jquery对象,包含外部的div对象,内部的div对象,以及内部div对象里边存放的图片
$magnifier=ddpowerzoomer.$magnifier
$(document).unbind('mousemove.trackmagnifier').bind('mousemove.trackmagnifier', function(e){ //为文档添加 鼠标移动(mousemove.trackmagnifier) 事件
if (ddpowerzoomer.activeimage){//当鼠标移动到大图片内部时,activeimage不为null
ddpowerzoomer.movemagnifier(e, true)//添加移动事件
}
})

$magnifier.outer.bind(ddpowerzoomer.mousewheelevt, function(e){ //为外层div添加  鼠标滚动(FF:DOMMouseScroll;IE:mousewheel) 事件
if (ddpowerzoomer.activeimage){
var delta=e.detail? e.detail*(-120) : e.wheelDelta //鼠标向上滚动 返回+120 鼠标向下滚动 -120
if (delta<=-120){ //zoom out
ddpowerzoomer.movemagnifier(e, false, "out")
}
else{ //zoom in
ddpowerzoomer.movemagnifier(e, false, "in")
}
e.preventDefault() //相当于return false;防止事件往父元素传,在这里是指待放大的图片。
}
})
}

3.jQuery扩展的实现

jQuery.fn.addpowerzoom=function(options){
var $=jQuery
return this.each(function(){ //return jQuery obj
if (this.tagName!="IMG")
return true //skip to next matched element
var $imgref=$(this)
if (this.offsetWidth>0 && this.offsetHeight>0) //if image has explicit CSS width/height defined
ddpowerzoomer.setupimage($, this, options)
else if (this.complete){ //account for IE not firing image.onload
ddpowerzoomer.setupimage($, this, options)
}
else{
$imgref.bind('load', function(){
ddpowerzoomer.setupimage($, this, options)
})
}
})
} //为某一种类型的jQuery对象节点添加addpowerzoom方法。

//如果jQuery对象节点不是一个图片jquery对象,则返回true,不允处理

//否则,在该图片加载完成后,执行ddpowerzoomer对象的setupimage,传入jquery$,当前图片引用this,以及调用addpowerzoom方法时传入的参数列表options
4.setupimage的实现原理

下面讲一下ddpowerzoomer.setupimage的实现原理

setupimage:function($, imgref, options){
var s=jQuery.extend({}, ddpowerzoomer.dsetting, options)//调用jquery内置方法,将调用addpowerzoom时传入的参数覆盖给ddpowerzoomer.dsetting默认设置

本文由美高梅游戏网站发布于美高梅游戏网站,转载请注明出处:美高梅棋牌用HTML5和原生js实现放大局部图片

关键词:

上一篇:JavaScript及jQuery学习小结

下一篇:没有了