mootools_Mootools를 기반으로 한 둥근 테두리 확장 코드
- WBOY원래의
- 2016-05-16 18:34:551012검색
JQuery에는 순수 JS를 사용하여 둥근 모서리를 생성하는 확장 기능이 있지만 DIV CSS와 동일하며 둥근 모서리가 거칠게 보입니다.
배경 이미지를 사용하는 것이 훨씬 보기 좋습니다. 문제는 늘릴 수 없다는 것입니다. 가장 쉬운 방법은 모서리가 4개인 작은 이미지를 사용하고 테두리를 추가하여 철자하는 것입니다. 그러나 추가 그림이 너무 많고 코드가 지저분해 상당히 불쾌합니다.
큰 그림 CSS를 사용하는 아주 기술적인 방법이 있는데, 원리는 다음과 같습니다. 
큰 배경 이미지를 사용하여 둥근 모서리를 만들고, CSS를 사용하여 네 모서리와 측면을 가져와 DIV에 함께 넣습니다. 이는 둥근 모서리를 해결할 뿐만 아니라 다른 특수 테두리(예: 그림자)도 생성합니다.
그런데 사용할 때마다 CSS를 추가해야 하는 게 귀찮아서 mootools를 이용해 Element 클래스의 확장을 작성했습니다.
코드 복사 코드는 다음과 같습니다.
setBorder
Element.implement({
setBorder: function(pic, len) {
///
/// 컨테이너 테두리(그림)를 설정합니다
/// 테스트된 div
/// < /summary>
/// 사진 주소/// 테두리 너비 🎜>///
var content = this.clone()
var width = this.getSize().x len * 2; = this.getSize().y len * 2;
this.empty().setStyles({ 'width': width, 'height': height })
var lt = new Element('div' , {
'스타일': {
'너비': len,
'높이': len,
'float': '왼쪽',
'배경': 'url(' pic ') 반복 없음 왼쪽 상단'
}
})
var rt = new Element('div', {
'styles': {
'width': width - len,
'높이': len,
'float': '왼쪽',
'배경': 'url(' pic') 반복 없음 오른쪽 상단'
}
} );
var lb = new Element('div', {
'styles': {
'너비': len,
'높이': 높이 - len,
'float' : '왼쪽',
'배경': 'url(' pic ') 왼쪽 하단 반복 없음'
}
})
var rb = new Element('div', {
'스타일': {
'너비': 너비 - len,
'높이': 높이 - len,
'float': '왼쪽',
'배경': 'url( ' pic ') 반복 없음 오른쪽 하단'
content.inject(rb, 'top')
lt.inject(this, 'top'); >rt.injectBottom(this);
rb.injectBottom(this)
return this;
이런 방법으로 페이지에서 setBorder 메소드를 직접 호출하여 배경 이미지를 전달하고 테두리 너비를 추가할 수 있습니다.
HTML 코드
코드 복사
코드는 다음과 같습니다.
<머리>
<본문>