首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >$.extend()插件(放大镜)

$.extend()插件(放大镜)

作者头像
天天_哥
发布2018-09-29 14:02:49
1.2K0
发布2018-09-29 14:02:49
举报
文章被收录于专栏:天天天天
1.结构
<div class="small0">
    <img src="img/01.png" alt="01"/>
    <div class="mask0"></div>
</div>
<div class="big0">
2.样式
     <style>
        *{margin: 0;padding: 0}
        .small0{
            width: 300px;
            position: absolute;
            top: 80px;
            left: 80px;
            border: 1px solid #ccc;
        }
        .small0 .mask0{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(255,255,255,0.6) url("img/point.png");
            cursor: move;
        }
        .small0 img{
            width: 100%;
            display: block;
        }
        .big0{
            width: 602px;
            height:630px ;
            position: absolute;
            top: 200px;
            left: 400px;
            border: 1px solid #ccc;
            background: url("img/01.png") no-repeat 0 0;
            background-size: 300% 300%;
            display: none;
        }
    </style>
3.js
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/biger.js"></script>
<script>
    $(".small0").magnifier({
        small:".small0",
        mask:".mask0",
        big:".big0"
    })
</script>
4.biger.js
/**
 * Created by Administrator on 2017/11/8.
 */
$.fn.extend({
    magnifier:function(option){
        var defaul = {
            small:".small",
            mask:".mask",
            big:".big"
        }
        var opt = $.extend({},defaul,option);
        console.log(opt)
        $(opt.small).hover(function(){
            $(opt.big).show()

        },function(){
            $(opt.big).hide();
        })
        $(opt.small).mousemove(function(e){
            //计算小红快的位置
            $(opt.mask).offset({//让小红快跟着鼠标走
                left:e.clientX - $(opt.mask).width()/2,
                top:e.clientY - $(opt.mask).height()/2
                //让鼠标位于小红快的中心
            })
            //posittion().left距离父元素左边的值
            if($(opt.mask).position().left<=0){
                $(opt.mask).css('left',0);//固定永远不会超出父元素的左边
            }
            if($(opt.mask).position().left>=($(opt.small).width()-$(opt.mask).width())){
                $(opt.mask).css('left',$(opt.small).width()-$(opt.mask).width());
            }
            if($(opt.mask).position().top<=0){
                $(opt.mask).css('top',0);
            }
            if($(opt.mask).position().top>=($(opt.small).height()-$(opt.mask).height())){
                $(opt.mask).css('top',$(opt.small).height()-$(opt.mask).height());
            }

            var retx = $(opt.small).width()-$(opt.mask).width();
            //小盒子与$(".mask")的宽度的差,
            var rety = $(opt.small).height()-$(opt.mask).height();
            //小盒子与$(".mask")的高度的差,
            var x,y;
            x = $(opt.mask).position().left / retx * 100;
            y = $(opt.mask).position().top / rety * 100;

            var set = x+"% "+y+"%";
            $(opt.big).css({backgroundPosition:set})

        });

    }
})
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.11.09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.结构
  • 2.样式
  • 3.js
  • 4.biger.js
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档