思路：
主要内容为鼠标事件获取和网页滚动条的滚动window.onscroll，js实现轮播图
当鼠标接触到某元素时进行一些元素属性的修改
判断滚动条滚动到某一位置时，修改某些元素的属性
网页内容：
代码实现：
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="base.css">
</head>
<body class="">
<!-- 网页标题start -->
<div class="Pagetitle">
<div class="w" style="height: 50px;">
<a href="javascript:;"><img src="images/title.jpg" alt="" style="width:100%; height:100%;margin-left: 0px; opacity: 1;"></a>
<div style="">
<div style="">
<a href="javascript:;">HOME</a>
<a href="javascript:;">CHI SONO</a>
<a href="javascript:;">OUTDOOR</a>
<a href="javascript:;">PORTRAIT</a>
<a href="javascript:;">FASHION</a>
<a href="javascript:;">FOOD</a>
<a href="javascript:;">CORPORATE</a>
<a href="javascript:;">WEDDING</a>
<a href="javascript:;">REPORTAGE</a>
<a href="javascript:;">3D ARCHITECTURE</a>
<a href="javascript:;">INFO</a>
</div>
</div>
</div>
</div>
<!-- 网页标题end -->
<!-- 网页背景start -->
<img src="images/bgc1.jpg" alt="" class="bgcone" style="">
<img src="images/bgc2.jpg" alt="" class="bgcone" style="">
<!-- 网页背景end -->
<!-- 网页头部start -->
<div class="header">
<h4 style="font-size: 70px;">MATTEO ZANGA</h4>
<p style="font-size: 25px;">ADVENTURE AND COMMERCIAL PHOTOGRAPHER</p>
<div>
<div>"La fotografia è il mezzo, non il fine"</div>
</div>
</div>
<!-- 网页头部end -->
<!-- 网页内容start -->
<div class="neirong" style="height:0px;">
<div>
<h4>FOTOGRAFIA COMMERCIALE</h4>
<div>
</div>
<p style="left: 55px;">La fotografia corporate come valorizzazione dell’azienda, delle persone,</p>
<p style="left: 220px;">della filosofia, dei prodotti, dei processi produttivi.</p>
<a href="javascript:;">SCOPRI</a>
</div>
<div>
<img src="images/neirong1.jpg" alt="">
<a href="javascript:;">
<h4>CORPORATE</h4>
</a>
</div>
<div>
<img src="images/neirong2.jpg" alt="">
<a href="javascript:;">
<h4>FASHION</h4>
</a>
</div>
<div>
<h4>FOTOGRAFIA MODA</h4>
<div>
</div>
<p style="">Servizi fotografici moda per cataloghi, book, shooting collezioni e pubblicità</p>
<p style="">per negozi, case di moda, stilisti, artigiani.</p>
<a href="javascript:;">SCOPRI</a>
</div>
<div>
<h4>FOOD PHOTOGRAPHY</h4>
<div>
</div>
<p style="left: 70px;">Food, beverage, still life… immagini commerciali per ristoranti, aziende</p>
<p style="left: 155px;">alimentari, produttori, blog, editoria del settore alimentare.</p>
<a href="javascript:;">SCOPRI</a>
</div>
<div>
<img src="images/neirong3.jpg" alt="">
<a href="javascript:;">
<h4>FOOD</h4>
</a>
</div>
<div>
<img src="images/neirong4.jpg" alt="">
<a href="javascript:;">
<h4>OUTDOOR</h4>
</a>
</div>
<div>
<h4>FOTOGRAFIA OUTDOOR</h4>
<div>
</div>
<p style="">Preparazione tecnica e fisica, capacità di adattamento e saper cogliere</p>
<p style="">l’attimo: la ricetta di un buon fotografo outdoor.</p>
<a href="javascript:;">SCOPRI</a>
</div>
</div>
<!-- 网页内容end -->
<!-- 第二部分头部start -->
<div class="headerer">
<div></div>
<p>"Io non sono un fotografo di montagna, sono un fotografo in montagna."</p>
<div></div>
</div>
<!-- 第二部分头部end -->
<!-- 第二部分内容start -->
<div class="erneirong" style="height:0px;">
<div>
<h4>RITRATTI</h4>
<div>
</div>
<p style="left: 35px;">Quella del ritratto è l’arte che permette di raccontare al meglio le persone,</p>
<p style="left: 200px;">l’essere umano al centro delle ricerche fotografiche.</p>
<a href="javascript:;">SCOPRI</a>
</div>
<div>
<img src="images/erneirong1.jpg" alt="">
<a href="javascript:;">
<h4>PORTRAIT</h4>
</a>
</div>
<div>
<img src="images/erneirong2.jpg" alt="">
<a href="javascript:;">
<h4>WEDDING</h4>
</a>
</div>
<div>
<h4>FOTOGRAFO MATRIMONI</h4>
<div>
</div>
<p style="">Il giorno delle nozze è fatto per essere vissuto, al fotografo di matrimoni</p>
<p style="">spetta il compito di raccontare una storia d’amore.</p>
<a href="javascript:;">SCOPRI</a>
</div>
<div>
<h4>REPORTAGE FOTOGRAFICI</h4>
<div>
</div>
<p style="left: 80px;">Il reportage è quanto di più gratificante ci sia per un fotografo.</p>
<p style="left: 10px;">Raccontare una storia attraverso le immagini, conoscere e far conoscere.</p>
<a href="javascript:;">SCOPRI</a>
</div>
<div>
<img src="images/erneirong3.jpg" alt="">
<a href="javascript:;">
<h4>REPORTAGE</h4>
</a>
</div>
<div>
<img src="images/erneirong4.jpg" alt="">
<a href="javascript:;">
<h4>3D ARCHITECTURE</h4>
</a>
</div>
<div>
<h4>3D ARCHITECTURE</h4>
<div>
</div>
<p style="">Un metodo innovativo per l’elaborazione grafica di ortofoto con</p>
<p style="">sovrapposizione a nuvola di punti ricavata da laserscanner per esportazione</p>
<p style="">di ortofoto 2D misurabile.</p>
<a href="javascript:;">SCOPRI</a>
</div>
</div>
<!-- 第二部分内容end -->
<!-- 尾部start -->
<div class="tail">
<a href="javascript:;">
RICHIEDI UN PREVENTIVO
</a>
</div>
<!-- 尾部end -->
<!-- 尾部轮播图start -->
<div class="lunbo">
<h4>CLIENTI & PARTNER</h4>
<div class="xian"></div>
<div class="box">
<span><a href="javascript:;"><</a></span>
<ul style="left: 25px;">
<li><img src="images/lunbo1.jpg" alt=""></li>
<li><img src="images/lunbo2.jpg" alt=""></li>
<li><img src="images/lunbo3.jpg" alt=""></li>
<li><img src="images/lunbo4.jpg" alt=""></li>
<li><img src="images/lunbo5.jpg" alt=""></li>
<li><img src="images/lunbo6.jpg" alt=""></li>
<li><img src="images/lunbo7.jpg" alt=""></li>
<li><img src="images/lunbo8.jpg" alt=""></li>
<li><img src="images/lunbo9.jpg" alt=""></li>
<li><img src="images/lunbo10.jpg" alt=""></li>
<li><img src="images/lunbo11.jpg" alt=""></li>
<li><img src="images/lunbo12.jpg" alt=""></li>
<li><img src="images/lunbo13.jpg" alt=""></li>
<li><img src="images/lunbo14.jpg" alt=""></li>
<li><img src="images/lunbo15.jpg" alt=""></li>
<li><img src="images/lunbo16.jpg" alt=""></li>
<li><img src="images/lunbo17.jpg" alt=""></li>
<li><img src="images/lunbo18.jpg" alt=""></li>
<li><img src="images/lunbo19.jpg" alt=""></li>
<li><img src="images/lunbo20.jpg" alt=""></li>
<li><img src="images/lunbo21.jpg" alt=""></li>
<li><img src="images/lunbo22.jpg" alt=""></li>
</ul>
<ol>
</ol>
<span><a href="javascript:;">></a></span>
</div>
</div>
<!-- 尾部轮播图end -->
<!--結尾start-->
<div class="cre">
<a href="javascript:;">Credits</a>
<p> | © 2022 MATTEO ZANGA | C.F. ZNGMTT80E08D952V - P.IVA 03601060167 | </p>
<a href="javascript:;">Privacy Policy</a>
<a href="javascript:;">Cookie Policy</a>
</div>
<!--結尾end-->
<script src="index.js"></script>
</body>
</html>JS代码修改元素透明度和字体大小：
function touming(obj) {
let o = 2;
obj.timer1 = window.setInterval(function() {
if (o == 10) {
clearInterval(obj.timer1);
}
obj.style.opacity = o / 10;
o++;
}, 110)
}
function zitixiaoda(obj, chichun) {
let x = 1;
obj.timer2 = window.setInterval(function() {
if (x == 200) {
clearInterval(obj.timer2);
}
obj.style.fontSize = chichun - chichun / 10 + chichun / 2000 * x + 'px';
x++;
}, 5)
}JS代码元素上下左右移动：
function xiashang(obj, juli, sudu) {
let xs = 0;
juli > 0 ? xs++ : xs--;
obj.timer3 = window.setInterval(function() {
if (xs == juli) {
clearInterval(obj.timer3);
}
juli > 0 ?
obj.style.top = obj.offsetTop + 1 + 'px' :
obj.style.top = obj.offsetTop - 1 + 'px';
juli > 0 ? xs++ : xs--;
}, sudu)
}
function zuoyou(obj, juli, sudu) {
let zy = 0;
juli > 0 ? zy++ : zy--;
obj.timer3 = window.setInterval(function() {
if (zy == juli) {
clearInterval(obj.timer3);
}
juli > 0 ?
obj.style.left = obj.offsetLeft + 1 + 'px' :
obj.style.left = obj.offsetLeft - 1 + 'px';
juli > 0 ? zy++ : zy--;
}, sudu)
}JS实现尾部轮播图：
for (var i = 0; i < lunboul.children.length; i++) {
var li = document.createElement('li');
li.setAttribute('index', i);
ol.appendChild(li);
li.addEventListener('click', function() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
var index = this.getAttribute('index');
num = index;
circle = index;
this.className = 'current';
zyyidong(lunboul, -index * 184 + 25);
})
}
for (var i = 0; i < 8; i++) {
var li = lunboul.children[i].cloneNode(true);
lunboul.appendChild(li);
}
ol.children[0].className = 'current';
var num = 0;
var circle = 0;
arrow_r.addEventListener('click', function() {
if (num == 22) {
lunboul.style.left = 25 + 'px';
num = 0;
}
num++;
zyyidong(lunboul, -num * 184 + 25);
circle++;
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
if (circle == 22) {
circle = 0;
}
ol.children[circle].className = 'current';
})
arrow_l.addEventListener('click', function() {
if (num == 0) {
lunboul.style.left = -22 * 184 + 'px';
num = 22;
}
num--;
zyyidong(lunboul, -num * 184 + 25);
circle--;
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
if (circle < 0) {
circle = 21;
}
ol.children[circle].className = 'current';
})
var timer4 = setInterval(function() {
arrow_r.click();
}, 2000);
lunbobox.addEventListener('mouseenter', function() {
clearInterval(timer4);
timer4 = null;
});
lunbobox.addEventListener('mouseleave', function() {
clearInterval(timer4);
timer4 = null;
timer4 = setInterval(function() {
arrow_r.click();
}, 2000);
});
扫一扫
516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
