flash_jquery를 모방한 그림 효과 확대를 위한 Jquery 기반 코드

Html：

复代码 代码如下:

<머리>






<본문>

• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 

css:

复aze代码 代码如下:

ul.thumb {float: left ;목록 스타일: 없음;여백: 0; 패딩: 10px;너비: 800px;배경색: 흰색;}
ul.thumb li {margin: 0; 패딩: 5px;float: 왼쪽;위치: 상대;너비: 110px;높이: 110px;}
ul.thumb li img {너비: 100px; 높이: 100px;테두리: 1px 솔리드 #ddd;패딩: 5px;배경: #f0f0f0;위치: 절대;왼쪽: 0; 상단: 0;-ms-보간-모드: 쌍입방; }
ul.thumb li img.hover {margin-top:15px;Background:url(../imgs/thumb_bg.png) 반복 없음 센터 center;border: none;}
.title{position: 절대;너비:185px;높이:35px;마진:0;글꼴 무게:900;배경:url(../imgs/blue.png) 반복 없음 센터 센터;패딩:17px 0 0 0;텍스트 정렬: 센터; 색상: #fff; }

js:

复代码 代码如下:

(함수($) {
$.fn.Zoomer = 함수(b) {
var c = $.extend({ speedView: 200, speedRemove: 400, altAnim: false, speedTitle: 400, debug: false }, b);
var d = $.extend(c, b);
function e(s) {
if (typeof console != "undefine" && typeof console.debug != "undefine ")
{ console.log(s) } else { 경고 }
}
if (d.speedView == 정의되지 않음 || d.speedRemove == 정의되지 않음 || d.altAnim == 정의되지 않음 || d.speedTitle == 정의되지 않음) {
e('speedView: ' d.speedView)
e('speedRemove: ' d.speedRemove)
e('altAnim: ' d. altAnim);
e('speedTitle: ' d.speedTitle);
return false
}
if (d.debug == undefine) {
e('speedView: ' d. speedView);
e('speedRemove: ' d.speedRemove);
e('altAnim: ' d.altAnim)
e('speedTitle: ' d.speedTitle)
return false
}
if (typeof d.speedView != "정의되지 않음" || typeof d.speedRemove != "정의되지 않음" || typeof d.altAnim != "정의되지 않음" || typeof d.speedTitle != "정의되지 않음 ") {
if (d.debug == true) {
e('speedView: ' d.speedView);
e('speedRemove: ' d.speedRemove);
e('altAnim: ' d.altAnim);
e('speedTitle: ' d.speedTitle)
}
$(this).hover(function () {
$(this).css({ 'z-index': '10 ' });
$(this).find('img').addClass("hover").stop().animate({ marginTop: '-110px', marginLeft: '-110px', top: ' 50%', 왼쪽: '50%', 너비: '175px', 높이: '181px', 패딩: '20px' }, d.speedView)
if (d.altAnim == true) {
var a = $(this).find("img").attr("alt"); if (a.length != 0) {
$(this).prepend('' a '');
$('.title').animate({ marginLeft: '-42px', marginTop: '90px' }, d.speedTitle).css( { 'z-index': '10', 'position': 'absolute', 'float': 'left' })
}
}
}, function () {
$( this).css({ 'z-index': '0' });
$(this).find('img').removeClass("hover").stop().animate({ marginTop: ' 0', marginLeft: '0', 상단: '0', 왼쪽: '0', 너비: '100px', 높이: '100px', 패딩: '5px' }, d.speedRemove)
$( this).find('.title').remove()
})
}
}
})(jQuery);

현재:http://demo.jb51.net/js/2011/ZoomerforjQuery/

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.