推荐搜索: 魏义齐 网站防扒js微信号刷新 利用hbuilder打包APP的步骤清空

您当前的位置:首页 > 软件素材 > 正文

两组li向左滚动代码

发布时间:2018-06-27 23:39:15作者:魏义齐阅读:(

本文为博主原创文章,未经博主允许不得转载。

最近给客户写页面遇到这样一个问题,同一个页面有两个li向左滚动的模块,第一个是在网上找的代码,第二个我想着复制第一个但是没效果,改类名和js都没用,只能另找一个了,这也是我为什么整理两组的原因。

说到li滚动,很多人首先会想到marquee,因为操作简单,但是marquee经过我的测试在火狐浏览器和IE浏览器里面有抖动的现象,而且抖动的频率很高。

下面我把我整理的两组代码分享出来(注:我整理的代码都是重写的,很精简,大家不用担心有冗余的代码在里面)。

第一组:

预览链接:https://www.weiyiqi.net/lookdoc/li_left1/

因为有js库,我就不贴代码了,直接提供下载链接:https://pan.baidu.com/s/1KK2CIidsUfyNe4RZAC845g

第二组:

html代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>li向左滚动2-软件素材-魏义齐个人博客</title>
<link type="text/css" rel="stylesheet" href="css/index.css">
</head>
 
<body>
<div class="case">
  <div id="scroll"><a href="javascript:;" class="btn_left"></a> <a href="javascript:;" class="btn_right"></a>
    <div class="content">
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
        <li>six</li>
<li>seven</li>
      </ul>
    </div>
  </div>
</div>
<script type="text/javascript">
window.onload = function(){
  var oDiv = document.getElementById('scroll');
  var oUl = oDiv.getElementsByTagName('ul')[0];
  var aLi = oDiv.getElementsByTagName('li');
  var aBtn = oDiv.getElementsByTagName('a');
  var speed = -1;
  var timer = null;
  oUl.innerHTML += oUl.innerHTML;
  oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
  timer = setInterval(function(){
    oUl.style.left = oUl.offsetLeft + speed + 'px';
    if(oUl.offsetLeft < - oUl.offsetWidth / 2){
      oUl.style.left = '0';
    }else if(oUl.offsetLeft > 0){
      oUl.style.left = - oUl.offsetWidth / 2 + 'px';
    }
  },30);
  aBtn[0].onclick = function(){
    speed = -1;
  };
  aBtn[1].onclick = function(){
    speed = 1;
  };
  oUl.onmouseover = function(){
    clearInterval(timer);
  };
  oUl.onmouseout = function(){
    timer = setInterval(function(){
      oUl.style.left = oUl.offsetLeft + speed + 'px';
      if(oUl.offsetLeft < -oUl.offsetWidth / 2){
        oUl.style.left = '0';
      }else if(oUl.offsetLeft > 0){
        oUl.style.left = - oUl.offsetWidth / 2 + 'px';
      }
    },30);
  };
};
</script>
</body>
</html>

css代码:
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
list-style-type: none;
font-family: "微软雅黑";
}
.case {
width: 1140px;
overflow: hidden;
margin: auto;
}
#scroll {
width: 1140px;
height: 300px;
position: relative;
overflow: hidden;
}
#scroll .content {
width: 1140px;
height: 300px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
#scroll ul {
width: 2280px;
position: absolute;
}
#scroll li {
float: left;
width: 330px;
text-align: center;
height: 300px;
line-height: 300px;
margin-right: 50px;
font-size: 20px;
color: #666;
font-style: italic;
background-color: #cfcfcf;
}

以上就是我整理的两组li向左滚动的代码,希望对大家提高工作效率有所帮助。

打赏本站

原创不易,您的打赏就是博主更新的动力!

上一篇:Dreamweaver cc2018破解版下载及与cs6对比的优缺点解析 下一篇:一个绝对值得收藏的日期选择插件

相关文章