- 注册时间
- 2010-11-11
- 最后登录
- 2025-5-27
- 阅读权限
- 200
- 积分
- 14361
- 精华
- 2
- 帖子
- 843
  

TA的每日心情 | 无聊 2025-5-27 03:37:20 |
---|
签到天数: 366 天 [LV.9]以坛为家II
我玩的应用:
  
|
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="content-type" content="text/html;charset=gbk" />
- <title>放大镜</title>
- <style>
- .zoomdiv{
- position: absolute;
- background: #ffffff;
- border:1px solid #CCCCCC;
- display:none;
- text-align: center;
- overflow: hidden;
- }
- .zoomup{
- background:#c0c0c0;
- display:none;
- filter:alpha(opacity=50);
- opacity:.5;
- cursor:move;
- position:absolute;
- top:0;
- left:0;
- }
-
- </style>
- </head>
- <body>
- <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>
- <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>
- </body>
- </html>
- <script>
- function zoom(o){
- var d = document,db = document.body,dd = d.documentElement,ie = !+'\v1',div,divup,img = d.getElementById(o.id),loaded=0,timer,
- imgTL=getTL(img),top=imgTL.t,left = imgTL.l,sx,sy,opt = {width:200,height:200,offset:20};
- //创建元素
- function creElm(o,pN,t){
- var tmp = d.createElement(t||'div');
- for(var p in o){
- tmp[p] = o[p];
- }
- return pN?pN.appendChild(tmp):db.appendChild(tmp);
- };
- //得带元素偏移量
- function getTL(el){
- var b = el.getBoundingClientRect();
- //html4.01解析用db
- return {
- 'l': b.left + dd.scrollLeft - dd.clientLeft,
- 't': b.top + dd.scrollTop - dd.clientTop
- }
- };
- function extend(t,s){
- for(var p in s){
- t[p] = s[p];
- };
- };
- //离开时清掉
- function leave(){
- //清理mouseover上的时间戳
- clearTimeout(timer);
- div.style.display = divup.style.display = 'none';
- ie?db.detachEvent('onmousemove',move):db.removeEventListener('mousemove',move,false)
- };
- function move(e){
- var e = e || event,x=e.pageX||e.clientX+dd.scrollLeft,y=e.pageY||e.clientY+dd.scrollTop,
- scrolly = y - divup.offsetHeight/2 - top,scrollx = x - divup.offsetWidth/2 - left;
- scrolly = y - divup.offsetHeight/2 < top ? 0 : y + divup.offsetHeight/2>img.height+top ? img.height - divup.offsetHeight : scrolly;
- scrollx = x - divup.offsetWidth/2 < left ? 0 : x + divup.offsetWidth/2>img.width+left ? img.width - divup.offsetWidth : scrollx;
- div.scrollTop = scrolly*sy;div.scrollLeft = scrollx*sx;
- extend(divup.style,{top:scrolly+'px',left:scrollx+'px'});
- }
- if(img){
- extend(opt,o);
- //创建大图的容器
- div = creElm({className:'zoomdiv'});
- //创建在小图上的浮层
- divup = creElm({className:'zoomup'},img.parentNode);
- creElm({onload:function(){
- //ie下隐藏时width/height看不到问题
- div.style.display = 'block'
- var bwidth = this.width,bheight = this.height;
- //大图和小图的比例
- sx = bwidth/img.width,sy = bheight/img.height;
- extend(divup.style,{
- width:opt.width/sx+'px',
- height:opt.height/sy+'px'
- })
- extend(div.style,{
- left:(!opt.float?opt.offset+img.width+left:left-opt.offset-opt.width) +'px',
- top:top+'px',
- width:opt.width+'px',
- height:opt.height+'px',
- display:'none'
- });
- loaded = 1;
- },src:opt.bigUrl},div,'img');
- img.onmouseover = function(){
- if(loaded){
- div.style.display = divup.style.display = 'block';
- ie?db.attachEvent('onmousemove',move):db.addEventListener('mousemove',move,false);
- }else{
- timer = setTimeout(arguments.callee,100);
- }
-
- };
- img.parentNode[ie?'onmouseleave':'onmouseout'] = ie?leave:function(e){
- !(this===e.relatedTarget||(this.contains?this.contains(e.relatedTarget):this.compareDocumentPosition(e.relatedTarget)==20))&&leave();
- }
- }
-
- }
- /*
- width 大图的宽 可选 默认200
- height 大图的高 可选 默认200
- bigUrl 大图的url 必须的
- id 小图的id 必须的
- float 左边还是右边显示 可选 默认的是右边 'right' or 'left'
- offset 大图距离小图的偏移量 可选 默认20
- */
- zoom({
- id:'small',
- bigUrl:'HTTP://www.aspxhome.com/article/UploadPic/20108/2/shoe2_big-99.jpg',
- offset:50
- });
- zoom({
- id:'small1',
- bigUrl:'HTTP://www.aspxhome.com/article/UploadPic/20108/2/big-28.jpg',
- float:'left',
- width:300,
- height:300
- });
-
- </script>
复制代码
|
|