js图片放大效果

var Multiples = 2;//定义图片放大倍数

var pltsPop=null;

var pltsoffsetX = 15;

var pltsoffsetY = 25;

var pltsPopbg="#ffffee";

var pltsPopfg="#111111";

var pltsTitle="";

document.write(' <div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"> </div>');

function pltsinits()

{

    document.οnmοuseοver= plts;

    document.onmousemove = moveToMouseLoc;

}

function plts()

{  var o=event.srcElement;

    if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};

    if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};

    pltsPop=o.dypop;

    if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")

    {

    pltsTipLayer.style.left=-1000;

    pltsTipLayer.style.display='';

    var Msg=pltsPop.replace(//n/g," <br>");

    Msg=Msg.replace(//0x13/g," <br>");

    var re=//{(.[^/{]*)/}/ig;

    if(!re.test(Msg))pltsTitle="";

    else{

      re=//{(.[^/{]*)/}(.*)/ig;

        pltsTitle=Msg.replace(re,"$1")+"&nbsp;";

      re=//{(.[^/{]*)/}/ig;

      Msg=Msg.replace(re,"");

      Msg=Msg.replace(" <br>","");}

      var attr=(document.location.toString().toLowerCase().indexOf("list.asp")>0?"nowrap":"");

          var content =

          ' <table  id=toolTipTalbe border=0> <tr> <td width="100%"> <table class=selet_bg cellspacing="0" cellpadding="0" style="width:100%" style="font size:9pt;">'+

          ' <tr id=pltsPoptop> <th height=12 valign=bottom class=header> <p id=topleft align=left>'+pltsTitle+' </p> <p id=topright align=right style="display:none">'+pltsTitle+' </font> </th> </tr>'+

          ' <tr> <td "+attr+" class=f_one style="padding-left:10px;padding-right:10px;padding-top: 4px;padding-bottom:4px;line-height:135%">'+Msg+' </td> </tr>'+

          ' <tr id=pltsPopbot style="display:none"> <th height=12 valign=bottom class=header> <p id=botleft align=left>'+pltsTitle+' </p> <p id=botright align=right style="display:none">'+pltsTitle+' </font> </th> </tr>'+

          ' </table> </td> </tr> </table>';

          pltsTipLayer.innerHTML=content;

          toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);

          moveToMouseLoc();

          return true;

      }

    else

    {

        pltsTipLayer.innerHTML='';

          pltsTipLayer.style.display='none';

          return true;

    }

}

 

function moveToMouseLoc()

{

    if(pltsTipLayer.innerHTML=='')return true;

    var MouseX=event.x;

    var MouseY=event.y;

    //window.status=event.y;

    var popHeight=pltsTipLayer.clientHeight;

    var popWidth=pltsTipLayer.clientWidth;

    if(MouseY+pltsoffsetY+popHeight>document.body.scrollHeight)

    {

          popTopAdjust=-popHeight-pltsoffsetY*1.5;

          pltsPoptop.style.display="none";

          pltsPopbot.style.display="";

    }

    else

    {

          popTopAdjust=0;

          pltsPoptop.style.display="";

          pltsPopbot.style.display="none";

    }

    if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)

    {

        popLeftAdjust=-popWidth-pltsoffsetX*2;

        topleft.style.display="none";

        botleft.style.display="none";

        topright.style.display="";

        botright.style.display="";

    }

    else

    {

        popLeftAdjust=0;

        topleft.style.display="";

        botleft.style.display="";

        topright.style.display="none";

        botright.style.display="none";

    }

    pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust+30; //放大图片左边位置

    pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust+200; //放大图片上边位置

      return true;

}

pltsinits();

 

var object=document.getElementsByTagName("img");

for(var i =0;i<object.length;i++)

{

  var iHTML= object[i].src;

 var iWidth = parseInt(object[i].width)*parseInt(Multiples);

 var iHeight = parseInt(object[i].height)*parseInt(Multiples);

  object[i].alt ="<img src="+ object[i].src + " width="+iWidth+"px height="+iHeight+"px />";

}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值