1

我得到了这个画廊。当您悬停图像时，我想应用放大镜（或其他东西），因此用户可以轻松看到图像可以变大。我想要的效果和这个差不多。

我一直在寻找 wordpress 中的不同文件，我的问题是我无法 <span class="roll" ></span>在链接中添加图像。

如果有人知道如何做到这一点，请告诉。:-)

谢谢。

我把它放在了footer.php

<script>
//$('a.image:link').prepend('<span class="roll"></span>');
$('.gallery-icon a:link').each(function() {
     $(this).prepend('<span class="roll"></span>');
     // OR
     //$(this).wrapInner('<span class="roll"></span>');
});
</script>

<script>
$(function() {
// OPACITY OF BUTTON SET TO 0%
$(".roll").css("opacity","0");

// ON MOUSE OVER
$(".roll").hover(function () {

// SET OPACITY TO 70%
$(this).stop().animate({
opacity: .7
}, "slow");
},

// ON MOUSE OUT
function () {

// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 1
}, "slow");
});
});
</script>

这在css中。

span.roll {
    background:url(images/zoom.png) center center no-repeat #000;
    height: 120px;
    position: absolute;
    width: 150px;
    z-index: 7000;
    -webkit-box-shadow: 0px 0px 4px #ff0066;
    -moz-box-shadow: 0px 0px 4px  #ff0066;
    box-shadow: 0px 0px 4px  #ff0066;
}

当我从我的 webdeveloper 查看代码时，它看起来像这样： 图像代码

就像 wordpress 覆盖了我所有的 css 等等。

4

1 回答 1

2

如何使用 jQuery 将跨度附加（前置）到您的链接？没有看到你的代码，这里有一个小预告

$('.IMAGELINK').each(function() {
     $(this).prepend('<span class="roll"></span>');
     // OR
     $(this).wrapInner('<span class="roll"></span>');
});

禁用 javascript 后，缩放功能将被禁用，因此不会将这个 span 添加到代码中。

于 2012-02-28T15:18:51.670 回答