用键盘箭头更改图像

时间：2018-05-23 10:04:26

标签： javascript html

大家好我在我的投资组合网站上有图像网格。它们是模态的，当我点击它在网站前面弹出的图像，但我无法弄清楚如何用键盘箭头改变它们。这是指向页面http://valerikarageorgiev.com/Photography/index.html的链接，这是javascript：

<script>
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a 
caption
var imgs = document.getElementsByClassName('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

for (var i = 0; i < imgs.length; i++) {
imgs[i].addEventListener('click', e => {
modal.style.display = "block";
modalImg.src = e.target.src;
captionText.innerHTML = e.target.alt;
});
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
modal.style.display = "none";
}

document.onkeyup = function (e) {
e = e || window.event;

// 27 is the ESC key
if(e.keyCode === 27) modal.style.display = "none";
};
</script>

3 个答案:

答案 0 :(得分：1)

您可以添加以下事件侦听器并检查RightArrow / LeftArrow代码：

document.addEventListener('keydown', function(ev) {
    if(ev.keyCode === 37){
    //Left arrow
    }
    else if(ev.keyCode === 39){
    //Right arrow
    }
});

然后你可以通过id找到你的弹出组件，它应该有下一个/上一个函数。

答案 1 :(得分：0)

left，righ t和es c键正常运行。但我无法弄清楚应该显示什么事件。因为我主要使用函数和数组存储图像。您可以在按下alert和left键时显示right来尝试此代码，以便关键事件正常运行。只需添加需要在该事件上显示的必要显示即可。

＆＃13;
＆＃13; 
@charset "utf-8";

html, body  {
	height:100%;
	width:100%;
	padding:0px;	
	margin:0px;
	background-color:white;
	
}

body {
	
	overflow-x:hidden;
}



@font-face {
    font-family:futuraat;
	src:url( ../content/font/FuturaPTLight.otf); }
	
@font-face {
    font-family:futuraa;
    src:url(  ../content/font/FuturaPTBook.otf);
}	

@font-face {
    font-family:mood;
    src:url( CONTENT/font/CODE-Light.otf);
}	

#header {
	
	background-color:rgba(255, 255, 255, 1);	
	width:100%;
	height:52px;
	position: fixed;
	top:0;
	left:0px;
	z-index:9100;
	
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow:hidden; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
	font-family:futuraa;
	font-size:22px;
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    height:100%;
	margin-top:-4%;
	z-index:9999;
	
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
	
}

.myImg {
	
	cursor:pointer;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
	
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: fixed;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bolder;
	boredr:3px white solid;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}


#header ul {
	list-style: none;	
	margin:0px;
	padding:0px;
	width:100%;	
	position:relative;
	right:5%;
	
	
}


#aaaaa{
	
	width:100%;
	
}


#header li {
	display: inline-block;
	padding-left:1px;
	margin-top:-3px;	
	float:right;
	margin:12px 10px 0px 25px;
	
}
.menua {  

	color:rgb(0,0,0);
	text-decoration:none;
	font-size:23px;
	font-family:futuraat;
	display: inline-block;
	padding-bottom: 3px;
	opacity:0.5;
	transition: 0.2s linear;
	
}

.menua:hover {
	

	color:rgb(0,0,0);
	opacity:0.9;
}



#nagore {
	position:fixed;
	display:none;
	z-index:9999;
	top:50%;
	right:10px;
	width:40px;
	opacity: .90;
  	animation: pulse 1.2s linear alternate infinite;
	border:1px rgba(255,255,255,0.1) solid;
	border-radius:50px;
	padding:4px;
	background-color:rgba(255,255,255,0.6);
}


#logo1 {
	width:190px;
	height:auto;
	position:absolute;	
  	margin: auto;	
	margin-left:-115px;	
	top:115px;
	left:50%;
	z-index:1;	
}


#logooo {
	position:fixed;
	top:0px;
	z-index:9000;
	width:100%;
	
	height:100%;
}

#logo {
	position:absolute;
	height:35px;
	top:11px;
	left:5%;
	opacity:0.5;
	transition: 0.2s linear;
}

#logo:hover {
	position:absolute;
	opacity:0.7;
}

#logo5 {
	
	position:absolute;
	margin-top:10%;
	left:50%;
	margin-left:-125px;
	width:250px;
	z-index:1;
	opacity:.9;
	
}

#menu-icon {
	background:url( content/images/menu-icon-11.png);	
	background-size:100%;
	background-repeat:no-repeat;
	display:none;	
	height:30px;
	width:40px;
	margin:14px 14px 0px 0px;	
	opacity:0.8;
	
}

.categories {
	
	width:100%;
	position:relative;
}

.categories a {
	
	text-decoration:none;
	color:rgba(0,0,0,0.5);
}

