我正在处理我的单页投资组合网站。由于害怕JavaScript,我找到了一种在工作页面上使用CSS创建灯箱的方法。网站可在此处查看:http://codepen.io/lauramortier/full/ChlcD/
如果您点击"工作",它会将您带到我的投资组合页面,如果您点击缩略图,它会打开一个完整的灯箱大小的形象。它的工作方式也是我想要的,直到你通过点击X关闭它,它一直跳到网站的顶部...... 知道如何让它留在当前的div? (即:#page3?)
这是HTML:
<head>
<title>Laura Mortier|Graphic Designer</title>
<link rel="stylesheet" href="style.css">
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript/smoothscroll.js"></script>
<body>
<header>
<nav>
<ul>
<li><a href="#home" class="smoothScroll">Home</a></li>
<li><a href="#about" class="smoothScroll">About</a></li>
<li><a href="#work" class="smoothScroll">Work</a></li>
<li><a href="#contact" class="smoothScroll">Contact</a></li>
</ul>
</nav>
</header>
<!-----------------PAGES------------------>
<!------Home------>
<div id="page1">
<a id="home"></a>
<h1 id="home-text">Salut! My name is Laura Mortier.
<br>I am a designer who loves making<br>
things look pretty.</h1>
</div>
<!------About------>
<div id="page2">
<a id="about"></a>
<h1 id="about-title">About Me</h1>
<img src="http://i870.photobucket.com/albums/ab270/frenchspy007/6de8148c-6f03-497e-ba24-60c37b45978e_zps13deddb4.jpg"/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
<br>sed do eiusmod tempor incididunt ut labore et dolore<br> magna aliqua. Ut enim ad minim veniam, quis nostrud <br>exercitation ullamco laboris nisi ut aliquip ex ea commodo <br> consequat.<br> Duis aute irure dolor in reprehenderit in voluptate velit esse <br> cillum dolore eu fugiat nulla
pariatur. <br> Excepteur sint occaecat cupidatat non proident, sunt
<br>in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!------Work------>
<div id="page3">
<a id="work"></a>
<h1 id="work-title">Work</h1>
<h2>Here are some of my recent works:</h2>
<div class="portfolio">
<ul id="gallery">
<li>
<a class="lightbox" href="#image1">
<img src="../Thumbnails/four element thumb.png"/>
</a>
<div class="lightbox-target" id="image1">
<img src="../Full-Size Images/four elements cans.png"/>
<a class="lightbox-close" href="#"></a>
</div>
</li>
<li>
<a class="lightbox" href="#image2">
<img src="../Thumbnails/watchdogs-thumb.png"/>
</a>
<div class="lightbox-target" id="image2">
<img src="../Full-Size Images/watchdogs.png"/>
<a class="lightbox-close" href="#"></a>
</div>
</li>
<li>
<a class="lightbox" href="#image3">
<img src="../Thumbnails/happy mouth logo final.png">
</a>
<div class="lightbox-target" id="image3">
<img src="../Full-Size Images/happy mouth logo final.png"
<a class="lightbox-close" href="#"></a>
</div>
</li>
<li>
<a class="lightbox" href="#image4">
<img src='../Thumbnails/designer desk thumb.png'/>
</a>
<div class="lightbox-target" id="image4">
<img src="http://i870.photobucket.com/albums/ab270/frenchspy007/designerdesk_zps1eb2bab6.png"/>
<a class="lightbox-close" href="#"></a>
</div>
</li>
<li>
<a class="lightbox" href="#image5">
<img src="http://i870.photobucket.com/albums/ab270/frenchspy007/newMlogo_zpse9e2cd8f.png"/>
</a>
<div class="lightbox-target" id="image5">
<img src="http://i870.photobucket.com/albums/ab270/frenchspy007/d8340feb-cc71-420a-a58a-c9b454bb8732_zps28886966.png"/>
<a class="lightbox-close" href="#"></a>
</div>
</li>
<li>
<a class="lightbox" href="#image6">
<img src="../Thumbnails/paris my sweet-thumb"/>
</a>
<div class="lightbox-target" id="image6">
<img src="../Full-Size Images/paris my sweet.png"/>
<a class="lightbox-close" href="#"></a>
</div>
</li>
<li>
<a class="lightbox" href="#image7">
<img src="../Thumbnails/dark souls thumb.png"/>
</a>
<div class="lightbox-target" id="image7">
<img src="../Full-Size Images/dark souls.png"/>
<a class="lightbox-close" href="#"></a>
</div>
</li>
<li>
<a class="lightbox" href="#image8">
<img src="../Thumbnails/bioshock poster thumb copy.png">
</a>
<div class="lightbox-target" id="image8">
<img src="../Full-Size Images/bioshock poster.png"/>
<a class="lightbox-close" href="#"></a>
</div>
</li>
</ul>
<!------BEHANCE BUTTON------>
<a href="http://www.behance.net/laura-mortier" target="_blank">
<button id="behance"><h3 id="behance-text">See More on Behance</h3></button>
</a>
<!------Contact------>
<div id="page4">
<a id="contact"></a>
<h1 id="contact-title">Get in touch!</h1>
<p id="contact-text">Wanna work with me or just wanna say hi?<br>
Drop me a line, and I'll get back to you as<br>
soon as I can!</p>
<form action="FormtoEmail.php" method="post">
<label>Name</label>
<input name="name" placeholder="Who are you?"><br>
<label>Email</label>
<input name="email" type="email" placeholder="What's your e-mail?"><br>
<label>Message</label>
<textarea name="message" placeholder="What's on your mind?"></textarea>
<br> <input id="submit" name="submit" type="submit" value="Submit">
</form>
<!-------------CONTACT INFO--------------
<div id="contact-info">
<ul>
<li>mortierlaura@rocketmail.com</li><br>
<li>262-359-0213</li>
</ul>
</div>
---------------------------------------->
<a href="#home" class="smoothScroll"><button id="back-to-top" type="button"><h3 id="fshoo">FSHOO!</h3></button></a>
</div>
</body>
<footer>
<h3 id="footer-text">Laura Mortier © All Rights Reserved</h3>
</footer>
和CSS
body{
width:960px;
margin:0 auto;
display:block;
background-color:#34495e;
}
/*********Navigation***********/
header{
display:block;
background-color:#34495E;
height:60px;
position:fixed;
width:960px;
top:0px;
}
header ul{
margin:0;
padding:0;
float:right;
margin-top:15px;
}
li{
list-style:none;
display:inline;
color:white;
font-family:helvetica;
font-weight:bold;
font-size: 24px;
padding: 20px;
}
a:hover{
color: #3498db;
}
a{
color:white;
text-decoration:none;
}
/*********HOME PAGE***********/
#page1{
margin:0;
height:900px;
background-color:#2ecc71;
border-radius:10px;
}
#home-text{
font-family:helvetica;
font-size:50px;
color:white;
padding-left:75px;
padding-top:100px;
}
/*********ABOUT PAGE***********/
#page2{
height:700px;
background-color:#65C6BB;
border-radius:10px;
margin-top:20px;
}
#about-title{
font-family:helvetica;
color:white;
padding-left:40px;
padding-top:20px;
padding-bottom:40px;
}
p{
font-family:helvetica;
text-align:left;
color:white;
padding-left:100px;
padding-top:20px;
}
img{
float:top;
display:block;
margin-left:175px;
padding:0;
border-radius:100%;
border: 5px solid white;
}
/*********WORK PAGE***********/
/**************GALLERY LIGHTBOX******************/
/*Eliminates padding, centers the thumbnail */
#page3{
height:675px;
background-color:lightcoral;
border-radius:10px;
margin-bottom:20px;
}
#work-title{
font-family:helvetica;
color:white;
padding-left:40px;
padding-top:20px;
}
h2{
color:white;
font-family:helvetica;
padding-left:40px;
font-weight:normal;
font-size:24px;
}
.portfolio{
height:400px;
margin:0 auto;
}
#gallery li{
display:inline-block;
margin:5px;
clear:both;
}
#behance{
background-color:lightcoral;
border-radius:10px;
color:white;
border: 2px white solid;
height:60px;
width:200px;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
float:bottom;
margin-left:350px;
margin-bottom:20px;
}
#behance:hover{
color:white;
border: dashed 2px white;
}
#behance-text{
font-weight:normal;
padding:0;
margin:0;
}
/*******************LIGHTBOX*******************/
/*******************LIGHTBOX*******************/
/* Styles the thumbnail */
a.lightbox img {
height: 150px;
width:150px;
border: 3px solid white;
border-radius:0px;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
margin: 5px;
}
/* Styles the lightbox, removes it from sight and adds the fade-in transition */
.lightbox-target {
position: fixed;
top: 0;
left:0;
width: 100%;
background: rgba(0,0,0,.7);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}
/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
.lightbox-target img {
margin: auto;
position: fixed;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
border-radius:0px;
}
/* Styles the close link, adds the slide down transition */
a.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: fixed;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}
.lightbox-target:target a.lightbox-close {
top: 0px;
}
/*********CONTACT PAGE***********/
#page4{
background-color:steelblue;
height:700px;
border-radius:10px;
margin-bottom:10px;
margin-top:30px;
}
#contact-title{
font-family:helvetica;
color:white;
padding-left:40px;
padding-top:20px;
}
#contact-text{
color:white;
font-size:18px;
font-family:helvetica;
padding-left:40px;
font-weight:normal;
}
#submit{
margin-top:20px;
}
/*********CONTACT FORM***********/
form{
padding-left:40px;
}
label{
display:block;
margin-top:20px;
letter-spacing:2px;
font-family:helvetica;
color:white;
font-size:18px;
}
input, textarea {
width:400px;
height:27px;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:3px;
font-family:helvetica;
font-size:0.9em;
color:#3a3a3a;
}
input, textarea {
width:400px;
height:27px;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:3px;
font-size:0.9em;
color:#3a3a3a;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
textarea {
height:213px;
background:url(images/textarea-bg.jpg) right no-repeat #efefef;
}
input:focus, textarea:focus {
border:1px solid #97d6eb;
}
#submit{
background-color:steelblue;
font-family:helvetica;
font-size:18px;
color:white;
border: 2px solid white;
height:30px;
width:130px;
padding:0;
}
#submit:hover{
background-color:lightcoral;
}
#contact-info{
float:right;
color:white;
display:block;
font-family:helvetica;
font-size:16px;
}
/*********BACK TO TOP BUTTON***********/
#back-to-top{
float:right;
padding-bottom:20px;
padding-right:30px;
}
#back-to-top{
font-family:helvetica;
color:white;
font-size:16px;
font-weight:bold;
background-color:steelblue;
border: 2px solid white;
border-radius:10px;
height:30px;
width:150px;
margin-right:50px;
text-align:center;
}
#fshoo{
margin-left:25px;
margin-top:20px;
}
#back-to-top:hover{
border:dashed 2px white;
}
/*********FOOTER***********/
footer{
background-color:#34495E;
height:60px;
border-radius:10px;
margin-top:0px;
}
#footer-text{
font-family:helvetica;
color:white;
font-size:18px;
font-weight: normal;
padding-top:10px;
padding-left:25px;
}
提前谢谢!
答案 0 :(得分:0)
使用此解决方法:
1)在<a id="work"></a>
标签之后创建一个锚标签
<a name="work"></a>
2)将退出按钮的href="#"
更改为href="#work"
,以便它重新开始工作
随处更改
<a class="lightbox-close" href="#work"></a>
答案 1 :(得分:0)
您只需将href="#"
替换为href="javascript:;"
。:
<a class="lightbox-close" href="javascript:;"></a>
它会留在原地。
答案 2 :(得分:0)
一种适用于我(在Chrome和Edge中)的黑客解决方案是链接到不存在的标签。像这样:
<a class="lightbox-close" href="#adsfasdfasfewf"></a>
不过,我敢肯定还有更好的方法。