jquery 商品图片放大效果

最新推荐文章于 2021-08-04 17:50:44 发布

zhangchong_dk

最新推荐文章于 2021-08-04 17:50:44 发布

阅读量834

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/zhangchong_dk/article/details/25224911

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

商品图片放大效果

写的有点烂，欢迎各位大虾批评指正

先来张效果图

html

<!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" xml:lang="zh" lang="zh" dir="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="./js/magnify.jquery.js"></script>
    <title>jQuery 商品图片放大</title>
    <style>
        .box{width:300px; height:300px; overflow:hidden; border:1px solid #666;}
    </style>
</head>
<body>
    <div class="box">
        <img data-big="images/3.jpg" src="images/3-1.jpg" />
    </div>
</body>
</html>

调用：

<script type="text/javascript">
    $('.box').magnify({
        //width:500,        //显示大图容器的宽度        默认缩略图容器的宽度
        //height:400,       //显示大图容器的高度        默认缩略图容器的高度
        //color:'#ff00ff',  //选中区域蒙板背景颜色      默认白色（#fff）
        //opacity:0.3,      //选中区域蒙板透明度（0-1） 默认0.5
        //showDivTop:0,     //显示大图容器的Top偏移量   默认0
        //showDivLeft:0     //显示大图容器的Left偏移量  默认0
    });
</script>

magnify.jquery.js

(function($) {
    $.fn.magnify=(function(options) {
        var _this = $(this);
        var _param = {width:_this.width(),height:_this.height(),color:'#fff',opacity:0.5,showDivTop:0,showDivLeft:0};
        $.extend(_param,options);
        _this.find('img').load(function() {
            $('.magnify_img_div').remove();
            var _img = $(this);
            var _ratio = (_img.width() >= _img.height()) ? true : false;
            if(_img.width() > _this.width() && _ratio) _img.width(_this.width());
            else if(_img.height() > _this.height() && !_ratio) _img.height(_this.height());
            _img.css({'margin-top':(_this.height()-_img.height())/2,'margin-left':(_this.width()-_img.width())/2,'cursor':'move'});
            var _div = $('<div></div>').addClass('magnify_img_div').css({'position':'absolute',width:_param.width/3, height:_param.height/3,'background-color':_param.color,'opacity':_param.opacity,'cursor':'move'}).appendTo(_this).hide();
            var _show_div = $('<div></div>').addClass('magnify_img_div').css({width:_param.width,height:_param.height,padding:0,'position': 'absolute',top:_this.offset().top+_param.showDivTop,left:_this.offset().left+_this.outerHeight()+10+_param.showDivLeft, 'background-color':'#fff','overflow':'hidden','border':'1px solid #ccc'}).html('<img src="'+_img.attr('data-big')+'" />').appendTo($('body')).hide();
            _this.mousemove(function(e) {
                if(_this[0] == e.target) { _div.hide();_show_div.hide();return false;}
                _div.show();_show_div.show();
                var _ra = _show_div.find('img').width()/_img.width();
                var _min_top = _img.offset().top;
                var _min_left = _img.offset().left;
                var _max_top = _img.offset().top+_img.height();
                var _max_left = _img.offset().left+_img.width();
                var _top = e.pageY-_div.outerHeight()/2;
                var _left = e.pageX-_div.outerWidth()/2;
                if(e.pageY < _min_top+_div.outerHeight()/2) _top = _min_top;
                if(e.pageY > _max_top-_div.outerHeight()/2) _top = _max_top-_div.outerHeight();
                if(e.pageX < _min_left+_div.outerWidth()/2) _left = _min_left;
                if(e.pageX > _max_left-_div.outerWidth()/2) _left = _max_left-_div.outerWidth();
                _div.css({top:_top,left:_left,width:_param.width/_ra,height:_param.height/_ra});
                if(_param.width > _show_div.find('img').width()) {
                    _div.css({width:_img.width()});_show_div.css({width:_show_div.find('img').width()});
                }
                if(_param.height > _show_div.find('img').height()) {
                    _div.css({height:_img.height()});_show_div.css({height:_show_div.find('img').height()});
                }
                _show_div.find('img').css({'margin-top':'-'+(_div.offset().top-_img.offset().top)*_ra+'px','margin-left':'-'+(_div.offset().left-_img.offset().left)*_ra+'px'});
            }).mouseout(function() { _div.hide(); _show_div.hide();});
        });
    });
})(jQuery);

要先加载jquery库