用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

用Aui-core实现图片放大镜预览js特效(仿京东商城商品放大预览)

2013-01-19 作者: 小蜜锋举报

[javascript]代码库

<!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>
<link href="css/base.css" type="text/css"  rel="stylesheet" media="all" />
<style>
#demo {
    margin:0 auto;
    width:350px;
}
#wraper {
    position:relative;
    width:350px;
    height:350px;
    background:#fff url(images/loading.gif) no-repeat center center;
    border:5px solid #fff;
}
#small {
    width:350px;
    height:350px;
    overflow:hidden;
}
#mask {
    display:none;
    position:absolute;
    left:0;
    top:0;
    z-index:2;
    height:100px;
    overflow:hidden;
    width:100px;
    border:1px dashed #999;
    cursor:move;
}
#mask div {
    background:#fff;
    opacity:.4;
filter:alpha(opacity:40);
    height:100px;
}
#big {
    height:400px;
    width:400px;
    position:absolute;
    top:-5px;
    left:370px;
    z-index:1;
    border:5px solid #fff;
    background:#fff url(images/loading.gif) no-repeat center center;
    overflow:hidden;
}
#bg {
    background:black;
    position:absolute;
    left:0;
    top:0;
    height:350px;
    width:350px;
    z-index:1;
    opacity:0;
filter:alpha(opacity:0 );
}
#big img {
    position:absolute;
    left:0;
    top:0;
    z-index:0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用Aui-core实现图片放大镜预览js特效(仿京东商城商品放大预览)</title>
<script src="js/Aui-core-1.42-min.js" language="javascript" type="text/javascript"></script>
<script>
Aui.ready( function()
{
    var oDemo = Aui( "#demo" );
    var opt = {
         
        smallSrc : "http://www.jq-school.com/upload/small.jpg",
        smallWidth : 350,
        smallHeight : 350,
         
        bigSrc : "http://www.jq-school.com/upload/big.jpg",
        bigWidth : 800,
        bigHeight : 800
    };
    var oWin = Aui( window );
    var owraper = Aui( "#wraper" )
    var oSmall = Aui( "#small" );
    var oBig = Aui( "#big" );
    var obg = Aui( "#bg" );
    var oMask = Aui( "#mask" );
     
    var oBigImg = null;
    var oBigImgWidth = opt.bigWidth;
    var oBigImgHeight = opt.bigHeight;
     
    var iBwidth = oBig.width();
    var iBheight = oBig.height();
     
    oBig.setStyle( "display", "none" );
 
    var iTop = owraper.top();
    var iLeft = owraper.left();
    var iWidth = owraper.width();
    var iHeight = owraper.height();
    var iSpeed = 200;
     
    var setOpa = function( o )
    {
        o.style.cssText = "opacity:0;filter:alpha(opacity:0);"
        return o;
    };
 
    var imgs = function( opt )
    {
        if( Aui.typeOf( opt ) !== "object" ) return false;
 
        var oBig = new Image();
 
        oBig.src = opt.bigSrc;
        oBig.width = opt.bigWidth;
        oBig.height = opt.bigHeight;
         
        var oSmall = new Image();
        oSmall.src = opt.smallSrc;
        oSmall.width = opt.smallWidth;
        oSmall.height = opt.smallHeight;
         
        oBigImg = Aui( oBig );
         
        return {
            bigImg : setOpa( oBig ),
            smallImg : setOpa( oSmall )
        };
    };
     
    var append = function( o, img )
    {
        o.append( img );
         
        Aui( img ).fx(
        {
            opacity : 1
        }, iSpeed*2, null , function()
        {
            this.style.cssText = "";
        });
    };
     
    var eventMove = function( e )
    {
        var e = e || window.event;
         
        var w = oMask.width();
        var h = oMask.height();
        var x = e.clientX - iLeft + oWin.scrollLeft() - w/2;
        var y = e.clientY - iTop + oWin.scrollTop() - h/2;
 
        var l = iWidth - w - 10;
        var t = iHeight - h - 10;
 
        if( x < 0 )
        {
            x = 0; 
        }
        else if( x > l )
        {
            x = l;
        };
         
        if( y < 0 )
        {
            y = 0; 
        }
        else if( y > t )
        {
            y = t;
        };
 
        oMask.setStyle(
        {
            left : x < 0 ? 0 : x > l ? l : x,
            top : y < 0 ? 0 : y > t ? t : y
        });
         
        var bigX = x / ( iWidth - w );
        var bigY = y / ( iHeight - h );
         
        oBigImg.setStyle(
        {
            left : bigX * ( iBwidth - oBigImgWidth ),
            top : bigY * ( iBheight - oBigImgHeight )
        });
 
        return false;
    };
     
    var eventOver = function()
    {
        oMask.show();
        obg.stop()
            .fx(
            {
                opacity : .1
            }, iSpeed );
        oBig.show()
            .stop()
            .fx(
            {
                opacity : 1
            }, iSpeed/2 );
         
        return false;
    };
     
    var eventOut = function()
    {
        oMask.hide();
        obg.stop()
            .fx(
            {
                opacity : 0
            }, iSpeed/2);
             
        oBig.stop()
            .fx(
            {
                opacity : 0
            }, iSpeed, null, function()
            {
                Aui( this ).hide();
            });
         
        return false;
    };
     
    var _init = function( object, oB, oS, callback )
    {
        var num = 0;
         
        oBig.setStyle( "opacity",0 );
         
        append( oB, object.bigImg );
        append( oS, object.smallImg );
         
        object.bigImg.onload = function()
        {
            num += 1;
             
            if( num === 2 )
            {
                callback.call( object.smallImg );
            };
        };
         
        object.smallImg.onload = function()
        {
            num += 1;
             
            if( num === 2 )
            {
                callback.call( object.smallImg );
            };
        };
    };
     
    // 初始化  继续写
    _init( imgs( opt ), oBig, oSmall, function()
    {
        //绑定事件
        oWin.resize( function()
        {
            iTop = owraper.top();
            iLeft = owraper.left();
            iWidth = owraper.width();
            iHeight = owraper.height();
 
        });
        oSmall.hover( eventOver, eventOut )
              .mousemove( eventMove );
    });
});
</script>
</head>
 
<body>
<h1>Adam ' Aui 放大镜 DEMO( 鼠标移到图片上试试 )</h1>
<div id="demo">
  <div id="wraper">
    <div id="small"> <span id="mask">
      <div></div>
      </span> <samp id="bg"></samp> </div>
    <div id="big"> </div>
  </div>
</div>
</body>
</html>

[代码运行效果截图]


用Aui-core实现图片放大镜预览js特效(仿京东商城商品放大预览)

[源代码打包下载]




网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...