이런 특수 효과는 예전에 인터넷에서 본 적이 있는데 아쉽게도 당시 URL을 저장하지 않아서 이런 특수 효과가 어떻게 나오는지 몰랐습니다. 오늘 일부러 인터넷을 검색했는데, 우연히 발견하게 되었습니다.
저도 열심히 노력해서 쓰려고 노력했습니다.
하지만 단순히 이미지를 확대한 것일 뿐이고, 이미지 주변 요소의 레이아웃에도 영향을 미쳤습니다(확대 때문입니다). 이미지가 더 많은 공간을 차지합니다.)
나중에 오버플로 및 위치 속성을 유연하고 능숙하게 사용하면 목적을 달성할 수 있다는 것을 알게 되었습니다. 사실 CSS(CSS3)의 오버플로와 위치(부수적으로 위쪽, 아래쪽, 왼쪽, 오른쪽)는 단순히 웹 페이지 특수 효과에 대한 해결 불가능한 조합이라고 생각합니다. 물론 js(jquery)가 대세입니다.
그렇게 말도 안 되는 소리를 하고 나면 모두가 여전히 혼란스러울 것입니다. 이게 무슨 특수효과인가요? 아아, 내 언어 표현 능력은 아직 매우 평범합니다. 아래에 스크린샷을 찍어 보겠습니다.
웹 페이지를 열었을 때의 초기 모습입니다.
6 위에 마우스를 올리면 사진 중 하나를 클릭하면 제가 언급한 특수 효과가 나타납니다(여기서는 예를 들어 세 번째 사진에 마우스를 올려 놓았습니다).
사진이 축소되고, 마우스를 놓았을 때 사진을 열면 사진이 넘치는 현상 없이 다시 확대된(초기상태로 돌아간) 느낌이 들며, 다른 레이아웃에 영향을 주지 않습니다. 사진과 요소.
코드는 아래와 같습니다.
< ;!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">
jQuery 사진 크기 조정 효과<br> </head> <br><!-- 스타일 --> <br><style type="text/css"> <br>*{ <br>여백: 0; : 0; <br>} <br>본체{ <br>글꼴 계열: "Myriad Pro", "Trebuchet MS", Helvetica, sans-serif <br>글꼴 크기: 12px; fff; <br>} <br>#col { <br>너비: 600px; <br>여백: 20px 자동 0px 자동; <br>테두리: 1px 솔리드 <br>} <br>.pic { <br>너비: 200px; <br>여백: 0px; <br>오버플로는 숨겨진 것으로 정의됩니다.*/ <br>위치: 상대 ;/* 여기서 위치는 상대적으로 정의됩니다. 이는 실제로 아래 img의 위치가 그림에 따라 배치될 수 있도록 하기 위한 것입니다.*/ <br>float: left <br>} <br>/*원본 크기 사진의 크기는 약 500*333*/ <br>/*너비에 대해서는 별 문제가 없지만 높이에 대해서는 문제가 없습니다*/ <br>.pic a img { <br>height: 500px <br>border: none; <br>위치: 절대; /*상위 태그가 위치를 정의하기 때문에 여기에서 img로 정의된 위치가 위치 지정의 기초가 됩니다. 그렇지 않으면 전체 브라우저의 위치가 지정됩니다.*/ <br>top: -66.5px>left; : -150px; <br>불투명도: 0.5; <br>-moz-opacity: 0.5; <br>필터: progid:DXImageTransform.Microsoft.Alpha(opacity=50);/*브라우저와 호환되도록 하려면 여기서 불투명도 속성의 역할은 동일*/ <br>} <br><br></style> <br><!-- JavaScript --> javascript" src="js /jquery.min.js"></script> <br><script type="text/javascript"> <br>$(function() { <br>$(' #col img').hover( <br>function(){ <br>var $this = $(this); <br>$this.stop().animate({'opacity':'1.0','height ':'200px', 'top':'0px','left':'0px'}); <br>}, <br>function(){ <br>var $this = $(this); >$this.stop( ).animate({'opacity':'0.5','height':'500px','top':'-66.5px','left':'-150px'}) <br>} <br>) ; <br>}) <br><body> <br><div class=" pic"> <br><a href="#"> <br><img src="Images/1.jpg"/> <br></a> <br></div> ; <BR>< div class="pic"> <br><a href="#"><br><img src="Images/2.jpg" alt="jQuery 사진 크기 조정 효과는 다른 요소의 레이아웃에 영향을 주지 않습니다_jquery" > </div> <br><div class="pic"> <br><a href="#"><br><img src="이미지/3. jpg"/> <br></a> <br></div> <br><div class="pic"> <br><a href="#"> <br> <img src=" 이미지/4.jpg"/> <br></div> <br><div class="pic"> href="#"> ; <br><img src="Images/5.jpg"/> <br></a> <br></div> pic"> <br><a href="#"> <br><img src="Images/6.jpg"/> <br></a> <br></div> ; <BR>< /div> <br></html></div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="비디오를 재생하는 HTML5 비디오 컨트롤은 Android의 기본 형식 mp4 및 3gp_javascript만 지원합니다." href="http://m.php.cn/ko/faq/13076.html">비디오를 재생하는 HTML5 비디오 컨트롤은 Android의 기본 형식 mp4 및 3gp_javascript만 지원합니다.</a></span><span>다음 기사：<a class="dBlack" title="비디오를 재생하는 HTML5 비디오 컨트롤은 Android의 기본 형식 mp4 및 3gp_javascript만 지원합니다." href="http://m.php.cn/ko/faq/13078.html">비디오를 재생하는 HTML5 비디오 컨트롤은 Android의 기본 형식 mp4 및 3gp_javascript만 지원합니다.</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', {
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
});
</script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>