JQuery 이미지 지연 로딩 및 비례 배율 플러그인_jquery
May 16, 2016 pm 06:42 PM
jquery
최근에 JS OOP를 배워서 이렇게 썼습니다.
사용 방법:
$(".viewArea img").zoom({height:74,width:103})
효과 데모:
http://demo.jb51.net/html/jquery_img/jquery_img.htm
코드:
복사 code 코드는 다음과 같습니다.
(function($){
$.fn.zoom = function(settings){
// 일부 기본 구성;
설정 = $.extend({
높이:0,
너비:0,
loading:"lightbox-ico-loading.gif"
},settings);
var 이미지 = this ;
$(images).hide();
var loading = new Image()
loading.className="loading"
loading.src = 설정. loading;
$( Images).after(loading);
//미리 로드 중
var preLoad = function($this){
var img = new Image(); = $this.src;
if (img.complete) {
processImg.call($this);
return;
}
//$this.src = loading.src; //오류가 발생합니다.
img.onload = function(){
//$this.src = this.src의 크기로 인해 //잘못된 크기가 얻어집니다.
processImg.call ($this);
img .onload=function(){};
}
}
//이미지 크기 계산
function processImg(){
//if( settings.height===0|| settings.width ===0) return;
var m = this.height-settings.height;
var n = this.width - settings.width; if(m>n)
this.height = this.height>settings.height ? settings.height :
this.height;
else
this.width = this.width >settings. 너비 ? settings.width :
this.width;
$(this).next(".loadding").remove()
$(this).show()
return $(images).each( function(){
preLoad(this);
})
}
})(jQuery)
효과는 다음과 같습니다:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

인기 기사
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌

인기 기사
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7129
9


자바 튜토리얼
1534
14


라라벨 튜토리얼
1256
25


PHP 튜토리얼
1205
29


Cakephp 튜토리얼
1153
46



jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까?

jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요.
