jQuery 그림 크기 조정 플러그 인 smartZoom 사용 실례 상세 설명
플러그 인 설명:그림 에 마 우 스 를 걸 고 마우스 롤러 를 굴 리 면 그림 의 확대 또는 축소 효 과 를 실현 할 수 있 습 니 다.
smartZoom 사용
밤 을 들 고 코드 를 올 리 세 요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>joannau</title>
<style>
* {
padding: 0;
margin: 0;
}
.imgCon {
width: 800px;
height: 500px;
margin: 40px auto;
border: 2px solid #000;
}
.imgDiv {
width: 100%;
height: 100%;
}
.imgCon img{
width: 100%;
}
</style>
</head>
<body>
<div class="imgCon">
<div class="imgDiv">
<img src="./assets/zoomSmall.jpg" alt="">
</div>
</div>
<script src="../src/jquery-1.11.0.min.js"></script>
<script src="../src/e-smart-zoom-jquery.js"></script>
<script>
$(function () {
$(".imgCon img").smartZoom()
})
</script>
</body>
</html>보기 효과:
크기 조정
완벽 해,이 걸 성공 적 으로 사 용 했 어.
그러나 많은 사람들 이 smartZoom 그림 의 위치 이동 문 제 를 만 날 수 있 습 니 다.효 과 는 다음 과 같 습 니 다.
테두리 가 보이 지 않 습 니 다.코드 를 보면 다음 과 같 습 니 다.
탑 과 left 가 장난 을 쳤 구나.이 때 문 제 를 해결 하 는 중점 은 img 이미지 외 에 div 용 기 를 끼 워 넣 는 것 입 니 다.다음 과 같다.
<div class="imgDiv">
<img src="./assets/zoomSmall.jpg" alt="">
</div>기타 API:
// top，left ；
$(".imgCon img").smartZoom({
'left': '50px'
})
// ‘destroy‘ ；
$(".imgCon img").smartZoom('destroy')위 에서 말 한 것 은 편집장 이 소개 한 jQuery 그림 크기 조정 플러그 인 smartZoom 에서 인 스 턴 스 를 사용 하여 상세 하 게 설명 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 제때에 답 해 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
