搭建简易服务器的图文教程,JS实现仿UC浏览器前进后退效果的实例代码

测试浏览器为谷歌浏览器(谷歌toggle device toolbar)

本文实例为大家分享了js实现多张图片延迟加载效果的具体代码,供大家参考,具体内容如下

图片 1

var startx, starty, endx, endy, moveX, moveY, seatX, seatY; 
var clickState = false; 
//获取输入框dom元素 
var text = document.forms[“form”]; 
//设置样式 
function setCss(obj) { 
var cssStr = “z-index:5;width:37px;height:37px;position:absolute;left:” 
+ seatX + ‘px;top:' + seatY + ‘px;'; 
//将样式添加到div上,显示div 
obj.style.cssText = cssStr;
}
//计算位置 
function setPosition(obj) { 
if (obj == ‘left') { 
seatX = text.offsetLeft - 37; //横坐标 
} else { 
seatX = text.offsetLeft + text.offsetWidth; //横坐标 
} 
seatY = (text.offsetTop + text.offsetHeight) / 2; //纵坐标 
} 
//创建DIV 
function createDiv(obj) { 
//首先创建div 
var descDiv = document.createElement(‘div'); 
document.body.appendChild(descDiv); 
//给div设置样式,比如大小、位置 
setPosition(obj); 
setCss(descDiv); 
descDiv.innerHTML = ”; 
descDiv.id = obj; 
descDiv.style.display = ‘block'; 
addElementImg(descDiv.id); 
} 
//添加IMG 
function addElementImg(obj) { 
var div = document.getElementById(obj); 
//添加 img 
var img = document.createElement(“img”); 
//设置 img 属性,如 id 
img.setAttribute(“id”, “newImg”); 
//设置 img 图片地址 
img.src = “/Themes/TheThemeMachine/Images/” + obj + “.png”; 
div.appendChild(img); 
} 
//删除DIV 
function removeDiv(obj) { 
var el = document.getElementById(obj); 
el.parentNode.removeChild(el); 
} 
//移动DIV 
function moveDiv(obj, movex) { 
if (Math.abs(movex) < 37) { 
var div = document.getElementById(obj); 
setPosition(obj); 
seatX = seatX + movex; 
setCss(div); 
} 
} 
//根据位移改变DIV的位置 
function reductionDiv(obj) { 
var div = document.getElementById(obj); 
setPosition(obj); 
setCss(div); 
} 
//计算移动坐标 
function calculationMoveCoordinate() { 
moveX = endx - startx; 
moveY = Math.abs(endy - starty); 
if (moveX > 0) 
moveDiv(“left”, moveX); 
else 
moveDiv(“right”, moveX); 
} 
//判断是否是PC端 
function IsPC() { 
var userAgentInfo = navigator.userAgent; 
var Agents = new Array(“Android”, “iPhone”, “SymbianOS”, “Windows Phone”, “iPad”, “iPod”); 
var flag = true; 
for (var v = 0; v < Agents.length; v++) { 
if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; } 
} 
return flag; 
} 
//PC端鼠标按下 
function click() { 
clickState = true; 
startx = event.clientX; 
starty = event.clientY; 
} 
//PC端鼠标移动 
function pull() { 
if (1 == event.which) //判断左键是否按下 
{ 
endx = event.clientX; 
endy = event.clientY; 
calculationMoveCoordinate(); 
} 
} 
//PC端和移动端位移结束 
function stopClick() { 
if (Math.abs(moveX) > 37 && moveY < 20) { 
if (moveX < 0) { 
history.Go(1); 
} else { 
history.go(-1); 
} 
} else { 
reductionDiv(“left”); 
reductionDiv(“right”); 
} 
} 
////移动端注册事件 
document.addEventListener(‘touchmove', function (event) { 
event.preventDefault(); 
}, false); 
//touchstart事件 
function touchSatrtFunc(evt) { 
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 
var touch = evt.touches[0]; //获取第一个触点 
startx = Number(touch.pageX); //页面触点X坐标 
starty = Number(touch.pageY); //页面触点Y坐标 
}
//touchmove事件,这个事件无法获取坐标 
function touchMoveFunc(evt) { 
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 
var touch = evt.touches[0]; //获取第一个触点 
endx = Number(touch.pageX); //页面触点X坐标 
endy = Number(touch.pageY); //页面触点Y坐标 
calculationMoveCoordinate(); 
}
//touchend事件 
function touchEndFunc(evt) { 
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 
stopClick(); 
}
//加载 
if (IsPC()) { 
document.onmousedown = click; 
document.onmousemove = pull; 
document.onmouseup = stopClick; 
} else { 
document.addEventListener(‘touchstart', touchSatrtFunc, false); 
document.addEventListener(‘touchmove', touchMoveFunc, false); 
document.addEventListener(‘touchend', touchEndFunc, false); 
} 
createDiv(‘left'); 
createDiv(‘right');

具体代码如下:

www文件夹下

以上所述是小编给大家介绍的JS实现仿UC浏览器前进后退效果的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--做移动端响应式必须加的样式-->
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
      font-size:14px;
    }
    ul,li{
      list-style:none;
    }
    img{
      display:block;
      border:none;
    }
    /*
      最外层容器不设定宽高的
    */
    .news{
      padding:10px;
    }
    .news li{
      height:60px;
      padding:10px 0;
      border-bottom:1px solid #dedede;
      position:relative;
    }
    .news li > div:nth-child(1){
      position:absolute;
      top:10px;
      left:0;
      width:75px;
      height:60px;
      background:url('img/default.png') no-repeat center center;
      background-size:100% 100%;/*设置背景图片大小*/
    }
    .news li > div:nth-child(1) img{
      width:100%;
      height:100%;
      display:none;
      opacity:0;
    }
    .news li > div:nth-child(2){
      height:60px;
      margin-left:80px;
    }
    .news li > div:nth-child(2) h2{
      height:20px;
      line-height:20px;
      /*实现文字超出隐藏*/
      overflow:hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    .news li > div:nth-child(2) p{
      line-height:20px;
      font-size:12px;
      color:#ccc;
    }
  </style>
</head>
<body>
  <ul id='news' class='news'>
    <li>
      <div>
        <img src="" alt="图片 2">
      </div>
      <div>
        <h2>我是一个标题</h2>
        <p>我是内容</p>
      </div>
    </li>
  </ul>

  <script>
    var news = document.getElementById('news')
    var imgList = news.getElementsByTagName('img')
    //1、获取需要绑定的数据(Ajax)
    var jsonData = null;
    ~function(){
      var xhr = new XMLHttpRequest();
      //URL地址后面加的随机数是在清除每一次请求数据时候(GET请求)产生的缓存
      xhr.open('GET','data.json?_='+Math.random(),false)
      xhr.onreadystatechange = function(){
        if(xhr.readystate ===4 && /^2\d{2}$/.test(xhr.status)){
          var val = xhr.responseText;
          jsonData = utils.formatJSON(val)
        }
      }
      xhr.send(null)
    }()
    //2、数据绑定->把jsonData存储的数据绑定到页面中(字符串拼接)
    ~function(){
      var str = '';
      if(jsonData){
        for(var i = 0,len = jsonData.length;i<len;i++){
          var curData = jsonData[i]
          str+='<li>';
          str+='<div><img src="" trueImg="'+curData['img']+'"></div>';
          str+='<div>';
          str+='<h2>'+curData['title']+'</h2>';
          str+='<p>'+curData['desc']+'</p>';
          str+='</div>';
          str+='</li>';
        }
      }
      news.innerHTML = str;
    }()
    //3、图片延迟加载
    //我先编写一个方法实现单张图片的延迟加载
    function lazyImg(curImg){
      var oImg = new Image;
      oImg.src = curImg.getAttribute('trueImg');
      oImg.onload = function(){
        curImg.src = this.src;
        curImg.style.display = "block";
        fadeIn(curImg)
        oImg = null
      };
      curImg.isLoad = true;
    }

    function fadeIn(curImg){
      var duration = 500,interval = 10,target = 1;
      var step = (target/duration)*interval;
      var timer = window.setInterval(function(){
        var curOP = utils.getCss(curImg,'opacity');
        if(curOP>1){
          curImg.style.opacity = 1;
          window.clearInterval(timer)
          return
        }
        curOP+=step;
        curImg.style.opacity = curOP;
      },interval)

    }

    function handleAllImage(){
      for(var i = 0,len = imgList.length;i<len;i++){
        var curImg = imgList[i];
        //当前的图片处理过了就不需要在重新的进行处理了
        if(curImg.isLoad = true){
          continue;
        }
        //只有A小于B的时候才进行处理,当前图片是隐藏的,我们其实计算的是它父节点的A
        var curImgPar = curImg.parentNode;
        var A = utils.offset(curImgPar).top + curImgPar.offsetHeight;
        var B = utils.win('clientHeight')+utils.win('scrollTop');
        if(A<B){
          lazyImg(curImg);
        }
      }
    }

    //4、开始的时候一秒加载第一屏的图片,当滚动条滚动的时候,再加载剩余的图片
    window.setTimeout(handleAllImage,1000);
    window.onscroll = handleAllImage;
  </script>
</body>
</html>

图片 3

您可能感兴趣的文章:

  • JavaScript不刷新实现浏览器的前进后退功能
  • javascript
    history对象(历史记录)使用方法(实现浏览器前进后退)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

template文件夹下

发表评论

电子邮件地址不会被公开。 必填项已用*标注