JQuery插件第三十一个:按钮点击换图片效果

原创 2012年03月26日 09:03:13
UL {
	BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 100%; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: baseline; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; outline: 0
}
LI {
	BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 100%; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: baseline; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; outline: 0
}
img{ border:0;}
.content-main {
	WIDTH: 676px; PADDING: 0px;FLOAT: left; POSITION: relative
}
#viewer 
{
    border:7px solid red;
    WIDTH: 676px;
    HEIGHT:280px;
    MARGIN: 0px; 
    PADDING: 0px; 
    POSITION: absolute; 
    Z-INDEX: 10; 
}
.panel {
	POSITION: relative
}
#prevBtn {
	LEFT: -19px;
	DISPLAY: block; Z-INDEX: 11; WIDTH: 39px; POSITION: absolute; TOP: 165px; HEIGHT: 39px
}
#nextBtn {
	RIGHT: -33px;
	DISPLAY: block; Z-INDEX: 11; WIDTH: 39px; POSITION: absolute; TOP: 165px; HEIGHT: 39px
}

.carousel 
{
	MARGIN-LEFT: 7px;
	CLEAR: left; 
	POSITION: relative;
	Z-INDEX: 6; 
	OVERFLOW: hidden; 
	WIDTH: 677px; 
	HEIGHT: 293px;
}
.carousel LI {
	FLOAT: left;
	Z-INDEX: 6; 
	OVERFLOW: hidden; 
	HEIGHT: 293px;
}
.carousel IMG {
	Z-INDEX: 1; 
	POSITION: relative;
	WIDTH: 677px;	
	HEIGHT: 293px;

}
.hoverNav {
	Z-INDEX: 9999; DISPLAY: none; POSITION: absolute; WIDTH: 172px;HEIGHT: 113px; TOP: 50px;
}
.hoverLeft {
	Z-INDEX: 9999; BACKGROUND: url(arrow-left-hover.png) no-repeat left top; LEFT: -30px;overflow:hidden;
}
.hoverRight {
	Z-INDEX: 9999; BACKGROUND: url(arrow-right-hover.png) no-repeat left top; RIGHT: -25px;overflow:hidden;
}
.hoverNav IMG {
	MARGIN: 15px 0px 0px 15px;
	 WIDTH: 142px;
	 HEIGHT: 74px;
}
A.text-replace {
	DISPLAY: block; OVERFLOW: hidden; TEXT-INDENT: -99999px
}
A.previous:hover {
	BACKGROUND: url(bg-all-previous-next-sprite-80x80.png) no-repeat 0px -41px
}
A.next:hover {
	BACKGROUND: url(bg-all-previous-next-sprite-80x80.png) no-repeat -41px -41px
}
A.previous {
	LEFT: -24px; 
	WIDTH: 39px; 
	POSITION: absolute; 
	TOP: 165px; 
	HEIGHT: 39px;
	BACKGROUND: url(bg-all-previous-next-sprite-80x80.png) no-repeat 0px 0px
}
A.next {
	RIGHT: -19px; 
	WIDTH: 39px; 
	POSITION: absolute; 
	TOP: 165px; 
	HEIGHT: 39px;
	BACKGROUND: url(bg-all-previous-next-sprite-80x80.png) no-repeat -41px 0px
}
HTM页面代码:
<div class="content-main">
    <a class="previous text-replace" id="prevBtn" href="#">previous</a> <a class="next text-replace"
        id="nextBtn" href="#">next</a>
    <div class="hoverNav hoverLeft">
    </div>
    <div class="hoverNav hoverRight">
    </div>
    <div id="viewer">
    </div>
    <div class="carousel"   >
        <ul class="slider"  >
            <li class="panel" id="panel-matthewhenry" rel="/photo/100_0781.jpg"><a href="">
                <img  src="/photo/100_0781.jpg" ></a>
            </li>
            <li class="panel" id="Li1" rel="/photo/100_0785.jpg"><a href="">
                <img  src="/photo/100_0785.jpg" ></a>
            </li>
            <li class="panel" id="Li2" rel="/photo/100_0791.jpg"><a href="">
                <img  src="/photo/100_0791.jpg" ></a>
            </li>
        </ul>
    </div>
</div>

