html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body,ul,li,img,h3,p{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
ul{
width: 100%;
}
ul li{
width: 100%;
border-bottom: 1px dashed blue;
overflow: hidden;
padding: 10px 0 10px 10px ;
}
ul li img{
width: 70px;
height: 60px;
float: left;
padding-right: 20px;
padding-left: 10px;
padding-top: 20px;
}
ul li p{
margin-top: 10px;
}
</style>
</head>
<body>
<ul id="list">
<!--<li>-->
<!--<img src="img/default.jpg" trueImg="img/1.jpg" alt="">-->
<!--<div>-->
<!--<h3>網路強國戰略習近平與“十三五”十四大戰略</h3>-->
<!--<p>網際網路是二十世紀人類最大的發明網際網路是二十世紀.</p>-->
<!--</div>-->
<!--</li>-->
</ul>
<script src="utils.js"></script>
<script src="js/index2.js"></script>
</body>
</html>
複製程式碼
utils.js公共方法
var utils = (function () {
function offset(curEle) {
var l = curEle.offsetLeft;
var t = curEle.offsetTop;
var p = curEle.offsetParent;
while(p.nodeName !=="BODY"){
l+=p.offsetLeft +p.clientLeft;
t+=p.offsetTop+p.clientTop;
p = p.offsetParent;
}
return {
left:l,top:t
}
};
function getCss(curEle,attr) {
var val;
if("getComputedStyle" in window){
// 先判斷是否支援getComputedStyle;
val = getComputedStyle(curEle)[attr];
}else{
val = curEle.currentStyle[attr];
}
// 去單位
var reg = /^(width|height|margin|padding|left|top|right|bottom|fontZise)$/;
// 校驗當前屬性是否帶有單位
if(reg.test(attr)){
// 判斷是否為空；
if(!isNaN(parseFloat(val))){
val = parseFloat(val);
}
}
return val;
}
// setCss : 每執行一次，都會設定元素一個屬性樣式；
function setCss(curEle,attr,val) {
var reg = /^(width|height|top|left|right|bottom|padding|margin)$/;
if(reg.test(attr)){
if(typeof val==="number"){
val = val + "px";
}
}
curEle.style[attr]=val;// 設定行內樣式；
}
function setGroupCss(curEle,obj) {
// 遍歷obj;呼叫封裝的setCss，設定元素的單個樣式；
for(var key in obj){
setCss(curEle,key,obj[key])
}
}
function css(...arg) {// 在函式定義的括號中，... 是剩餘運算子；將所有的實參放入到一個陣列中；
//
if(arg.length===3){
// [oBox,"height",300]
setCss(...arg);
}else if(arg.length===2){
if(toString.call(arg[1])==="[object Object]"){
setGroupCss(...arg)
}else{
return getCss(...arg)
}
}
}
function win(attr,val) {
// 如果是兩個實參，那麼一定是設定；如果是一個實參，是獲取；
if(val===undefined){
return document.documentElement[attr] || document.body[attr];
}
document.documentElement[attr] = val;
document.body[attr] = val;
}
return {
offset:offset,
getCss:getCss,
setCss:setCss,
setGroupCss:setGroupCss,
css:css,
win:win
}
})();
// 單例模式
/*
var utils= {
offset:function offset(curEle) {
var l = curEle.offsetLeft;
var t = curEle.offsetTop;
var p = curEle.offsetParent;
while(p.nodeName !=="BODY"){
l+=p.offsetLeft +p.clientLeft;
t+=p.offsetTop+p.clientTop;
p = p.offsetParent;
}
return {
left:l,top:t
}
}
}*/
複製程式碼
js
var oUl=document.getElementById('list');
//ajax獲取資料
//1.建立ajax物件
var xhr=new XMLHttpRequest();
//2.開啟路徑
xhr.open('GET','./newList.json',false);
//3.監聽
var data=null;//null現在沒有以後可能會有,undefined是現在沒有以後也不會有
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&/^2\d{2}$/.test(xhr.status)){
data=JSON.parse(xhr.responseText);
}
};
//4.傳送
xhr.send();
//console.log(data);//用jSON.parse()把JSON格式的字串轉成了JSON格式的字串了,[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
//迴圈繫結資料
var str=``;
for(var i=0;i<data.length;i++){
var item=data[i];//獲取JSON格式的data物件中的物件
str+=`<li>
<img src="img/default.jpg" alt="" trueImg="${item.img}">
<h3>${item.title}</h3>
<p>${item.desc}</p>
</li>`
}
oUl.innerHTML=str;
//多張圖片延遲載入
var imgs=document.getElementsByTagName('img');
var newI=0;
function delayImgs(){
for(var i=newI;i<imgs.length;i++){
single(imgs[i]);//單張圖片操作執行
//console.log(i);//每執行一次delayImgs的話,就會把所有圖片都迴圈一遍,我們操作變數i,假如已經載入出來10張圖片的話,下次我們要從第11張載入,所以要存一個索引
imgs[i].ind=i
}
}
function single(curImg){
if(curImg.load){
return;
}
var curImgOffsetHeight=curImg.offsetHeight;
var curImgOffsetT=utils.offset(curImg).top;
var winT=utils.win('scrollTop');
var winH=utils.win('clientHeight');
if(winT+winH>=curImgOffsetT+curImgOffsetHeight){
var trueAdd=curImg.getAttribute('trueImg');
var newImg=document.createElement('img');
newImg.src=trueAdd;
newImg.onload=function(){
curImg.src=trueAdd;
newI=curImg.ind+1;//假如已經載入了10張圖片,下次的話要從第11張開始載入
//console.log(newI);
fadeIn(curImg);
curImg.load=true;//自定義load屬性,判斷如果圖片已經載入完,就不再重新載入了
}
}
}
delayImgs();
window.onscroll=delayImgs;
function fadeIn(img){
utils.css(img,'opacity',0.3);
var timer=setInterval(function(){
var val=Number(utils.css(img,'opacity'));
//console.log(val);//把字串'0.3'轉化為數字0.3
val+=0.1;
if(val>=1){
utils.css(img,'opacity',1);
clearInterval(timer);
return;
}
utils.css(img,'opacity',val);
},300)
}
複製程式碼
newList.json(json資料)
[
{
"img": "img/8.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/1.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/9.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/3.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/2.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/4.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/3.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/3.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/9.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/1.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/4.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/2.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/2.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/8.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/2.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/7.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/2.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/9.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/2.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/4.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/3.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/2.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/8.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/9.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/6.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/8.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/6.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/3.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/1.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/4.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/8.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/8.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/5.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/3.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/9.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/1.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/8.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/8.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/6.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/8.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/4.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/8.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/2.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/7.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/7.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/10.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/5.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/6.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/7.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/8.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/2.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/9.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/7.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/10.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/9.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
},
{
"img": "img/10.jpg",
"title": "網路強國戰略習近平與“十三五”十四大戰略",
"desc": "網際網路是二十世紀人類最大的發明網際網路是二十世紀."
}
]
複製程式碼