0

function closeModal(){
  var modal = document.getElementById('ModalOpen');
  modal.style.display = 'none';
}

function showModal(){
  var modal = document.getElementById('ModalOpen');
  modal.style.display = 'block';
}


function checkLoad() {
   var menu = document.getElementById('menu');

   function scroll(event) {
     var target = event.target;

     if (target.tagName != 'A') return;

     var id = document.querySelector(target.getAttribute('href'));
     var top = id.getBoundingClientRect().top + window.pageYOffset;

     if (document.body.scrollTop > top) {
       (function animate() {

         if (document.body.scrollTop >= top) {
           window.scrollBy(0, -1);
           setTimeout(animate, 20);
         }
         event.preventDefault();
         return;
       })();
     }

     if (document.body.scrollTop < top) {
       (function animate() {

         if (document.body.scrollTop <= top) {
           window.scrollBy(0, 1);
           setTimeout(animate, 20);
         }
         event.preventDefault();
         return;
       })();
     }
   }

   menu.addEventListener('click', scroll);
 }

 addEventListener('load', checkLoad);
.Window {
	 position: fixed;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 left: 0;
	 background: rgba(0,0,0,0.7);
	 z-index: 99999;
	 transition: opacity 400ms ease-in;
	 display: none;
	 pointer-events: none;
}

.Window:target {
	display: block;
	pointer-events: auto;
}

