zoukankan      html  css  js  c++  java
  • 图片放大镜

    <style type="text/css">
    .img_warp {318px; _height:199px; _overflow:hidden; border:1px solid #ccc;padding:0px;margin-left:0px; margin-top:0px; position:absolute;top:0px; left:0px;}
    .img_warp{position:relative;top:0px; left:0px;/*cursor:crosshair*/}
    .img_warp .current{ 318px;height:199px}
    </style>
    <script type="text/javascript">
    var $E = function(opts){
    function _(objId){return (typeof objId === "string")?document.getElementById(objId):objId;}
    var beImg,expand,clip,cover,warp,expImg;
    var clipWidth,clipHeight;
    var closeTimeId = null;
    var mult = 1; //图片放大倍数,根据裁剪框和放大后图片容器的大小自动调整
    //init
    (function(){
    beImg = _(opts.berviary);
    warp = beImg.parentNode;

    cover = document.createElement("div");
    warp.appendChild(cover);
    cover.style.position = "absolute";
    cover.style.top = "0px";
    cover.style.left = "0px";
    cover.style.backgroundColor = "#ccc";
    var opac = parseFloat(opts.opacity) || 0.3;
    cover.style.opacity = opac;
    cover.style.filter = "Alpha(Opacity=" + opac * 100 + ")";
    cover.style.width = "100%";
    cover.style.height = "100%";
    cover.style.zIndex = 2;
    cover.style.visibility = "hidden";

    clip = document.createElement("img");
    warp.appendChild(clip);

    clipWidth = (opts.clip && opts.clip.width) || "60px";
    clipHeight = (opts.clip && opts.clip.height) || "60px";

    clip.src = beImg.src;
    clip.className = beImg.className;
    clip.style.position = "absolute";
    clip.style.top = "0px";
    clip.style.left = "0px";
    clip.style.clip = "rect(0px," + clipWidth + "," + clipHeight + ",0px)";
    clip.style.backgroundColor = "#ccc";
    clip.style.zIndex = 3;

    //ie里面会变态的自动设置宽度和高度
    clip.removeAttribute("width");
    clip.removeAttribute("height");
    })();

    function layerPos(e){
    if(e.layerX && e.layerY){
    return {x:e.layerX,y:e.layerY};
    } else {
    return {x:e.x,y:e.y};
    }
    }

    function absolutePos(e){
    if(e.pageX && e.pageY){
    return {x:e.pageX,y:e.pageY};
    } else {
    var x = e.clientX + (document.documentElement.scrollLeft?document.documentElement.scrollLeft : document.body.scrollLeft);
    var y = e.clientY + (document.documentElement.scrollTop?document.documentElement.scrollTop : document.body.scrollTop);
    return {x:x,y:y};
    }
    }

    var showExpand = function(x,y,e){
    if(!expand){
    initExpand();
    }

    expImg.style.left = (-1 * x) * mult + "px";
    expImg.style.top = (-1 * y ) * mult + "px";

    if((!opts.expand) || (!opts.expand.id)){
    var aPos = absolutePos(e);
    expand.style.left = aPos.x + parseFloat(clipWidth) / 2 + 20 + "px";
    expand.style.top = aPos.y + "px";
    }

    //初始化放大的div
    function initExpand(){
    if(opts.expand && opts.expand.id) {
    expand = _(opts.expand.id);
    } else {
    expand = document.createElement("div");
    if(opts.expand && opts.expand.style){
    for(var p in opts.expand.style){
    expand.style[p] = opts.expand.style[p];
    }
    }
    expand.style.border = "1px solid #000";

    expand.style.position = "absolute";
    expand.style.left ="0";
    expand.style.right = "0";
    expand.style.display = "block";
    document.body.appendChild(expand);

    if(clip.clientWidth>clip.clientHeight){
    expand.style.width = clip.clientWidth + "px";
    expand.style.height = clip.clientWidth * parseFloat(clipHeight) / parseFloat(clipWidth) + "px";
    } else {
    expand.style.height = clip.clientHeight + "px";
    expand.style.width = clip.clientHeight * parseFloat(clipWidth) / parseFloat(clipHeight) + "px";
    }
    expand.style.zIndex = 4;
    }

    expand.style.overflow = "hidden";
    if((expand.style.position != "relative") && (expand.style.position != "absolute")){
    //变态的ie6和ie7的img如果为relative,需要设置其父节点也为relative,否则overflow:hidden无效
    expand.style.position = "relative";
    expand.style.left = "0";
    expand.style.top = "0";
    }
    expImg = document.createElement("img");
    expImg.src = beImg.src;
    expImg.style.position = "relative";
    expImg.style.left = "0px";
    expImg.style.top = "0px";
    expand.appendChild(expImg);
    expImg.removeAttribute("width");
    expImg.removeAttribute("height");

    //计算图片放大的倍数
    var ew = expand.clientWidth;
    var eh = expand.clientHeight;
    var cw = parseFloat(clipWidth);
    var ch = parseFloat(clipHeight);
    mult = (ew/cw < eh/ch) ? ew/cw : eh/ch;

    //调整放大图片的大小
    expImg.style.width = beImg.clientWidth * mult + "px";
    expImg.style.height = beImg.clientHeight * mult + "px";
    }

    }

    cover.onmousemove = clip.onmousemove = function(e){
    var e = e || event;
    var pos = layerPos(e);
    var x = pos.x;
    var y = pos.y;
    //判断x和y坐标有没有超出范围
    var w = parseFloat(clipWidth) / 2,h = parseFloat(clipHeight) / 2;

    x = (x < w)?w:x;
    y = (y < h)?h:y;
    x = (x > warp.clientWidth - w) ? (warp.clientWidth - w) : x;
    y = (y > warp.clientHeight - h) ? (warp.clientHeight - h) : y;
    clip.style.clip = "rect(" + (y - h) + "px," + (x + w) + "px," + (y + h) + "px," + (x - w) + "px)";
    showExpand(x - w,y - h,e);
    }
    warp.onmouseover = cover.onmouseover = clip.onmouseover = function(){
    //如果清除的定时器存在,则删除.
    if(closeTimeId){
    clearTimeout(closeTimeId);
    closeTimeId = null;
    }
    if(cover.style.visibility === "hidden"){
    cover.style.visibility = "visible";
    }
    if(expand && expand.style.display === "none"){
    expand.style.display = "block";
    }
    }

    warp.onmouseout = function(){
    //延迟一定时间后清除
    closeTimeId = setTimeout(function(){
    cover.style.visibility = "hidden";

    if((!opts.expand) || (!opts.expand.id)){
    expand.style.display = "none";
    }
    },130);
    }

    return {
    clear:function(){
    //在这里清除放大镜效果
    warp.removeChild(clip);
    warp.removeChild(cover);
    warp.onmouseout = null;
    if((!opts.expand) || (!opts.expand.id)){
    expand.style.display = "none";
    }
    }
    }
    }
    </script>
    <div id="img_warp" class="img_warp"><img  id="currentPic1" class="current" border="0" alt="" src="/get_pic/2010/03/20100810115815250.jpg" width="1280" height="800" /> </div>
    <div style="border-bottom: #555 1px solid; border-left: #555 1px solid; margin: -200px 0px 0px 400px; 400px; height: 400px; overflow: hidden; border-top: #555 1px solid; border-right: #555 1px solid" id="expand" class="expand"></div>
    </div>
    <script type="text/javascript">$E({berviary:"currentPic1",expand:{id:"expand",style:{}},clip:{"50px",height:"50px"},opacity:"0.2"});</script>

  • 相关阅读:
    浅拷贝与深拷贝的实现
    Java批量下载生成zip文件
    jsp页面内容导出到Excel中
    Table动态增加删除行
    JavaScript校验日期格式
    java实现算术表达式求值
    XCode 4 编译错误大全整理
    VMWare安装黑苹果Mac OS
    ODA(Open Design Alliance)介绍
    AutoCAD 2010 开发与之前版本的区别
  • 原文地址:https://www.cnblogs.com/glj1203/p/3101627.html
Copyright © 2011-2022 走看看