2

请看演示画廊

有一些我无法修复的错误。

  1. 在 Safari 中，文本闪烁，而mouseover其他元素
  2. 在 Safari 和 Chrome 中，图像尺寸不正确 (270x128) - 只有在 Firefox 中显示正确
  3. 在 Firefox 中，淡出效果不流畅

CSS 代码：

div li img{
    width: 270px;
    height: 128px;
    -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
    -moz-transform:scale(0.8); /*Mozilla scale version*/
    -o-transform:scale(0.8); /*Opera scale version*/
    -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
    -moz-transition-duration: 0.5s; /*Mozilla duration version*/
    -o-transition-duration: 0.5s; /*Opera duration version*/
    opacity: 1; /*initial opacity of images*/
    margin: 0 10px 5px 0; /*margin between images*/
    box-shadow:0px 20px 10px -15px #000;
}

img:hover {
    -webkit-transform:scale(0.85); /*Webkit Scale version*/
    -moz-transform:scale(0.85); /*Mozilla scale version*/
    -o-transform:scale(0.85); /*Opera scale version*/
    box-shadow:0px 0px 30px #000; /*CSS3 shadow: 30px blurred shadow all around image*/
    -webkit-box-shadow:0px 0px 30px #000; /*Safari shadow version*/
    -moz-box-shadow:0px 0px 30px #000; /*Mozilla shadow version*/
    opacity: 1;
}

.overlay {
    position: absolute;
    margin-top: -190px;
    height: 200px;
    width: 220px;
    z-index: 9999;
    background-color: red;
    opacity: 0;
}

div li {
    float: left;
    padding: 1px;
    width: 270;
    height: 128px;
}

.darken {
    filter: alpha(opacity=1); /* internet explorer */
    -khtml-opacity: 0.1;      /* khtml, old safari */
    -moz-opacity: 0.1;       /* mozilla, netscape */
    opacity: 0.2;           /* fx, safari, opera */
    -webkit-transition-duration: 0.5s, 0.5s; 
    -webkit-transition-timing-function: linear, ease-in, ease-out;
}

.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); 
}

这是我的 jQuery 代码：

$("#all").on("click", { name: "Alle" }, activateCategory);
$("#eating").on("click", { name: "Essen Trinken" }, activateCategory);
$("#it").on("click", { name: "IT Technik" }, activateCategory);
$("#celebrate").on("click", { name: "Einladen Feiern" }, activateCategory);
$("#education").on("click", { name: "Ausbildung Kultur" }, activateCategory);

function activateCategory(event) {
    if (event.data.name != "Alle") {
        $('li').each(function() {
            //alert("Event: " + event.data.name + "\nTag: " + $(this).data('tags'));
            if ($(this).data('tags') != event.data.name) {
                //alert("treffer in Kategorie " + event.data.name);
                $(this).stop(true,true).addClass("darken",100);
                $(this).append('<div class="overlay"></div>');
            }
            else {
                $(this).stop(true,true).removeClass("darken",100);
                $(this).find('div').remove();
            }
        });
    }
    else {
        $('li').each(function() {
            $(this).removeClass("darken",100);
            $(this).find('div').remove();
        });
    }
}

有人可以帮我解决这些问题吗？

4

1 回答 1

2

在这个标签上很好

<li data-tags="Einladen Feiern"><a href="#"><img class="resizableImage" width="270" height="128" src="img/shots/6.jpg" alt="Illustration"><br></a><p class="description"><a href="#">Feiern</a><br>Beschreibung</p></li>

你在css中的宽度是

width: 270;

什么时候应该

width: 270px;

完整的CSS是

div li {
   float: left;
   padding: 1px;
   width: 270px;
   height: 128px;
}

在此处输入图像描述

另外，如果某些事情不顺利，则可能是浏览器的渲染问题，而您对此无能为力。

于 2013-06-06T12:09:43.947 回答