<script type="text/javascript"   >
    jQuery.run = {
        box: null,
        pic: null,
        x: null,
        over: function() { clearInterval(jQuery.run.x); },
        main: function(a,b,c) {
            var pos=Math.abs(b);
            var vertical = (c == 1);
            if (!vertical){
                var scrollLeft=Math.abs(this.box.scrollLeft);
                if (this.pic.offsetWidth - this.box.scrollLeft <= 0) {
                    jQuery.hor.box.scrollLeft -= this.pic.offsetWidth;
                } else {
                    if(a>0){
                           if(scrollLeft<pos)
                           {
                                this.box.scrollLeft+=a;
                           }else if(scrollLeft>pos){
                                this.box.scrollLeft+=-1*(scrollLeft-pos);
                           }
                     }
                   if(a<0){
                           if(scrollLeft>pos)
                           {
                                this.box.scrollLeft +=a;
                           }else if(scrollLeft<pos){
                                this.box.scrollLeft +=-1*(scrollLeft-pos);
                           }
                   }
                }
            }else{
                var scrollTop=Math.abs(this.box.scrollTop);
                if( this.pic.offsetHeight- this.box.scrollTop<=0){
                    this.box.scrollTop-= this.pic.offsetHeight;
                }else{
                    if(a>0){
                           if(scrollTop<pos)
                           {
                                this.box.scrollTop+=a;
                           }else if(scrollTop>pos){
                                this.box.scrollTop+=-1*(scrollTop-pos);
                           }
                     }
                   if(a<0){
                           if(scrollTop>pos)
                           {
                                this.box.scrollTop +=a;
                           }else if(scrollTop<pos){
                                this.box.scrollTop +=-1*(scrollTop-pos);
                           }
                   }
                }
            }           
        },
        speed: 10,
        star: function(a,b,c) {  $.run.x = setInterval("jQuery.run.main(" + a + "," + b + "," + c + ")", $.run.speed);},
        init: function(options) {
            var defaults = {
                boxid: null
            }
            var o = $.extend(defaults, options);
            this.box = o.boxid[0];
            this.pic = $('>*', this.box)[0];
        }
    };
(function($) {
    $.fn.smallEasySlider = function(options) {
        // default configuration properties
        var defaults = {
            prevId: 'prevBtn',
            prevText: 'Previous',
            nextId: 'nextBtn',
            nextText: 'Next',
            orientation: 'vertical',         //  'vertical' is optional;
            speed: 1300,
            hover: true
        };

        var options = $.extend(defaults, options);

        return this.each(function() {
            obj = $(this);
            var s = (options.s > 0) ? options.s : $("li.panel", obj).length;
            var ts = s - 1;
            var t = 0;
            var p = 0;

            var w = obj.width();
            var h = obj.height();
            var vertical = (options.orientation == 'vertical');
            $("li", obj).css('float', 'left');
            if (!vertical){
                $("ul", obj).css('width', s * w);
            }else{
               $("ul", obj).css('height', s * h);
            }
            jQuery.run.init({boxid:obj,speed:options.speed});


            $("#" + options.prevId).attr("href", 'javascript:void(0);');
            $("#" + options.nextId).attr("href", 'javascript:void(0);');

            $("#" + options.nextId).click(function() {
                animate("next");
                setLocation();
            });

            $("#" + options.prevId).click(function() {
                animate("prev");
                setLocation();
            });

            if (options.hover) {
                if ($.browser.msie) {
                    $("#" + options.nextId).hover(function() {
                        $(".hoverRight").show();
                    },
					function() { $(".hoverRight").hide(); });
                    $("#" + options.prevId).hover(function() { $(".hoverLeft").show(); },
					function() { $(".hoverLeft").hide(); });
                }
                else {
                    $("#" + options.nextId).hover(function() { $(".hoverRight").fadeIn(); },
						function() { $(".hoverRight").fadeOut(); });

                    $("#" + options.prevId).hover(function() { $(".hoverLeft").fadeIn(); },
						function() { $(".hoverLeft").fadeOut(); });
                }
            }

            function animate(dir) {
                if (dir != undefined) {
                    if (dir == "next") {
                        t = (t >= ts) ? 0 : t + 1;
                    } else {
                        t = (t <= 0) ? ts : t - 1;
                    };
                }

                if (!vertical) {
                    p = (t * w * -1);
                    if (dir == "next") {
                        $.run.over();
                        $.run.star(30,p,0);
                    }
                    else{
                        $.run.over();
                        $.run.star(-30,p,0);
                    }                    
                } else {
                    p = (t * h * -1);
                    if (dir == "next") {
                        $.run.over();
                        $.run.star(14,p,1);
                    }
                    else{
                        $.run.over();
                        $.run.star(-14,p,1);
                    }
                }
            };


            function jump(i) {
                t = (i - 1);
                p = (t * w * -1);
                $("ul", obj).css({ marginLeft: p });
                setLocation();
            }

            function setLocation() {
                $(".pagination a").removeClass("active");
                $(".pagination li").removeClass("active");
                $(".pagination li:eq(" + t + ")").addClass("active");

                // setup hover 
                var left = t - 1;
                var right = t + 1;

                if (left < 0) { left = ts }
                if (right > ts) { right = 0 }

                var hoverSrc = $("li:eq(" + left + ")", obj).attr("rel");
                $(".hoverLeft").html('<img src="' + hoverSrc + '" />');
                hoverSrc = $("li:eq(" + right + ")", obj).attr("rel");
                $(".hoverRight").html('<img src="' + hoverSrc + '" />');
            }



            // initial call
            setLocation();

            // check the hash
            if (location.hash != "" && location.hash != "#") {
                var h = location.hash;
                var i = h.replace("#", "");
                jump(i);
            }
        });
    };
})(jQuery);
以上是插件代码。
function getImg(n){
    var pics=[];
    switch(n){
        case 1:
                pics=["1.jpg","2.jpg","5.jpg"];
                break;       
        case 2: pics=["3.jpg","4.jpg"];
                break;
        case 3: pics=["5.jpg","6.jpg"];
                break;
    }
    
    var htm="";
    for(var key in pics){
         htm+="<li class=\"panel\" id=\"panel-matthewhenry\" rel=\"/photo/{0}\"><a href=\"\">";
         htm+="<img src=\"/photo/{1}\" ></a>";
         htm+="</li>";
         htm=htm.replace("{0}",pics[key]).replace("{1}",pics[key]);
    }
    
    $(".slider").html(htm);
    $(".carousel").smallEasySlider({});
}
</script>
后台初始化调用:
    /// <summary>
    /// 放在调用页面头部
    /// </summary>
    public string Head {
        get {
            StringBuilder sb = new StringBuilder();
            sb.Append("<link media=\"screen, projection\" href=\"/Slider/combined.css\" type=\"text/css\" rel=\"stylesheet\">\n");
            sb.Append("<script type=\"text/javascript\">$(function(){$(\".carousel\").smallEasySlider({});});</script>");
            return sb.ToString();
        }
    }

