링크 미리보기 만들기, iframe 꽉차게 보이기

 

링크에 mouse over 했을때 a 링크의 href를 ireame에 append 해준다.

mouse leave 일경우 append 되어있는 iframe을 지워준다.

 

한번에 로딩하면 로딩속도가 느려지기 때문에 각 필요할때 불러주는 형식이 알맞았다.

 

    $('a').on({
        mouseenter :function(){
            var $this = $(this);
            var href = $this.attr('href');
            var html = '<iframe src="'+href+'" frameborder="0" width="1240" height="1500" class="sitemapIframe"></iframe>';
            $this.append(html)
        },
        mouseleave : function(){
            $(this).find('.sitemapIframe').remove();
        }
    })

 

iframe에 href로 링크만 불러올경우 불러온 컨텐츠가 ifeame에 너무 크게 보이게 된다.

 

iframe에 zoom이 꽉 차게 보이게 하려면 url 가져올 사이트의 width값을 알아야 한다.

1. 사이트의 가로값을 iframedp width 속성으로 넣어준다.

<iframe src="'+href+'" frameborder="0" width="1240" height="1500" class="sitemapIframe"></iframe>

 

2. 원하는 사이즈만큼 transform scale로 줄여준다.

transform:scale(0.2);

 

2. 우측 상단정렬 해준다.

transform-origin: left top;

 

a {
   position: relative;
   display:block;
}
.sitemapIframe{
   position: absolute;
   top:-300px;
   left:calc(50% - 124px);
   z-index: 1;
   transform:scale(0.2);transform-origin: left top;
   background-color: #fff;
}