.gif)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>加载更多</title>
<style type="text/css">
.list li{
padding: 10px;
line-height: 15px;
}
.list a{
float: right;
}
.loadMore{
text-align: center;
line-height: 50px;
background: #ccc;
}
.loadMore:hover{
background: #f99;
color: #9ff;
font-size: 18px;
font-weight: 900;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="list">
<li>这是第1个新闻<a href="javascript:;">×</a></li>
<li>这是第2个新闻<a href="javascript:;">×</a></li>
<li>这是第3个新闻<a href="javascript:;">×</a></li>
<li>这是第4个新闻<a href="javascript:;">×</a></li>
<li>这是第5个新闻<a href="javascript:;">×</a></li>
<li>这是第6个新闻<a href="javascript:;">×</a></li>
<li>这是第7个新闻<a href="javascript:;">×</a></li>
<li>这是第8个新闻<a href="javascript:;">×</a></li>
<li>这是第9个新闻<a href="javascript:;">×</a></li>
<li>这是第10个新闻<a href="javascript:;">×</a></li>
<li>这是第11个新闻<a href="javascript:;">×</a></li>
<li>这是第12个新闻<a href="javascript:;">×</a></li>
<li>这是第13个新闻<a href="javascript:;">×</a></li>
<li>这是第14个新闻<a href="javascript:;">×</a></li>
<li>这是第15个新闻<a href="javascript:;">×</a></li>
<li>这是第16个新闻<a href="javascript:;">×</a></li>
<li>这是第17个新闻<a href="javascript:;">×</a></li>
<li>这是第18个新闻<a href="javascript:;">×</a></li>
<li>这是第19个新闻<a href="javascript:;">×</a></li>
</ul>
<div class="loadMore">加载更多</div>
<script src="js/common.js"></script>
<script src="js/index.js"></script>
</body>
</html>
JS
Common
//通过类名获取元素样式
function byClassName(sClassName){
if(document.getElementsBYClassName){
return document.getElementsByClassName(sClassName);
} else {
var allTagsName = document.getElementsByTagName('*');
var result = [];
for(var i = 0; i<allTagsName.length;i++){
if(allTagsName[i].className === sClassName){
result.push(allTagsName[i]);
}
}
return result;
}
}
//通过Id获取元素样式
function $(id){
return document.getElementById(id);
}
//获取元素的实际样式
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
} else {
return document.getComputedStyle(obj,false)[attr];
}
}
//多属性缓冲运动
function bufferMove(obj,target,fn,ratio){
var ratio = ratio || 8;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var allOk = true;
for(var attr in target){
var cur = 0;
if(attr === 'opacity'){
cur = parseInt(getStyle(obj,'opacity') * 100);
} else {
cur = parseInt(getStyle(obj,attr));
}
var speed =(target[attr] - cur) / ratio;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
var next = speed + cur;
if(attr === 'opacity'){
obj.style.opacity = next + 'px';
obj.style.opacity = 'alpha(opacity= ' + next + ') ';
} else {
obj.style[attr] = next + 'px';
}
if(next !== target[attr]){
allOk = false;
}
}
if(allOk){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},50)
}
//添加事件兼容,绑定多个事件
function bindEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn);
} else {
obj.attachEvent('on' + type,fn);
}
}
function ajax({type,data,url,async,beforeSend,success,complete}){
var async = async || true;
// 创建对象
var xhr = new XMLHttpRequest();
// 字符串的拼接
if(typeof data === 'object'){
var str = '';
for(var attr in data){
str += encodeURIComponent(attr) + '=' + encodeURIComponent(data[attr]) + '&';
}
data = str.slice(0,-1);
}
if(type.toUpperCase() === 'GET' && data){
url += '?' + data;
}
// 配置
xhr.open(type,url,async);
// 接收数据
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200){
success && success(xhr.responseText);
}
complete && complete();
}
};
// 发送
beforeSend && beforeSend();
if(type.toUpperCase() === 'POST'){
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(data);
} else {
xhr.send();
}
}
JS
//各行变色
var oList = byClassName('list')[0];
var oLoadMore = byClassName('loadMore')[0];
var oLi = oList.children;
for(var i = 0 ; i<oLi.length;i++){
if(i % 2 === 0){
oLi[i].style.backgroundColor = '#ccc';
}
oLi[i].index = i;
oLi[i].onmouseover = function(){
this.style.backgroundColor = '#9ff';
}
oLi[i].onmouseout = function(){
if(this.index % 2 === 0){
this.style.backgroundColor = '#ccc';
} else {
this.style.backgroundColor = '#fff';
}
}
}
//添加删除功能
oList.onclick = function(ev){
var e = ev || window.event;
var o = e.target || e.srcElement;
if(o.nodeName === 'A'){
oList.removeChild(o.parentNode);
}
}
//加载更多点击事件
oLoadMore.onclick = function(){
ajax({
type: 'post',
url: 'news.php',
success: function(data){
data = JSON.parse(data);
console.log(data);
data.forEach(v => {
var oNewLi = document.createElement('li');
oNewLi.innerHTML = '<a href="javascript">×</a>' + v;
oList.appendChild(oNewLi);
})
}
})
}