.categories a:hover {
	
	text-decoration:none;
	color:rgba(0,0,0,0.9);
}

#categor {
	position:relative;
	color:black;
	margin:auto;
	text-align:center;
	top:100px;
	font-family:futuraat;
	font-weight:300;
	font-size:34px;
}

#categor2 {
	position:relative;
	color:black;
	margin:auto;
	text-align:center;
	top:180px;
	font-family:futuraat;
	font-size:34px;
	padding-top:60px;
}

#categor3 {
	position:relative;
	color:black;
	margin:auto;
	text-align:center;
	top:-80px;
	font-family:futuraat;
	font-size:34px;
	padding-top:60px;
	
}

#categor1 {
	position:relative;
	color:rgba(0,0,0,0.5);
	margin:auto;
	text-align:center;
	top:120px;
	font-family:futuraat;
	font-size:24px;
}

#snimki {
	position:relative;
	margin-top:190px;
	width:90%;
	left:5%;
	padding-bottom:150px;
}

#ani {
	position:relative;
	width:80%;
	left:10%;
}

#video-background {

  position: relative;
	top:-70px;
	left:5%;
 width: 90%; 
	box-shadow: 0px -5px 10px rgba(0, 0, 0, .6);
	box-shadow: 0px 1px 3px rgba(0, 0, 0, .6);
	z-index:50;
	margin:30px 0px;
}




@media only screen and (max-width:640px){
	#header {
		position:fixed;
	}
	
	
	#menu-icon {
		display:block;
		position:fixed;
		top:6px;
		right:8px
	}
	
	.zooom {
		visibility:hidden;
	}
	
	h2 {
		display:block;
		
	}
	#header ul, nav:active ul {
		
	display:none;
	position: absolute;
	background: rgba(0,0,0,0.8);
	right:0px;
	top:52px;
	width:100%;	
	z-index:3000;
	
	
	}
	
	#header:hover ul {
		display: block;
			}
	
	#header li {
		text-align:center;
		width:100%;
		padding:15px 0;
		margin: 0;		
	}
	.menua{
	color:white;	
		
	}
}

.mmm {
}

.row img {
	
	opacity:1
}

.row img:hover {
	
	opacity:0.8;
}










* {
    box-sizing: border-box;
}

.header {
    text-align: center;
    padding: 32px;
	opacity:0;
}

.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
    -ms-flex: 33.3333%; /* IE10 */
    flex: 33.3333%;
    max-width: 33.3333%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}
＆＃13; 
<!doctype html>
<html>
<head>

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110185463-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-110185463-1');
</script>
<link rel="shortcut icon" type="image/ico" href="../content/images/logoISO.ico" />
<meta name="description" content="Valeri Karageorgiev loves design, photography and snowboarding"/>

<meta charset="utf-8">
<title>Photograhy</title>
<link href="css.css" rel="stylesheet" type="text/css">
<script src="../content/jquery-3.2.1.min.js"></script>
<script>
	$(document).ready(function() {
		$('a[href^="#"]').on('click',function (e) {
			e.preventDefault();
			
			var target = this.hash;
			var $target = $(target);
			
			$('html, body').animate({
				'scrollTop': $target.offset().top
			}, 1200, 'swing', function () {
				window.location.hash = target;
			});
		});
	});
	</script>
	
</head>

<body>
<div id="header">
				<a href="../index.html" ><img src="../content/images/home.png" id="logo"></a>		
		<nav>			
			<a href="#" id="menu-icon"></a>
			<ul id="opa">
				<li><a href="../Contact/index.php" id="kon" class="menua">Contact</a></li>
				
				<li><a href="../Story/index.html" id="pro" class="menua">Story</a></li>
							
			</ul>			
		</nav>	  				
	</div>
	
<a href="#categor"><img src="../content/images/strelka.png" id="nagore"></a>
	
<div class="categories">

