매우 사용하기 쉬운 jQuery 둥근 모서리 플러그인 Corner Quick_jquery

WBOY
풀어 주다: 2016-05-16 16:38:20
원래의
1292명이 탐색했습니다.

jQuery Corner는 원래 Dave Methvin이 개발한 jQuery 플러그인이지만 Malsup 동지의 도움으로 몇 가지 중요한 개선이 이루어졌습니다. 물론, 편의상 이 글에서는 플러그인을 첨부파일로 제공하겠지만, 최신 버전을 받으시려면 해당 프로젝트의 github에 접속하시기 바랍니다.
둥근 모서리와 기타 스타일이 마술처럼 나타나는 이유는 플러그인이 대상 요소에 작은 띠를 추가하기 때문입니다. 이 작은 띠는 배경색이므로 사람의 눈에는 둥근 모서리만 보이지만 실제로는 작습니다. 원래의 직각을 덮습니다.

저는 사실 마술사가 아닌 것 같아요. 시작하자마자 배경을 공개한 것 같아요. 걱정하지 마세요. 이 마법에 대한 몇 가지 요구 사항을 추가하겠습니다.

1. 플러그인은 블록 요소용으로 특별히 작성되었기 때문에 div, p 등이 적용 가능합니다. 물론 인라인 요소를 전혀 사용할 수 없다는 의미는 아닙니다. 스팬에 모서리를 추가하는 것이 더 비쌉니다. 그러나 일반 사람들은 둥근 모서리의 스팬(span)에 대해 논쟁을 벌일 생각이 없으므로 그냥 스팬(span)을 div로 변경하세요.
2. 플러그인에서 새롭게 추가된 border-radius 기능은 IE

자, 기본 사항이 소개되었습니다. 모든 사람에게 사용법을 가르쳐주십시오. 이것이 핵심이지만 매우 간단합니다. 첫 번째 단계는 기본 HTML 웹 페이지, DIV 레이아웃 및 CSS를 구축하는 것입니다.

<html>
<head>
<style type="text/css">
div{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div></div>
</body>
로그인 후 복사

효과는 다음과 같습니다.



두 번째 단계는 jQuery와 jQuery Corner 플러그인을 소개하는 것입니다.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>

<style type="text/css">
div{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div>

</div>
</body>
</html>
로그인 후 복사

이 시점에서도 효과는 지금의 사진과 동일하며 직각도 변경되지 않았습니다.
세 번째 단계는 플러그인이 DIV 블록에서 작동할 수 있도록 js 코드를 작성하는 것입니다.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
$(function(){
$("div").corner();

});
</script>
<style type="text/css">
div{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div>

</div>
</body>
</html>
로그인 후 복사

이때 둥근 모서리가 나타납니다.


이 시점에서 작업이 완료되었습니다. 확장하고 상승하기 시작합니다.

************************************확대********** ********************************

1. 다양한 코너가 있습니다

오목한 모양을 좋아한다면 위 사진의 첫 번째 행과 세 번째 열이 좋은 선택입니다. 먼저 홈을 뜻하는 노치(notch)라는 단어에 대해 알아봅시다. 코드 하나를 다음과 같이 변경하세요.

<script type="text/javascript">
$(function(){
$("div").corner("notch");

});
</script>
로그인 후 복사

다음 효과를 얻을 수 있습니다:


여기에는 명백한 문제가 있습니다. 현재 크롬 아래에는 모서리가 하나만 있습니다. IE에서도 제대로 작동하지 않습니다. 틱톡, 거의 30분이 지났습니다. 마침내 알게 되었습니다:
모서리가 있는 Div에 상위 Div를 추가해야 합니다. 그렇지 않으면 제가 만든 예에서 상위는 본문이고 플러그인 자체가 다른 Div를 추가해야 하므로 전체가 엉망이 됩니다. 그래서 원래 코드를 수정했습니다:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
$(function(){
$("#mydiv").corner('bevel');
});
</script>
<style type="text/css">
#mydiv{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div>
<div id="mydiv"></div>
</div>
</body>
</html>
로그인 후 복사

사진 살펴보기:

하지만 모두가 주의해야 할 문장이 두 개 있습니다(원문):* Internet Explorer에서는 quirksmode로 렌더링된 페이지의 경우 접는 선이 지원되지 않습니다.* 접는 선은 실행하지 않는 한 Internet Explorer의 상단 모서리에서만 지원됩니다. IE8 표준 모드에서는 Corner 스타일을 정직하게 사용해 보세요. 2. 선택할 수 있는 위치는 여러 가지가 있습니다. 위쪽/아래쪽/왼쪽/오른쪽/tl/tr/bl/br을 사용하여 모서리가 나타나는 특정 위치를 설정할 수 있습니다. 사진을 보세요:

예를 들어 노치의 경우 mydiv 하단에 노치 효과를 추가하고 싶다면 다음과 같이 코드를 다시 작성하세요.

$("#mydiv").corner('bevel bottom'); 

로그인 후 복사

그래서 하단에는 노치 각도만 생성됩니다.


3. 사용자 정의 가능한 각도 크기 이 기능은 매우 유용합니다. 픽셀 값을 채워 각도를 변경할 수 있습니다. 시도해 보세요:

$("#mydiv").corner('bevel bottom 50px'); 
로그인 후 복사

놀라운 이미지는 다음과 같습니다.


정말 놀랍습니다. 하하, 더 있습니다.

4. 믹스 앤 매치 이 예에서는 위쪽 두 모서리를 둥근 모서리로 변경하고 아래쪽 모서리는 변경하지 않습니다. 코드를 보세요:

$("#mydiv").corner('top 30px').corner('bevel bottom 50px'); 
로그인 후 복사

예, 모서리 두 개만 사용하세요. 물론 네 모서리를 완전히 활용하여 각 모서리를 맞춤 설정할 수도 있습니다.

5. 테두리 장식 이것이 하이라이트입니다. 이것을 제안한 Kevin Scholl이라는 사람에게 감사하지만 정말 훌륭한 제안입니다. 코드를 살펴보세요:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
$(function(){
$("#mydiv p").corner('round 8px').parent().css('padding','8px').corner('round 14px');
});
</script>
<style type="text/css">
#mydiv{
width:360px;
background-color: #600;
}
#mydiv p{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div>
<div id="mydiv"><P></p></div>
</div>
</body>
</html> 
로그인 후 복사

이렇게 됩니다:

이 사진은 크롬에서의 효과입니다. IE에서는 매우 늦은 밤이라 디버깅하고 문제의 원인을 찾아낼 시간이 없습니다.

많이 썼지만 사실 아직 언급하지 않은 기능과 스타일이 있고 나머지는 일반적으로 사용되지 않는 것들을 사용하면서 영어를 읽고 스스로 가르칠 수 있습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