Question

我在链接中使用以下代码进行投资组合中的幻灯片放映。它有一个用于照片的部分，另一个用于标题，另一个用于伴随故事。它们都会同时改变next和prev按钮。当鼠标悬停在图像上时，我正试图让故事文本显示出来。我一直在尝试实现我在网上找到的各种代码但到目前为止无法实现结果。当我尝试时，要么图像永远不会出现，要么故事永远不会出现，我无法找到方法。我正在寻找的效果类型将是此链接屏幕左侧中间的效果; http://tympanus.net/jCapSlide/

我想知道是否有人知道如何将这个动画实现到我的代码中。而且我还希望像标题部分一样保持其他部分的功能相同。

这是我目前正在使用的代码; http://jsfiddle.net/elliotgray/64nfP/

以下是用于在上面的链接上创建悬停文本动画的代码，以防它可能有用。这来自他们网站上下载的代码。

任何帮助都将不胜感激。

(function($) {
    $.fn.capslide = function(options) {
        var opts = $.extend({}, $.fn.capslide.defaults, options);
        return this.each(function() {
            $this = $(this);
            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

            if(!o.showcaption)  $this.find('.ic_caption').css('display','none');
            else $this.find('.ic_text').css('display','none');

            var _img = $this.find('img:first');
            var w = _img.css('width');
            var h = _img.css('height');
            $('.ic_caption',$this).css({'color':o.caption_color,'background-color':o.caption_bgcolor,'bottom':'0px','width':w});
            $('.overlay',$this).css('background-color',o.overlay_bgcolor);
            $this.css({'width':w , 'height':h, 'border':o.border});
            $this.hover(
                function () {
                    if((navigator.appVersion).indexOf('MSIE 7.0') > 0)
                    $('.overlay',$(this)).show();
                    else
                    $('.overlay',$(this)).fadeIn();
                    if(!o.showcaption)
                        $(this).find('.ic_caption').slideDown(500);
                    else
                        $('.ic_text',$(this)).slideDown(500);   
                },
                function () {
                    if((navigator.appVersion).indexOf('MSIE 7.0') > 0)
                    $('.overlay',$(this)).hide();
                    else
                    $('.overlay',$(this)).fadeOut();
                    if(!o.showcaption)
                        $(this).find('.ic_caption').slideUp(200);
                    else
                        $('.ic_text',$(this)).slideUp(200);
                }
            );
        });
    };
    $.fn.capslide.defaults = {
        caption_color   : 'white',
        caption_bgcolor : 'black',
        overlay_bgcolor : 'blue',
        border          : '1px solid #fff',
        showcaption     : true
    };
})(jQuery);

谢谢！

Answer 1

我改变你的代码。

http://jsfiddle.net/64nfP/3/

悬停实现上的图像上的文本

1 个答案: