Question

我正在尝试创建像这样的缩放效果http://jsfiddle.net/SWDhG/ 但是我正在尝试打开<a href="imglink">链接而不是<img src="">标记，所以我需要帮助jquery。

HTML：

<div class="images"> 
    <a href="http://us.123rf.com/400wm/400/400/teddy2007b/teddy2007b0903/
        teddy2007b0903‌00008/4539531-cup-and-bouquet-of-flowers-decorative-floral-
       background-for-banner-‌vector.jpg" class="zoom" title=""> 
     <img src="http://3.bp.blogspot.com/-BKBDFTVyTVs/TdmU9SuHU5I/AAAAAAAAASk/
      e7oUIN34cc4/s‌320/blue+salvia.jpg" class="attachment-shop_single wp-post-image"/>
     </a>
 </div>

这是原始代码

$(function() {
    $('li a').click(function() {
        $('div img').attr('src', $(this).find('img').attr('src'));
        $('div').show();
        return false;
    });

    $('div').mousemove(function(e){
        var h = $(this).find('img').height();
        var vptHeight = $(document).height();
        var y = -((h - vptHeight)/vptHeight) * e.pageY;

        $('div img').css('top', y + "px");
    });

    $('div').click(function(){
        $('div').hide();
    });
});

Answer 1

http://jsfiddle.net/SWDhG/36/

这是一个做你想要的小提琴。

   $(function() {
$('li a').click(function() {

//here's the change --> 
    $('div img').attr('src', $(this).attr('href'));
// we change the information we take from the element to the 
// href attribute of the element, $(this), which is assigned
// to the element that caused the event, the anchor tag
    $('div').show();
    return false;
});

$('div').mousemove(function(e){
    var h = $(this).find('img').height();
    var vptHeight = $(document).height();
    var y = -((h - vptHeight)/vptHeight) * e.pageY;

    $('div img').css('top', y + "px");
});

$('div').click(function(){
    $('div').hide();
});
});

为了简洁起见，我使用了自己的演示图像href属性。

Answer 2

获取超链接地址：

$('li a').click(function() {
    var link = $(this).attr('href');
    // do something with it
    return false;
});

产品缩放效果WooCommerce

2 个答案: