Question

如何通过单击图像返回基础页面？

点击第一个后，将显示

Picture1。如何返回选择页面？（继续我的选择）。

<a href="picture1.jpg"> <h3>First</h3></a>
<a href="picture2.jpg"><h3>Secong</h3></a>

Answer 1

链接到新的HTML文件，然后使用<img>标签将图像放置在该文件上，而不是链接到图像文件。在同一HTML文件上，您可以使用<a>标签添加指向原始页面的链接。

homepage.html

<a href="first-image.html">Go to first image.</a>
<a href="second-image.html">Go to second image.</a>

first-image.html

<a href="homepage.html">Back to Homepage</a>
<img src="picture1.jpg" alt="a photograph of a kitten">

second-image.html

<a href="homepage.html">Back to Homepage</a>
<img src="picture2.jpg" alt="a photograph of a puppy">

Answer 2

这里是面向结果的方法，可将图像放大到整页并单击关闭。我认为这就是您所需要的：

$(document).ready(function(){
   $('img[data-enlargable]').addClass('img-enlargable').click(function(){
   $("#main").hide();
    var src = $(this).attr('src');
    $('<div>').css({
        background: 'RGBA(0,0,0,.5) url('+src+') no-repeat center',
        backgroundSize: 'contain',
        width:'100%', height:'100%',
        position:'fixed',
        zIndex:'10000',
        top:'0', left:'0',
        cursor: 'zoom-out'
    }).click(function(){
        $(this).remove();
		$("#main").show();
    }).appendTo('body');
});
});

<!DOCTYPE html>
<html>
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body> 

<div id="main">
<div>
<h1>First Image</h1><br>
<img data-enlargable width="100" style="cursor: zoom-in"  src="https://i.imgur.com/7KpCS0Y.jpg" />
</div>
<div>
<h1>Second Image</h1><br>
<img data-enlargable width="100" style="cursor: zoom-in"  src="https://media.alienwarearena.com/media/1327-l.jpg" />
</div> 
</div>
</body>
</html>

历史记录返回键

2 个答案: