jQuery 포커스 맵 전환 특수 효과 플러그인 캡슐화 example_jquery

웹사이트 포커스 맵은 웹사이트 콘텐츠를 표시하는 형태로 간단히 웹페이지에 표시되는 하나 이상의 그림으로 이해될 수 있으며, 이것이 웹사이트 포커스 맵입니다. 웹사이트의 매우 눈에 띄는 위치에는 사진 조합 형태로 재생되는데, 이는 초점 뉴스와 유사하지만 사진이 추가되어 있습니다. 일반적으로 홈페이지나 채널의 홈페이지에서 사용되는 이미지 형태이기 때문에 어느 정도의 매력과 시각적인 매력을 가지고 있습니다. 외국 디자인 에이전시의 조사 통계에 따르면 웹사이트 중심 이미지의 클릭률은 순수 텍스트보다 훨씬 높으며 전환율은 텍스트 제목보다 5배 더 높습니다. . 이러한 관점에서 볼 때, 초점 사진은 방문객의 회사에 대한 첫인상을 크게 향상시킬 수 있습니다. 우리 프로젝트에 패키지되어 사용된 아름답고 분위기 있는 전체 화면 초점 사진을 소개하겠습니다. 아래와 같이:

마우스를 움직여 여러 장의 사진을 추가하고, 사진 링크를 설정하고, 사진을 전환할 수 있습니다. 기사를 게시하면 사진이 압축되고 왜곡됩니다.

이 특수 효과를 사용하려면 먼저 jquery 사용을 소개해야 합니다. 플러그인이 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('제목'),
                    href = a.attr('href'),
                 css = '';
                  i == settings.startIndex && (css = '활성') ;
                   $('').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'
                     },
                      '빠름')
                 },
                 기능 () {
                      nums.animate({
                          top:tips.height() 'px'
                     },
                      '빠름')
                   });
                   nums.show().delay(2000).animate({
                    top:tips.height() 'px'
                    },
                    '빠르게')
              } else {
                   nums.show()
               }
           };
            lis.size() > 1 && 시작()
        };
        var start = function () {
            var active = ul.find('li.active'),
            active_a = active.find('a');
            var index = 활성. index();
            if (settings.direction == 'left') {
               offset = index * li_width * -1;
               param = {
                   '왼쪽': 오프셋 ' px'
> 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,
            함수 () {
                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 () {
            창 .clearTimeout (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; 오버플로:숨김; 여백:0 자동;}
    div.slideBox ul.items{ 위치:절대; 부동:왼쪽; 배경:없음; 목록 스타일:없음; 패딩:0px; 여백:0px;}
    div.slideBox ul.items li{ float:left; 배경:없음; 목록 스타일:없음; 패딩:0px; 여백:0px;}
    div.slideBox ul.items li a{ float:left; 줄 높이:일반 !중요; 패딩:0px !중요; border:none/*For IE.ADD.JENA.201206300844*/;}
    div.slideBox ul.items li a img{ margin:0px !important; 패딩:0px !중요; 표시:블록; border:none/*For IE.ADD.JENA.201206300844*/;}
    div.slideBox div.tips{ position:absolute; 하단:0px; 너비:100%; 높이:50px; 배경색:#000; 오버플로:숨김;}
    div.slideBox div.tips div.title{ 위치:절대; 왼쪽:0px; 상단:0px; 높이:100%;}
    div.slideBox div.tips div.title a{ color:#FFF; 글꼴 크기:18px; 줄 높이:50px; 여백-왼쪽:10px; 텍스트 장식:없음;}
    div.slideBox div.tips div.title a:hover{ 텍스트 장식:밑줄 !important;}
    div.slideBox div.tips div.nums{ position:absolute; 오른쪽:0px; 상단:0px; 높이:100%;}
    div.slideBox div.tips div.nums a{ 디스플레이:인라인-블록; >float:left/*IE.ADD.JENA.201206300844*/; 너비:20px; 높이:20px; 배경색:#FFF; 텍스트 들여쓰기:-99999px; 여백: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({})里face指定操작동, 比如起始图 Images,方向等。

이전에 사용된 사진은 다음과 같습니다.