Unity 实现按下按钮替换按钮的图片

using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine....
  • lrh15980692010
  • lrh15980692010
  • 2017年10月16日 17:13
  • 390

Android学习笔记之Button的点击事件切换点击图片

  • u010870518
  • u010870518
  • 2015年01月16日 18:58
  • 2245

css 简单的点击按钮更换展示的图片

//设置一张图片    //设置控件   1   2   3 //调用js    //查找控件并且赋于值    var but1 = document.getElementByI...
  • yedaiyang
  • yedaiyang
  • 2017年11月30日 15:54
  • 125

换一批功能

点击按钮换一批:(假设有3个div块,打开页面默认显示第一个div,点“换一批”按钮,用js读取第二个div替换掉第一个div并显示在网页上,再点一次则用第三个替换掉第二个,再点一次用第一个替换掉第三...
  • yaozhichao1
  • yaozhichao1
  • 2013年06月10日 20:19
  • 1554

ios开发之UIButton 点击两张图标转换

现在想定义一个UIButton, 这个button有两张图片, 一张算是背景图, 另外一张显示图片1.          我通过setBackgroundImage设置了背景图片, 用setIm...
  • lianbaixue
  • lianbaixue
  • 2013年03月14日 09:46
  • 6104

Android 图片实现按钮点击切换效果

 Android中的按钮有三种状态—默认,被点击,被选中。如果我们要实现按钮的三种背景,只需在res/drawable目录中建立这样一个XML文件:   selector.xm...
  • u013937916
  • u013937916
  • 2015年06月04日 10:22
  • 1153

关于button — 点击变换背景图片

我们经常会碰到,点击button 改变背景,再次点击还原的时候,下面是我总结的一点小知识。...
  • u012871476
  • u012871476
  • 2016年03月25日 11:01
  • 190

iOS之点击按钮切换背景图片

现在的项目的按钮切换的时候,都会添加一个效果,就是点击后更换一个背景图片,而原来被点击的按钮的图片恢复原来的背景图片 首先,在.h文件中写一个BOOL的属性, @property(nonatomic ...
  • u011199592
  • u011199592
  • 2013年09月23日 16:51
  • 3813

JAVA Eclipse如何设置点击按钮切换图片

右击图片文件夹,新建一个Android XML文件  设置文件的名称,注意这个新建的xml文件就是会被用作按钮的background属性的,所以名字不要太奇怪,设置Root Elemen...
  • acetaohai123123
  • acetaohai123123
  • 2017年10月17日 21:59
  • 495

类型为image的input标签,鼠标点击切换按钮背景图片

input标签生成的按钮,使用图片作为按钮背景,鼠标点下时切换背景图片,鼠标松开时,回到默认背景图片。使用的背景图片如下: 效果图: $(function(){ //"打开...
  • sum__mer
  • sum__mer
  • 2016年08月11日 17:53
  • 1056
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery插件第三十一个:按钮点击换图片效果
举报原因:
原因补充:

(最多只允许输入30个字)