Question

JQuery如何改变CSS属性

作了一个常用的前端图片展示效果, 鼠标点击小图时 大图区域对应的进行切换,如图1:

并利用 JQuery imageLens 插件实现了一个局部放大效果 如图2

然后问题来了
当图片切换完成后 局部放大图片依然为初始的图片, 如图3

通过 firebug 查看发现 这个JQuery 局部放大插件是通过 添加一个 层,
并赋予对应的style 样式来实现对应的效果, 如图4

问: 如何通过JQuery 改变图4标示中的 background-image 属性
使其能与图片切换时的路径保持一至性

图片切换效果使用的是jquery 代码如下:
$(function(){ $(".thumbs a").mouseover(function(){ var largePath = $(this).attr("href"); $("#largeImg,#imgTag").attr({src: largePath}); return false; });
});

HTML 代码如下:
<p><img id="largeImg" src="images/img1-lg.jpg" alt="Large image"></img></p><p class="thumbs"> <a href="images/img2-lg.jpg" title="Image 1"><img src="images/img2-lg.jpg" /></a> <a href="images/img3-lg.jpg" title="Image 2"><img src="images/img3-lg.jpg" /></a> <a href="images/img4-lg.jpg" title="Image 3"><img src="images/img4-lg.jpg" /></a> <a href="images/img5-lg.jpg" title="Image 4"><img src="images/img5-lg.jpg" /></a> <a href="images/img1-lg.jpg" title="Image 1"><img src="images/img1-lg.jpg" /></a></p>

采纳后 继续追分, 望各位老师不吝赐教 先行谢过!





Answer 1

$(function(){    
 $(".thumbs a").mouseover(function(){        
   var largePath = $(this).attr("href");        
   $("#largeImg,#imgTag").attr({src: largePath}); 
   // 设置背景
   $('#zoom').css('backgroundImage', 'url(' + largePath + ')');
    return false;                
  });
});

 局部放大功能是怎么写的，如果用了什么插件，看看有没有方法可以设置。

追问

JQuery imageLens 中文翻译:

http://my.oschina.net/qiujumper/blog/102513

demo: http://www.dailycoding.com/Uploads/2011/03/imageLens/demo.html

经过您的指点, 现在能实现局部放大的图片也切换了,

但确没有局部放大的效果了, 如下图, 望继续指教, 谢谢!

正常效果:

不正常效果

追答

$("#img_01").imageLens(); 

你的js里上面的是怎么使用的？

我看到div id="zoom", 改了imageLens文件的js？

可以试试下面的

$(function () {
    $(".thumbs a").mouseover(function () {
        var largePath = $(this).attr("href");
        
        /* 因为没有看到有destroy或reset的方法，
           所以删除之前的large image，
           重新调用imageLens 
        */
        var largeImg = $('#largeImg');
        var largeClone = largeImg.clone();

        // 删除之前的大图，把clone出来的放进去
        largeImage.parent().empty().append(largeClone);

        $("#largeImg, #imgTag").attr({src: largePath});

        // 重新调用imageLens
        $("#largeImg").imageLens();
        return false;
    });
});

追问

这样修改后 就全部失效了
我把整修文件打包放在这里
还请烦请大侠帮忙看看
再次感激不尽!

http://share.weiyun.com/49032ee8f750485705257a036f3fccee

追答

$(function () {
    $(".thumbs a").mouseover(function () {
        var largePath = $(this).attr("href");
         
        /* 因为没有看到有destroy或reset的方法，
           所以删除之前的large image，
           重新调用imageLens 
        */
        var largeImg = $('#largeImg');
        var largeClone = largeImg.clone();
 
        // 删除之前的大图，把clone出来的放进去
        largeImg.parent().empty().append(largeClone);
 
        $("#largeImg, #imgTag").attr({src: largePath});
 
        // 重新调用imageLens
        $("#largeImg").imageLens();
        return false;
    });
});

仙剑奇侠那个图放大效果明显-> 因为图大

其他图效果不明显 -> 因为图小

可以换点大图试试

Answer 2

请将完整代码和图片附上。。