设为首页收藏本站

就爱编程论坛

 找回密码
 注册

人人连接登陆

无需注册,直接登录

用新浪微博连接

一步搞定

QQ登录

只需一步,快速开始

查看: 481|回复: 0
打印 上一主题 下一主题

javascript商城图片放大镜效果 [复制链接]

Rank: 9Rank: 9Rank: 9

  • TA的每日心情
    无聊
    2025-5-27 03:37:20
  • 签到天数: 366 天

    [LV.9]以坛为家II

    论坛先锋 学习至圣 荣誉成员 论坛元老 活跃之星 终极领袖

    我玩的应用:

    跳转到指定楼层
    楼主
    发表于 2011-6-10 22:44:09 |只看该作者 |倒序浏览
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4.   <meta http-equiv="content-type" content="text/html;charset=gbk" />
    5.   <title>放大镜</title>
    6.   <style>
    7. .zoomdiv{
    8.   position: absolute;
    9.   background: #ffffff;
    10.   border:1px solid #CCCCCC;
    11.   display:none;
    12.   text-align: center;
    13.   overflow: hidden;
    14.    }
    15. .zoomup{
    16.   background:#c0c0c0;
    17.   display:none;
    18.   filter:alpha(opacity=50);
    19.   opacity:.5;
    20.   cursor:move;
    21.   position:absolute;
    22.   top:0;
    23.   left:0;
    24. }

    25.   </style>
    26. </head>
    27. <body>
    28. <div style="position:absolute;border:1px solid #c0c0c0;left:50px;"><img  src="HTTP://www.aspxhome.com/article/UploadPic/20108/2/shoe2_small-69.jpg"  id="small"/></div>
    29. <div style="position:absolute;border:1px solid #c0c0c0;left:600px;"><img  src="HTTP://www.aspxhome.com/article/UploadPic/20108/2/small-84.jpg"  id="small1"/></div>
    30. </body>
    31. </html>
    32. <script>
    33.    function zoom(o){
    34.   var d = document,db = document.body,dd = d.documentElement,ie = !+'\v1',div,divup,img = d.getElementById(o.id),loaded=0,timer,
    35.     imgTL=getTL(img),top=imgTL.t,left = imgTL.l,sx,sy,opt = {width:200,height:200,offset:20};
    36.   //创建元素
    37.   function creElm(o,pN,t){
    38.    var tmp = d.createElement(t||'div');
    39.    for(var p in o){
    40.     tmp[p] = o[p];
    41.    }
    42.    return pN?pN.appendChild(tmp):db.appendChild(tmp);
    43.   };
    44.   //得带元素偏移量
    45.   function getTL(el){
    46.    var b = el.getBoundingClientRect();
    47.    //html4.01解析用db
    48.    return {
    49.     'l': b.left + dd.scrollLeft - dd.clientLeft,
    50.     't': b.top + dd.scrollTop - dd.clientTop
    51.    }
    52.   };
    53.   function extend(t,s){
    54.    for(var p in s){
    55.     t[p] = s[p];
    56.    };
    57.   };
    58.   //离开时清掉
    59.   function leave(){
    60.    //清理mouseover上的时间戳
    61.    clearTimeout(timer);
    62.    div.style.display = divup.style.display = 'none';
    63.    ie?db.detachEvent('onmousemove',move):db.removeEventListener('mousemove',move,false)
    64.   };
    65.   function move(e){
    66.    var e = e || event,x=e.pageX||e.clientX+dd.scrollLeft,y=e.pageY||e.clientY+dd.scrollTop,
    67.     scrolly = y - divup.offsetHeight/2 - top,scrollx = x - divup.offsetWidth/2 - left;
    68.    scrolly = y - divup.offsetHeight/2 < top ? 0 : y + divup.offsetHeight/2>img.height+top ? img.height - divup.offsetHeight  : scrolly;
    69.    scrollx = x - divup.offsetWidth/2 < left ? 0 : x + divup.offsetWidth/2>img.width+left ? img.width - divup.offsetWidth  : scrollx;
    70.    div.scrollTop = scrolly*sy;div.scrollLeft =  scrollx*sx;
    71.    extend(divup.style,{top:scrolly+'px',left:scrollx+'px'});
    72.   }
    73.   if(img){
    74.    extend(opt,o);
    75.    //创建大图的容器
    76.    div = creElm({className:'zoomdiv'});
    77.    //创建在小图上的浮层
    78.    divup = creElm({className:'zoomup'},img.parentNode);
    79.    creElm({onload:function(){
    80.     //ie下隐藏时width/height看不到问题
    81.     div.style.display = 'block'
    82.     var bwidth = this.width,bheight = this.height;
    83.     //大图和小图的比例
    84.     sx = bwidth/img.width,sy = bheight/img.height;
    85.     extend(divup.style,{
    86.      width:opt.width/sx+'px',
    87.      height:opt.height/sy+'px'
    88.     })
    89.     extend(div.style,{
    90.      left:(!opt.float?opt.offset+img.width+left:left-opt.offset-opt.width) +'px',
    91.      top:top+'px',
    92.      width:opt.width+'px',
    93.      height:opt.height+'px',
    94.      display:'none'
    95.     });
    96.     loaded = 1;
    97.    },src:opt.bigUrl},div,'img');
    98.    img.onmouseover = function(){
    99.     if(loaded){
    100.      div.style.display = divup.style.display = 'block';
    101.      ie?db.attachEvent('onmousemove',move):db.addEventListener('mousemove',move,false);
    102.     }else{
    103.      timer = setTimeout(arguments.callee,100);
    104.     }
    105.    
    106.    };
    107.    img.parentNode[ie?'onmouseleave':'onmouseout'] = ie?leave:function(e){
    108.     !(this===e.relatedTarget||(this.contains?this.contains(e.relatedTarget):this.compareDocumentPosition(e.relatedTarget)==20))&&leave();
    109.    }
    110.   }
    111.   
    112.    }
    113.    /*
    114.     width 大图的宽 可选 默认200
    115.     height 大图的高 可选 默认200
    116.     bigUrl 大图的url 必须的
    117.     id 小图的id 必须的
    118.     float 左边还是右边显示 可选 默认的是右边 'right' or 'left'
    119.     offset 大图距离小图的偏移量 可选 默认20
    120.    */
    121. zoom({
    122.   id:'small',
    123.   bigUrl:'HTTP://www.aspxhome.com/article/UploadPic/20108/2/shoe2_big-99.jpg',
    124.   offset:50
    125. });
    126. zoom({
    127.   id:'small1',
    128.   bigUrl:'HTTP://www.aspxhome.com/article/UploadPic/20108/2/big-28.jpg',
    129.   float:'left',
    130.   width:300,
    131.   height:300
    132. });

    133. </script>
    复制代码

    分享到: QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    分享分享0 收藏收藏0 支持支持0 反对反对0 分享到人人 转发到微博
    [img=http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=fRUcHhYWGAQ9GxIFEBwUEVMeEhA]http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png[/img]

    使用道具 举报

    您需要登录后才可以回帖 登录 | 注册 人人连接登陆

    晴云孤魂's Blog|就爱编程搜帖|手机版|Archiver|就爱编程论坛     

    GMT+8, 2025-7-2 13:39 , Processed in 0.182717 second(s), 26 queries .

    Powered by Discuz! X2

    © 2001-2011 Comsenz Inc.

    回顶部