zoukankan      html  css  js  c++  java
  • 分享Flight主题中的焦点图(基于JQ)

    关于这个焦点图没啥说的了,网上太多了。但自己一直没找到个合适的。现在的这个是Dreamy主题中的升级版,虽然看起来一模一样。其实做了很多扩展,优化了结构和JS部分。可以选择切换方式(左右滚动,上下滚动,淡入淡出)三种动画模式。可以设置执行时间。可以自定义大小,方便应用。可以选择是否自动切换。还是上代码吧。也没啥说的了。

    /*参数:
    ------------------------------------------------------------------------
          obj:    要切换的对像[ID,Class]
    animation:  设置切换方式 [left(向左滚动),top(向上滚动),fade(淡入淡出)]
         time:    设置每次动画执行间隔时间 [单位毫秒)]
        speed:    设置每次动画执行时间 [单位毫秒]
         auto:    设置是否显自动切换 [可选值为:true,false]
      cssName:  附加Class名称 [自定义焦点图容器样式,可以不填]
    -------------------------------------------------------------------------
    //示例:
    -------------------------------------------------------------------------
    <div id="ifocus">
        <ul class="ifocus_list">
            <li><a href="#1"><img src="images/01.png" alt="图片1" /></a></li>
            <li><a href="#2"><img src="images/02.png" alt="图片2" /></a></li>
            <li><a href="#3"><img src="images/03.png" alt="图片3" /></a></li>
        </ul>
    </div>
    -------------------------------------------------------------------------
    //example1.jQFocus("#ifocus","left",2000,500,true);
    -------------------------------------------------------------------------
    //example2.jQFocus("#ifocus","top",2000,500,true,"border_red");
    ------------------------------------------------------------------------*/
     
    function jQFocus(obj,animation,time,speed,auto,cssName) {
        var t = n =0,li=$(obj+" li"),count = $(obj+" li").size();
            _width = $(obj).width(),_height = $(obj).height();
            $(obj).css({ (_width)+"px",height:_height+"px"}).attr("class",cssName);
            $("<div class='ifocus_info'></div>").appendTo(obj);
            $("<span class='ifocus_title'></span>").appendTo(obj).html($(".ifocus_list li:first-child").find("img").attr('alt'));
        var num='<ul class="ifocus_control">';
            for(var i=0;i<count;i++){num+='<li>'+(i+1)+'</li>'};
            num+='</ul>';
            $(obj).append(num);
            $(obj+" .ifocus_control li:first-child").addClass("current");
            $(".ifocus_title").click(function(){window.open($(".ifocus_list a:first-child").attr('href'), "_blank")});
        $(obj+" .ifocus_control li").click(function() {
                var i = $(this).text() - 1;
                    n = i;
                    if (i >= count) return;
                    animation = animation.substring();
                    switch(animation) {
                        case "left":
                            $(obj+" .ifocus_list").css({(_width*count)+"px",height:_height+"px"});
                            $(obj+" .ifocus_list li").css({float:"left",height:_height+"px"});
                            $(obj+" .ifocus_list").animate({left:-(_width*i)},speed);
                        break;
                        case "top":
                            $(obj+" .ifocus_list").animate({top:-(_height*i)},speed);
                        break;
                        case "fade":
                            $(obj+" .ifocus_list li").filter(":visible").fadeOut(speed).parent().children().eq(i).fadeIn(speed);
                    }
                    $(".ifocus_title").html($(".ifocus_list a").eq(i).find("img").attr('alt'));
                    $(this).addClass("current").siblings().removeClass("current");
            });
            if(auto==true ) {
                showAuto = function (){
                    n = n >= (count - 1) ? 0 : ++n;
                    $(obj+" .ifocus_control li").eq(n).trigger('click');
                }
                t = setInterval("showAuto()", time);
                $(obj).hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", time);});   
            }
    }
    

      对于代码这个也没啥说的了。会点JQ的能看懂。看不懂的我也说不明白。例子就在文章的头上;

  • 相关阅读:
    高级特性(4)- 数据库编程
    UVA Jin Ge Jin Qu hao 12563
    UVA 116 Unidirectional TSP
    HDU 2224 The shortest path
    poj 2677 Tour
    【算法学习】双调欧几里得旅行商问题(动态规划)
    南洋理工大学 ACM 在线评测系统 矩形嵌套
    UVA The Tower of Babylon
    uva A Spy in the Metro(洛谷 P2583 地铁间谍)
    洛谷 P1095 守望者的逃离
  • 原文地址:https://www.cnblogs.com/coxsoft/p/2228805.html
Copyright © 2011-2022 走看看