不多说 直接上代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
- webkit - box - sizing: border - box;
- moz - box - sizing: border - box;
- ms - box - sizing: border - box;
box - sizing: border - box;
}
li{
margin: 35px;
list-style-type: none;
float: left;
}
.box li img{
opacity: 0;
}
</style>
<script>
function getByClass(oparent,oclass){
try {
return oparent.querySelectorAll("." + oclass);
} catch (ex){
var reset = [];
var reg = new RegExp("\\b" + oclass + "\\b");
var oCur = oparent.all;
for (var i = 0; i < oCur.length; i++) {
if (reg.test(oCur[i].className)) {
reset.push(oCur[i]);
}
};
return reset;
}
}
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
function Stratmove(obj,json,funEnd){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var attr in json){
var bStop=true;
var curr=parseInt(getStyle(obj,attr));
var spped=0;
if(attr=="opacity"){
var curr=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
curr=parseInt(getStyle(obj,attr));
}
spped=(json[attr]-curr)/8;
spped=spped>0?Math.ceil(spped):Math.floor(spped);
if(curr!=json[attr]){
bStop=false;
}
if(attr=="opacity"){
obj.style.opacity=(curr+spped)/100;
}else{
obj.style[attr]=curr+spped+"px";
}
if(bStop){
clearInterval(obj.timer);
if(funEnd)funEnd();
}
}
},30)
}
window.onload=function(){
var box=getByClass(document,"box")[0];
oimg=box.getElementsByTagName("img");
window.onresize=window.onscroll=function(){
rung();
}
function rung(){
var scrltop=document.documentElement.scrollTop||document.body.scrollTop;
winH=document.documentElement.clientHeight;
for (var i = 0; i < oimg.length; i++) {
var imgH=(oimg[i].offsetHeight)/3;
imgTop=scrltop+oimg[i].getBoundingClientRect().top;
if(imgTop>=scrltop&&winH+scrltop>=imgTop){
Stratmove(oimg[i],{"opacity":100})
}
};
}
rung();
}
</script>
</head>
<body>
<div class="box">
<ul>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
<li><img src="1.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
原理就是根据浏览器窗口还有scrollTop来和图片本身的位置进行判断，显示，这里用的是淡入淡出效果，还可以弄其他的效果，看大家的喜好
时间： 2024-10-06 23:40:34