<h1 id="categor">Photography</h1>	
	

	
	<div class="header" >
  <h1>Responsive Image Grid</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <img src="http://valerikarageorgiev.com/content/images/Photography/1.jpg" style="width:100%" class="myImg" alt="Жоркатааа">
    <img src="http://valerikarageorgiev.com/content/images/Photography/2.jpg" style="width:100%" class="myImg">
    <img src="../content/images/Photography/3.jpg" style="width:100%" class="myImg">
    <img src="../content/images/Photography/4.jpg" style="width:100%" class="myImg">
    <img src="../content/images/Photography/5.jpg" style="width:100%" class="myImg">
    <img src="../content/images/Photography/6.jpg" style="width:100%" class="myImg">
    <img src="../content/images/Photography/7.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/8.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/9.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/10.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/11.jpg" style="width:100%" class="myImg" >
	  <img src="../content/images/Photography/33.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/34.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/35.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/36.jpg" style="width:100%" class="myImg" >
  </div>
	
  <div class="column">
    <img src="../content/images/Photography/12.jpg" style="width:100%" class="myImg" alt="Жоркатааа">
    <img src="../content/images/Photography/22.jpg" style="width:100%" class="myImg">
    <img src="../content/images/Photography/13.jpg" style="width:100%" class="myImg">
    <img src="../content/images/Photography/14.jpg" style="width:100%" class="myImg">
    <img src="../content/images/Photography/15.jpg" style="width:100%" class="myImg">
    <img src="../content/images/Photography/16.jpg" style="width:100%" class="myImg">
    <img src="../content/images/Photography/17.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/18.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/19.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/20.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/21.jpg" style="width:100%" class="myImg" >
	  <img src="../content/images/Photography/37.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/38.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/39.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/40.jpg" style="width:100%" class="myImg" >
  </div>  
  <div class="column">
     <img src="../content/images/Photography/32.jpg" style="width:100%" class="myImg" alt="Жоркатааа">
    <img src="../content/images/Photography/45.jpg" style="width:100%" class="myImg">
    <img src="../content/images/Photography/23.jpg" style="width:100%" class="myImg">
    <img src="../content/images/Photography/24.jpg" style="width:100%" class="myImg">
    <img src="../content/images/Photography/25.jpg" style="width:100%" class="myImg">
    <img src="../content/images/Photography/26.jpg" style="width:100%" class="myImg">
    <img src="../content/images/Photography/27.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/28.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/29.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/30.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/31.jpg" style="width:100%" class="myImg" >
	  <img src="../content/images/Photography/41.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/42.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/43.jpg" style="width:100%" class="myImg" >
	   <img src="../content/images/Photography/44.jpg" style="width:100%" class="myImg" >
  </div>
  
	
</div>	
	</div>	
	
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>
	
	
<script>
			$(window).scroll(function() {
		var pxFromBottom = 6300;
		if ($(window).scrollTop() + $(window).height() > $(document).height() - pxFromBottom) {
			$('#nagore').fadeIn('slow');
		} else {
			$('#nagore').fadeOut('slow')
			}
		});	
	</script>
	
	
	<script>
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var imgs = document.getElementsByClassName('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

for (var i = 0; i < imgs.length; i++) {
  imgs[i].addEventListener('click', e => {
      modal.style.display = "block";
      modalImg.src = e.target.src;
      captionText.innerHTML = e.target.alt;
    });
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
   
}
  
document.onkeyup = function (e) {
   
  e = e || window.event;

  if(e.keyCode== 37)   {

    alert('left key')


  }
  if(e.keyCode== 39)   {

    alert('right key')


  }
  
    // 27 is the ESC key
    if(e.keyCode === 27) modal.style.display = "none";
};


</script>
	


</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

HTML：

<div class="row"> 
<div class="column">
<img src="../content/images/Photography/1.jpg" style="width:100%" 
class="myImg" alt="Жоркатааа">
<img src="../content/images/Photography/2.jpg" style="width:100%" 
class="myImg">
<img src="../content/images/Photography/3.jpg" style="width:100%" 
class="myImg">
<img src="../content/images/Photography/4.jpg" style="width:100%" 
class="myImg">
</div>

<div class="column">
<img src="../content/images/Photography/12.jpg" style="width:100%" 
class="myImg" alt="Жоркатааа">
<img src="../content/images/Photography/22.jpg" style="width:100%" 
class="myImg">
<img src="../content/images/Photography/13.jpg" style="width:100%" 
class="myImg">
<img src="../content/images/Photography/14.jpg" style="width:100%" 
class="myImg">

</div>  
<div class="column">
 <img src="../content/images/Photography/32.jpg" style="width:100%" 
class="myImg" alt="Жоркатааа">
<img src="../content/images/Photography/45.jpg" style="width:100%" 
class="myImg">
<img src="../content/images/Photography/23.jpg" style="width:100%" 
class="myImg">
<img src="../content/images/Photography/24.jpg" style="width:100%" 
class="myImg">    
</div>  
</div>  
</div>  

<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

JAVASCRIPT：

<script>
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a 
caption
var imgs = document.getElementsByClassName('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

for (var i = 0; i < imgs.length; i++) {
imgs[i].addEventListener('click', e => {
  modal.style.display = "block";
  modalImg.src = e.target.src;
  captionText.innerHTML = e.target.alt;
});
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
modal.style.display = "none";
}

document.onkeyup = function (e) {
e = e || window.event;

// 27 is the ESC key
if(e.keyCode === 27) modal.style.display = "none";
};
</script>
相关问题
最新问题