.Window > div {
	 width: 1030px;
	 height:640px;
	 position: relative;
	 margin: 10px auto;
	 background: url("images/background.jpg") no-repeat;
	 background-position: 74px -50px;
	 background-size:925px 640px;
	 box-shadow: 0px 0px 20px 2px;
	 background-color:white;
}
.share{
	position:absolute;
	right-12px;
	top:52px;
	left:992px;
}
.fbshare{
	position:absolute;
	right:-12px;
	top:509px;
	left:992px;
}
.twshare{
	position:absolute;
	right:-12px;
	top:546px;
	left:992px;
}
a{
	float:right;
	text-decoration:none;
	color:white;
}
.leftcol{
	width:200px;
	height:590px;
	margin-top:-590px;
	float:left;
	background: url("images/lcolb.jpg") no-repeat;
	
}
.rigcol{
	width:45px;
	height:590px;
	margin-top:-590px;
	float:right;
	background-color:white;

}
.footer{
	position:fixed;
	top:600px;
	background-color:black;
	width:1030px;
	height:50px;
	

}
.learn{
	position:relative;
	top:-59px;
	width:260px;
	height:50px;
	background-color:#0066cc;
	float:right;
	
}
.learnT{
	font-size:20px;
	margin-right:50px;
}
.learn:hover {background:#3399FF;}
.learn:hover a {color:#fff}
hr{
	background-color:black;
	position:fixed;
	top:462px;
	width:40px;
	height:1px;
	margin-left:3px;
	border:0;
}
.Tfind{
	margin-top:380px;
	font-size:8px;
	font-weight:bold;
	text-align:center;
}
.Thorizont{
	margin:0;
	position:relative;
	top:-20px;
	left:211px;
	color:white;
}
.hr2{
	width:1px;
	height:30px;
	background-color:white;
	position:absolute;
	margin-left:200px;
	top:0px;
}
.hr3{
	width:170px;
	position:absolute;
	top:226px;
	left:5px;
}
.img1{
	margin-left:86px;
	margin-top:10px;
}
.img1{
	margin-left:46px;
	margin-top:12px;
}
.img2{
	margin-top:89px;
	margin-left:15px;
}
.videocontent{
		width:785px;
		height:443px;
		margin-top:107px;
	}
	.button1{
		width:732px;
		height:90px;
		border:0;
		padding:0;
	}
	.button2{
		width:30px;
		height:30px;
		margin-top:7px;
		margin-left:8px;
		border:0;
		padding:0;
	}
	.button3{
		width:30px;
		height:30px;
		margin-left:7px;
		margin-top:16px;
		border:0;
		padding:0;
	}
	.menu{
		width:200px;
		height:135px;
		margin-left:15px;
		font-size:18px;
		margin-top:22px;
	}
	.nav {
		font: 12pt;
		list-style:none;
		padding:0;
		margin-top:22px;
		margin-left:9px;
		width:190px;
		height:45px;
		text-transform:uppercase;
	}
	.tabs
	{
		font: 12pt;
		list-style:none;
		padding:0;
		margin-top:22px;
		width:190px;
		height:45px;
		text-transform:uppercase;
	}
	.nav  li a {
		display:block;
		width:190px;
		height:45px;
		line-height:40px;
		background:#fff;
		color:#000000;
		cursor:pointer;
		transition: all 0.6s linear;
		
	}
	.nav li a:hover{
  transform: scaleY(1.2);
	}
	.img3{
		margin-top:55px;
		margin-left:35px;
	
	}
	.content{
		width:785px;
		height:490px;
	}
	.main{
		width:785px;
		height:590px;
		overflow:scroll;
		position:relative;
		margin-left:200px;
		position:relative;
	}
<body>
 <a href="#ModalOpen" title="modal">
	 <button type="button" class="button1" id="modal_close" onclick="showModal();">
		<img src="images/ban.jpg">	
	 </button>
 </a>
	<div id="ModalOpen" class="Window">
		 <div class="content">
			<div class="main" >
				<section id="tab1">
					<video class="videocontent" controls poster="images/preview.jpg">
						<source src="images/ps.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
					</video>
				</section>
				<section id="tab2">
					<img src="images/background.jpg">
				</section>
			</div>	
				<div class="leftcol">
					<img class="img1" src="images/ps4.jpg">
					<img class="img2" src="images/logo.jpg">
							<div class="tabs" onclick ="checkLoad()>	
								<ul class="nav" id="menu">
									<li class="nav_item">
										<a href="#tab1">Video</a>
									</li>
									<li class="nav_item">
										<a href="#tab2">Horizon Zero Dawn</a>
										</br>
									</li>		
									<li class="nav_item">
										<a href="#tab3">Through Aloy's Eyes</a>
									</li>
								</ul>		
							</div>
					<img src="images/esrb.jpg" class="img3"/>	
					
				</div>
				<div class="rigcol">
				<button type="button" class="button2" id="modal_close" onclick="closeModal();">
					<img src="images/x.jpg">
				</button>
				<button type="button" class="button3">
					<img src="images/share.jpg">
				</button>
				<hr>
					<p class="Tfind"> Find <br/>US ON</p>
				</hr>
				<a href="https://www.facebook.com" class="fbshare">
					<img src="images/fb.jpg">
				</a>
				<a href="https://www.twitter.com" class="twshare">
					<img src="images/twit.jpg">
				</a>
				</div>
				<div class="footer">
					<img src="images/i.jpg" class="img1">
					<hr class="hr2">
						<p class="Thorizont">Click on Horizon Zero Dawn to see the next era of mankind</p>	
						<div class="learn">
							<p class="learnT"><a href="#learnmore">Learn More <strong> > </strong></a></p>
						</div>
				</div>
		</div>
	</div>

function closeModal(){
  var modal = document.getElementById('ModalOpen');
  modal.style.display = 'none';
}

function showModal(){
  var modal = document.getElementById('ModalOpen');
  modal.style.display = 'block';
}

window.addEventListener('load', function(){

}, false )

$(document).ready(function(){
  $("#menu").on("click","a", function (event) {
    event.preventDefault();

    var id  = $(this).attr('href'),

      top = $(id).offset().top;

    $('body,html').animate({scrollTop: top}, 1500);
  });
});
.Window {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.7);
  z-index: 99999;
  transition: opacity 400ms ease-in;
  display: none;
  pointer-events: none;
}

.Window:target {
  display: block;
  pointer-events: auto;
}

.Window > div {
  width: 1030px;
  height:640px;
  position: relative;
  margin: 10px auto;
  background: url("images/background.jpg") no-repeat;
  background-position: 74px -50px;
  background-size:925px 640px;
  box-shadow: 0px 0px 20px 2px;
  background-color:white;
}
.share{
  position:absolute;
  right-12px;
  top:52px;
  left:992px;
}
.fbshare{
  position:absolute;
  right:-12px;
  top:509px;
  left:992px;
}
.twshare{
  position:absolute;
  right:-12px;
  top:546px;
  left:992px;
}
a{
  float:right;
  text-decoration:none;
  color:white;
}
.leftcol{
  width:200px;
  height:590px;
  margin-top:-590px;
  float:left;
  background: url("images/lcolb.jpg") no-repeat;

}
.rigcol{
  width:45px;
  height:590px;
  margin-top:-590px;
  float:right;
  background-color:white;

}
.footer{
  position:fixed;
  top:600px;
  background-color:black;
  width:1030px;
  height:50px;


}
.learn{
  position:relative;
  top:-59px;
  width:260px;
  height:50px;
  background-color:#0066cc;
  float:right;

}
.learnT{
  font-size:20px;
  margin-right:50px;
}
.learn:hover {background:#3399FF;}
.learn:hover a {color:#fff}
hr{
  background-color:black;
  position:fixed;
  top:462px;
  width:40px;
  height:1px;
  margin-left:3px;
  border:0;
}
.Tfind{
  margin-top:380px;
  font-size:8px;
  font-weight:bold;
  text-align:center;
}
.Thorizont{
  margin:0;
  position:relative;
  top:-20px;
  left:211px;
  color:white;
}
.hr2{
  width:1px;
  height:30px;
  background-color:white;
  position:absolute;
  margin-left:200px;
  top:0px;
}
.hr3{
  width:170px;
  position:absolute;
  top:226px;
  left:5px;
}
.img1{
  margin-left:86px;
  margin-top:10px;
}
.img1{
  margin-left:46px;
  margin-top:12px;
}
.img2{
  margin-top:89px;
  margin-left:15px;
}
.videocontent{
    width:785px;
    height:443px;
    margin-top:107px;
  }
  .button1{
    width:732px;
    height:90px;
    border:0;
    padding:0;
  }
  .button2{
    width:30px;
    height:30px;
    margin-top:7px;
    margin-left:8px;
    border:0;
    padding:0;
  }
  .button3{
    width:30px;
    height:30px;
    margin-left:7px;
    margin-top:16px;
    border:0;
    padding:0;
  }
  .menu{
    width:200px;
    height:135px;
    margin-left:15px;
    font-size:18px;
    margin-top:22px;
  }
  .nav {
    font: 12pt;
    list-style:none;
    padding:0;
    margin-top:22px;
    margin-left:9px;
    width:190px;
    height:45px;
    text-transform:uppercase;
  }
  .tabs
  {
    font: 12pt;
    list-style:none;
    padding:0;
    margin-top:22px;
    width:190px;
    height:45px;
    text-transform:uppercase;
  }
  .nav  li a {
    display:block;
    width:190px;
    height:45px;
    line-height:40px;
    background:#fff;
    color:#000000;
    cursor:pointer;
    transition: all 0.6s linear;

  }
  .nav li a:hover{
  transform: scaleY(1.2);
  }
  .img3{
    margin-top:55px;
    margin-left:35px;

  }
  .content{
    width:785px;
    height:490px;
  }
  .main{
    width:785px;
    height:590px;
    overflow:scroll;
    position:relative;
    margin-left:200px;
    position:relative;
  }
<a href="#ModalOpen" title="modal">
  <button type="button" class="button1" id="modal_close" onclick="showModal();">
    <img src="images/ban.jpg">
  </button>
</a>
<div id="ModalOpen" class="Window">
<div class="content">

<div class="main">
<section id="tab1">
  <video class="videocontent" controls poster="images/preview.jpg">
    <source src="images/ps.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  </video>
</section>
<section id="tab2">
  <img src="images/background.jpg">
</section>
</div><!-- /main -->

<div class="leftcol">
  <img class="img1" src="images/ps4.jpg">
  <img class="img2" src="images/logo.jpg">
  <div class="tabs">
    <ul class="nav" id="menu">
    <li class="nav_item">
      <a href="#tab1">Video</a>
    </li>
    <li class="nav_item">
      <a href="#tab2">Horizon Zero Dawn</a>
      </br>
    </li>
    <li class="nav_item">
      <a href="#tab3">Through Aloy's Eyes</a>
    </li>
    </ul>
  </div><!-- /tabs -->
  <img src="images/esrb.jpg" class="img3"/>
</div><!-- /leftcol -->

<div class="rigcol">
  <button type="button" class="button2" id="modal_close" onclick="closeModal();">
    <img src="images/x.jpg">
  </button>
  <button type="button" class="button3">
    <img src="images/share.jpg">
  </button>
  <hr>
  <p class="Tfind"> Find <br/>US ON</p>
  </hr>
  <a href="https://www.facebook.com" class="fbshare">
    <img src="images/fb.jpg">
  </a>
  <a href="https://www.twitter.com" class="twshare">
    <img src="images/twit.jpg">
  </a>
</div><!-- /rigcol -->

<div class="footer">
  <img src="images/i.jpg" class="img1">
  <hr class="hr2">
  <p class="Thorizont">Click on Horizon Zero Dawn to see the next era of mankind</p>
  <div class="learn">
    <p class="learnT"><a href="#learnmore">Learn More <strong> > </strong></a></p>
  </div>
</div><!-- /footer -->

</div><!-- /content -->
</div><!-- /Window -->

Можно ли переписать такой код на javascript?

$(document).ready(function(){
   $("#menu").on("click","a", function (event) {
       event.preventDefault();

     var id  = $(this).attr('href'),

        top = $(id).offset().top;

    $('body,html').animate({scrollTop: top}, 1500);
  });
});
12
  • Элементы a внутри #menu могут динамически меняться или они всегда одни и те же?
    – andreymal
    6 апр 2017 в 9:13
  • jquery это библиотека Javascrpt. Все что можно сделать на jquery можно сделать и на чистом JS. так что ответ - можно.
    – teran
    6 апр 2017 в 9:13
  • 2
    code.tutsplus.com/tutorials/… посмотрите, почитайте и используйте то, что вам нужно.
    – Oleksandr
    6 апр 2017 в 9:15
  • @Oleksandr $('ul').on('click', 'a', fn) там некорректно реализован, если внутри a будут ещё какие-то элементы то это не сработает
    – andreymal
    6 апр 2017 в 9:19
  • 1
    Да, можно переписать, но ты получишь просто ужасную жопаболь особенно с отборкой элементов в JS все очень не сладко. Например document.getElmentsByTagName("a").onclick = function(){}; не сработает. Сработает только document.getElmentsByTagName("a")[0].onclick = function(){}. И меня это очень бесит, так как надо указывать отдельный элемент из возвращаемого массива.
    – Eugen Eray
    6 апр 2017 в 9:23

1 ответ 1

1

Вот и он:

 'use strict';

 function checkLoad() {
   var menu = document.getElementById('menu');

   function scroll(event) {
     var target = event.target;

     if (target.tagName != 'A') return;

     var id = document.querySelector(target.getAttribute('href'));
     var top = id.getBoundingClientRect().top + window.pageYOffset;

     if (document.body.scrollTop > top) {
       (function animate() {

         if (document.body.scrollTop >= top) {
           window.scrollBy(0, -1);
           setTimeout(animate, 20);
         }
         event.preventDefault();
         return;
       })();
     }

     if (document.body.scrollTop < top) {
       (function animate() {

         if (document.body.scrollTop <= top) {
           window.scrollBy(0, 1);
           setTimeout(animate, 20);
         }
         event.preventDefault();
         return;
       })();
     }
   }

   menu.addEventListener('click', scroll);
 }

 addEventListener('load', checkLoad);

  • Я точно не знаю как работает метод animate у jQuery, но я тестировал ваш код, считаю, что полностью добился анимации как в нем.
  • Ваш код мне показался странно работает, но вы просили перевести в js именно его.
  • Просьба, в следующий раз выкладывайте HTML и CSS более подготовленные(с загруженными картинками и т.д.).
2
  • что то не получилось , посмотрите на правильность написания моего кода
    – Calvin
    7 апр 2017 в 5:47
  • @Calvin Как я писал, ваш код на мой взгляд работает странно, я сделал аналогию на javascript, в своих комментариях вы просили именно этого(не смотреть на назначение скрипта), если что-то не так, то нужно вам описать что должно выполняться и как(для этого нужен корректный html и css). Могу посмотреть на вашем сайте. 7 апр 2017 в 11:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.