[已解决]鼠标hover/点击小图，显示原图时。 原图不住抖动，哪里有问题呢？

blackantt

已经实现： 点击小图，显示原始大图。 但大图不住抖动，哪有问题呢？

能不能改成，点击小图，显示原图。原图持续显示，再点一下，原图消失。(现在的效果是，鼠标走开，原图就消失了)
小图最好不要单独生成。

最佳答案

月排行榜 / 总排行榜

洋洋痒

2023-2-8 14:32:48

blackantt 发表于 2023-2-8 13:50
你说的很对。 本来，再把原图位置往下放，一直点住小图也行。  但如果原图太长，就点不到小图了。

jav ...

好久没写前端忘得差不多了，写了半天才写出来。、
把span .background:hover + .emoji    改成  .abc        (不会起名气，就瞎起个)

<br>
<span><img src="2.png" id="png1" alt=":alice:" title=":alice:" class="background" onclick="fun">
<img src="2.png" id="png2" alt=":alice:" title=":alice:" class="emoji"></span><br>
把两个图片标签加上id把小图加个点击函数
<script>
        document.getElementById("png1").onclick = function() {
        png2=document.getElementById("png2");
        if(png2.className=="emoji"){
                png2.className="abc";
        }else{
                png2.className="emoji";
        }
};
</script>
下边写点击函数
太久没写了，有可能哪里有错误，但是我试了点击显示和再次点击消失这个功能实现了

跳转到最佳答案楼层

洋洋痒

问题在于，每当大图显示时候，你的鼠标就从悬浮在小图上变成不悬浮了，所以大图又消失了。为了证明这一点，你把鼠标放在小图左边一小条上上下移动，就会发现不会抖动了。
因为鼠标放在小图左边，当大图出现时，鼠标还是在小图上，所以大图不会消失，也就不抖动了。
要想实现你想要的功能需要Javascript的事件来实现

blackantt

洋洋痒 发表于 2023-2-8 13:01
问题在于，每当大图显示时候，你的鼠标就从悬浮在小图上变成不悬浮了，所以大图又消失了。为了证明这一点， ...

你说的很对。 本来，再把原图位置往下放，一直点住小图也行。  但如果原图太长，就点不到小图了。

javascript 来放大的例子多，用来显示原图的少。

正在找，点击 显示原图。再点击，原图消失 的代码，你有吗？

洋洋痒

blackantt 发表于 2023-2-8 13:50
你说的很对。 本来，再把原图位置往下放，一直点住小图也行。  但如果原图太长，就点不到小图了。

jav ...

好久没写前端忘得差不多了，写了半天才写出来。、
把span .background:hover + .emoji    改成  .abc        (不会起名气，就瞎起个)

<br>
<span><img src="2.png" id="png1" alt=":alice:" title=":alice:" class="background" onclick="fun">
<img src="2.png" id="png2" alt=":alice:" title=":alice:" class="emoji"></span><br>
把两个图片标签加上id把小图加个点击函数
<script>
        document.getElementById("png1").onclick = function() {
        png2=document.getElementById("png2");
        if(png2.className=="emoji"){
                png2.className="abc";
        }else{
                png2.className="emoji";
        }
};
</script>
下边写点击函数
太久没写了，有可能哪里有错误，但是我试了点击显示和再次点击消失这个功能实现了

洋洋痒

大概思路就是点击小图事件，检查大图是否是显示状态，如果是显示状态就把它改成隐藏
如果是隐藏状态就把它改成显示