аналог кода jquery на javascript
350
07 апреля 2017, 23:01
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);
});
});
Answer 1
Здравствуйте Calvin!
Вот и он:
'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 более подготовленные(с загруженными картинками и т.д.).
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
-
21:56
Перевод документов на английский язык: Важность и ключевые аспекты
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47548 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30490 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23621 visits
- Как через css изменить цвет png изображения? 10345 visits
- Blob video url download 9952 visits
- Php curl запрос через прокси с авторизацией 9205 visits
- Работа с captcha vk api 8087 visits
© "hostciti.net" 15.11.2024 | 17:24