jQuery フォーカス マップの切り替え特殊効果プラグインのカプセル化 example_jquery

ウェブサイト フォーカス マップは、ウェブサイト コンテンツの表示形式の 1 つであり、単にウェブ ページ上に表示される 1 つまたは複数の画像として理解できます。ウェブサイトの非常に目立つ位置に、写真を組み合わせた形で再生されます。これは、フォーカス ニュースに似ていますが、写真が追加されています。通常、Web サイトのトップページやチャンネルのトップページで使用されます。写真の形式であるため、ある程度の魅力と視覚的魅力があります。訪問者にクリックを促しやすい 海外のデザイン会社の調査統計によると、ウェブサイトのフォーカス画像のクリック率は純粋なテキストよりも大幅に高く、コンバージョン率はテキストタイトルの5倍です。 。この観点から、フォーカス写真は訪問者の企業の第一印象を大きく向上させることができます。私たちのプロジェクトでパッケージ化され使用された、美しく雰囲気のあるフルスクリーンのフォーカス写真を紹介します。以下に示すように:

複数の写真を追加したり、写真のリンクを設定したり、マウスの動きで写真を切り替えることができます。記事を公開すると、写真が圧縮され歪んでしまいます。

この特殊効果を使用するには、まず jquery の使用を導入する必要があります。コードは次のとおりです:

コードをコピーします コードは次のとおりです:

/*
* jQuery图片轮播(焦点图)插件
*/
(function ($) {
    $.fn.slideBox = function (options) {
        var defaults = {
            direction: 'left',
            duration: 0.6,
            easing: 'swing',
            delay: 3,
            startIndex: 0,
            hideClickBar: true,
            clickBarRadius: 5,
            hideBottomBar: false
        };
        var settings = $.extend(defaults, options || {});
        var wrapper = $(this),
        ul = wrapper.children('ul.items'),
        lis = ul.find('li'),
        firstPic = lis.first().find('img');
        var li_num = lis.size(),
        li_height = 0,
        li_width = 0;
        var order_by = 'ASC';
        var init = function () {
            if (!wrapper.size()) return false;
            li_height = lis.first().height();
            li_width = lis.first().width();
            wrapper.css({
                width: li_width + 'px',
                height: li_height + 'px'
            });
            lis.css({
                width: li_width + 'px',
                height: li_height + 'px'
            });
            if (settings.direction == 'left') {
                ul.css('width', li_num * li_width + 'px')
            } else {
                ul.css('height', li_num * li_height + 'px')
            };
            ul.find('li:eq(' + settings.startIndex + ')').addClass('active');
            if (!settings.hideBottomBar) {
                var tips = $('

').css('opacity', 0.6).appendTo(wrapper);
                var title = $('

').html(function () {
                    var active = ul.find('li.active').find('a'),
                    text = active.attr('title'),
                    href = active.attr('href');
                    return $('').attr('href', href).text(text)
                }).appendTo(tips);
                var nums = $('

').hide().appendTo(tips);
lis.each(function (i, n) {
var a = $(n).find('a'),
text = a.attr('title'),
href = a.attr('href'),
css = '';
i == settings.startIndex && (css = 'active ');
$('').attr('href', href).text(text).addClass(css).css('borderRadius',
settings.clickBarRadius 'px').mouseover( function () {
$(this).addClass('active').siblings().removeClass('active');
ul.find('li:eq(' $(this).index( ) ')').addClass('active').siblings
().removeClass('active');
start();
stop()
}).appendTo(nums)
});
if (settings.hideClickBar) {
Tips.hover(function () {
数値。 animate({
top: '0px'
},
'高速')
},
function () {
nums.animate({
top:tips.height() 'px'
},
'高速')
});
nums.show().lay(2000).animate({
top:tips.height() 'px'
},
'高速')
} else {
nums.show（）
}
};
lis.size（）＆gt; 1 && start()
};
var start = function () {
var active = ul.find('li.active'),
active_a = active.find('a');
varindex = active。 Index();
if (settings.direction == 'left') {
offset =index * li_width * -1;
param = {
'left':オフセット 'px'
}
} else {
offset =index * li_height * -1;
param = {
' top': オフセット 'px'
}
};
ラッパー.find('.nums').find('a:eq('index ')').addClass('active').siblings().removeClass
('active');
wrapper.find ('.title').find('a').attr('href', active_a.attr('href')).text(active_a.attr
('title'));
ul. stop().animate(param, settings.duration * 1000, settings.easing,
function () {
active.removeClass('active');
if (order_by == 'ASC') {
if (active.next().size()) {
active.next().addClass('active')
} else {
order_by = 'DESC';
アクティブ.prev().addClass('active')
}
} else if (order_by == 'DESC') {
if (active.prev().size()) > アクティブ.prev().addClass('active')
} else {
order_by = 'ASC';
active.next().addClass('active' )
}
}
});
wrapper.data('timeid', window.setTimeout(start, settings.delay * 1000))
};
var stop = function () {
ウィンドウ。クリアタイムアウト(wrapper.data('timeid'))
};
wrapper.hover(function () {
stop()
},
function () {
start()
});
var imgLoader = 新しい画像();
imgLoader.onload = function () {
imgLoader.onload = null;
init()
};
imgLoader.src = firstPic.attr('src ')
}
})(jQuery);

下は图片焦点图のcss样式;

复制代 代码如下:

div.slideBox{ 位置:相対;高さ:300px;オーバーフロー:非表示; margin:0 auto;}
div.slideBox ul.items{position:absolute;フロート:左;背景:なし;リストスタイル:なし;パディング:0px; margin:0px;}
div.slideBox ul.items li{ float:left;背景:なし;リストスタイル:なし;パディング:0px; margin:0px;}
div.slideBox ul.items li a{ float:left;行の高さ:通常 !重要;パディング:0px !重要; border:none/*IE.ADD.JENA.201206300844の場合*/;}
div.slideBox ul.items li a img{ margin:0px ! important;パディング:0px !重要;表示:ブロック; border:none/*IE.ADD.JENA.201206300844の場合*/;}
div.slideBox div.tips{position:absolute;下:0ピクセル;幅:100%;高さ:50ピクセル;背景色:#000; overflow:hidden;}
div.slideBox div.tips div.title{position:absolute;左:0ピクセル;上:0px; height:100%;}
div.slideBox div.tips div.title a{ color:#FFF;フォントサイズ:18px;行の高さ:50ピクセル;マージン左:10px; text-decoration:none;}
div.slideBox div.tips div.title a:hover{ text-decoration:underline ! important;}
div.slideBox div.tips div.nums{position:absolute;右:0ピクセル;上:0px; height:100%;}
div.slideBox div.tips div.nums a{ display:inline-block; >float:left/*IE.ADD.JENA.201206300844*/; の場合幅:20ピクセル;高さ:20ピクセル;背景色:#FFF;テキストインデント:-99999px; margin:15px 10px 0px 0px;}
div.slideBox div.tips div.nums a.active{background-color:#093;}

页面配置：

复制代码代码如下:

< ;script src="Scripts/jquery-1.4.1.min.js" type="text/javascript">

• 


• 




• 


• < /a>

只js を導入し、トップ セクションで $(選択器).slideBox(); を使用して上記の結果を実現する必要がありますが、sliebox({}) で開始図や方向などの操作を指定することもできます。 これは、前の段階で使用されていたピクチャー・プレイヤー・アプリケーションであり、直接使用できるように感じられます。