Question

我正在尝试使用新的响应式框架来构建我的网站。我做了一些测试，我已经通过标准得到了一个效果我在一个非响应网站上使用这是一个Jquery翻转我使用精灵让我的图像灰色/颜色和翻转，灰色渐变颜色沿使用文本在悬停时翻转和关闭图像。

我的问题是，如果我适应这一点，因为我在响应式网站上的图像没有固定的像素高度，图像显然会显示图像的灰色/彩色边。如果我尝试做％高度＆amp;宽度，显然这不起作用，因为它很快缩小，因为它很快开始显示图像的错误部分。

有谁知道如何解决这个问题，我需要一种反应灵敏的方法来为我的缩略图产生这种效果。我将上传一个示例，以便您可以看到我到目前为止所获得的内容。

我的Jquery：

$(document).ready(function() {

    $("a.thumbnail").hover(function() { //On hover...

        var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

        //Set a background image(thumbOver) on the &lt;a&gt; tag 
        $(this).find("div.thumbimg").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
        //Fade the image to 0 
        $(this).find("span").stop().fadeTo('fast', 0 , function() {
            $(this).hide() //Hide the image after fade
        }); 
    } , function() { //on hover out...
        //Fade the image to 1 
        $(this).find("span").stop().fadeTo('slow', 1).show();
    });

});

我在这里做基本的事情，我对Jquery并不满意。关于适应这一点的任何想法。

编辑**：http://www.visualdecree.co.uk/test/index.html - 展示一起快速抛出测试页面。希望能帮助告诉你我在做什么。

此致中号

响应式网站的Jquery翻转效果

0 个答案: