Question

我已经研究了几个类似的脚本来解决我的问题，我试图修改它们以便为我工作，但无济于事。我正在尝试做的是mouseover任何缩略图，并将主图像更改为该特定缩略图并将其渲染为两倍大小。我正在尝试的最后一件事是将主图像链接到与该缩略图链接相同的网站。我想在jquery中使用css执行此操作。我在jsfiddle看到类似的东西。我认为我陷入困境的地方无法完全理解如何更改src属性。我很感激任何帮助。

   <div id="header">
 <a href="http://www.pendilum.com" target="_blank">
 <img id="main" src="images/people1.jpg" width="400" height="400"   alt="people">
 </a>
 </div>
 <div id="footer">
 <a href="http://www.pendilum.com" target="_blank">
 <img class="thumbs" src="images/people1.png" width="auto" height="auto"    alt="people">
 </a>
 <a href="http://www.power.com" target="_blank">
 <img class="thumbs" src="images/people2.png" width="auto" height="auto" alt="handshake">
 </a>
 <a href="http://www.pants.com" target="_blank">
 <img class="thumbs" src="images/people3.png" width="auto" height="auto" alt="peoplejoined">
 </a>
 <a href="http://www.possible.com" target="_blank">
 <img class="thumbs" src="images/people4.png" width="auto" height="auto" alt="unisex">
 </a>
 <a href="http://www.yoga.com" target="_blank">
 <img class="thumbs" src="images/people5.png" width="auto" height="auto" alt="yoga">
 </a>
 </div>

这是JS代码

  window.onload = function(){
 $(document).ready(function(){
 var mainImg = $("#main");
 $(".thumbs").mouseover(function(){
    var src = $(this).attr("src");
    $("#main").attr("src",src);
        $(this).css("transform","scale(2)")

    });
 });
 ;}

Answer 1

你非常接近。

https://jsfiddle.net/j536kzxx/3/

如果您正在使用document.ready，则不需要window.onload。

$(document).ready(function(){
 var $mainImg = $("#main");
 var $mainLink = $("#header > a");
 $(".thumbs").mouseover(function(){
    var src = $(this).attr("src");
    var link = $(this).parent().attr("href");
    var doubleWidth = $(this).width()*2;
    var doubleHeight = $(this).height()*2;
    $mainImg.attr("src",src);
    $mainImg.css({"width":doubleWidth,"height:":doubleHeight})
    $mainLink.attr("href",link);
    });
 });

获取悬停img的宽度/高度并将其应用于主img。获取父锚链接并将其应用于主锚链接。瞧。

编辑：javascript是问题所在。除了一件事，你的HTML很好。您应该将400px设置为主img 容器的宽度和高度，而不是img本身。这是因为您希望缩略图的大小是其原始大小的两倍，而不是所有400px。

对于parent（），它不仅仅是锚链接。除<{1}}之外的所有 html元素都可以包含父级。父母只是一个包含另一个元素的元素。

<html></html>

它是一个层次结构或树。这张图片应该很有用

鼠标悬停缩略图将主图像更改为缩略图的两倍大小，主图像应链接到与缩略图

1 个答案: