検索

ホームページ >ウェブフロントエンド >jsチュートリアル >flash_jquery を模倣して画像効果を拡大するための Jquery ベースのコード

flash_jquery を模倣して画像効果を拡大するための Jquery ベースのコード

WBOY
WBOYオリジナル
2016-05-16 18:09:251211ブラウズ

Html：

复制代代码如下:


<頭>



jQuery 用Zoomer














css:
复制代码代码如下:

ul.thumb {float: left ;リストスタイル: なし;マージン: 0;パディング: 10px;幅: 800px;背景色: 白;}
ul.thumb li {マージン: 0;パディング: 5px;浮動小数点: 左;位置: 相対;幅: 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) no-repeat center center;border: none;}
.title{position:絶対;幅:185px;高さ:35px;マージン:0;フォントの重さ:900;背景:url(../imgs/blue.png) リピートなし 中央 中央;パディング:17px 0 0 0;テキスト整列:中心;色: #fff; }

js:
复制代代码如下:

(function ($) {
$.fn.Zoomer = function (b) {
var c = $.extend({speedView: 200、speedRemove: 400、altAnim: false、speedTitle: 400、debug: false }, b);
var d = $.extend(c, b);
function e(s) {
if (コンソールのタイプ != "未定義" && コンソールのタイプ != "未定義")
{ console.log(s) } else {alert(s) }
}
if (d.speedView == 未定義 || d.speedRemove == 未定義 || d.altAnim ==未定義 || d.speedTitle == 未定義) {
e('speedView: ' d.speedView);
e('speedRemove: ' d.speedRemove); altAnim);
e('speedTitle: ' d.speedTitle);
return false
}
if (d.debug == unknown) {
e('speedView: ' d. SpeedView);
e('speedRemove: ' d.speedRemove);
e('speedTitle: ' d.speedTitle);
}
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'、マージン左: '0'、上: '0'、左: '0'、幅: '100px'、高さ: '100px'、パディング: '5px' }, d.speedRemove); this).find('.title').remove()
})
}
}
})(jQuery);


在線演示:
http://demo.jb51.net/js/2011/ZoomerforjQuery/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：toString をオーバーロードして JS HashMap の分析_JavaScript スキルを実装する次の記事：toString をオーバーロードして JS HashMap の分析_JavaScript スキルを実装する

関連記事

続きを見る