图片连续不间断滚动时抖动不平滑

bomi16112 2016-11-02 12:26:42

想做一个连续不间断滚动的效果，在网上找了代码，测试都不理想，测试了大部分浏览器，滚动时候图片文字都有些抖动，有些颤。qq浏览器，ie11.都挺明显的抖动。不知道怎么解决。请大家指教!代码附上:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript" src="jquery.min.js"></script> 

<script>

$(function(){

  var oul = $('.wrap ul');

  var oulHtml = oul.html();

  oul.html(oulHtml+oulHtml)

  var timeId = null;

  var ali = $('.wrap ul li');

  var aliWidth = ali.eq(0).width();

  var aliSize = ali.size();

  var ulWidth = aliWidth*aliSize;

  oul.width(ulWidth); //1600px

  var speed = -2;

  function slider(){

    if(speed<0){

      if(oul.css('left')==-ulWidth/2+'px'){

      oul.css('left',0);

      }

      oul.css('left','+=-2px');

    }

    if(speed>0){

      if(oul.css('left')=='0px'){

      oul.css('left',-ulWidth/2+'px');

      }

      oul.css('left','+='+speed+'px');

    }

   }

  // setInterval()函数的作用是：每隔一段时间，执行该函数里的代码

   timeId = setInterval(slider,30);

  $('.wrap').mouseover(function(){

    // clearInterval()函数的作用是用来清除定时器

    clearInterval(timeId);

  });

  $('.wrap').mouseout(function(){

    timeId = setInterval(slider,30);

  });

});

</script>

<style>

*{

  padding: 0;

  margin: 0;

}

li{

  list-style-type: none;

}

body{

  margin: 50px;

}

.wrap{

width:900px; 

height:159px;

position: relative;

overflow: hidden;

background:#ccc;

margin:0px auto; 

zoom:1;

}

.wrap ul{

overflow: hidden;

position:absolute;

width: 1600px;

left: 0;

top: 0;

_height:1px;

}

.wrap ul li{

float: left;

width:216px; 

height:156px;

background:#fff;

/* padding-right:10px;*/

}

.wrap ul li a{

display:block; 

float:left; 

width:216px; 

height:156px; 

position:relative;

}

.wrap ul li img { 

width:200px; 

height:150px;

padding:0 5px;

border:3px solid #fff;

}



.wrap ul li p { 

position:absolute;

bottom:3px;

left:8px;

width:200px;

height:25px; 

line-height:25px;

background:rgba(0,0,0,0.8);

color:#fff;

text-align:center;

}

</style>  

</head>



<body>

<div class="wrap">

  <ul>

    <li><a href="2.png"><img src="2.png" /><p>岩溶图件岩溶图件岩溶图件</p></a></li> 

    <li><a href="2.png"><img src="2.png" /><p>岩溶图件岩溶图件岩溶图件</p></a></li> 

    <li><a href="2.png"><img src="2.png" /><p>岩溶图件岩溶图件岩溶图件</p></a></li> 

    <li><a href="2.png"><img src="2.png" /><p>岩溶图件岩溶图件岩溶图件</p></a></li> 

    <li><a href="2.png"><img src="2.png" /><p>岩溶图件岩溶图件岩溶图件</p></a></li> 

  </ul>

</div>

</html>

...全文

327 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

cheery_an 2016-11-03

打赏
举报

非ie浏览器，可以尝试用 webkit-transition 样式实现滚动，不会那么闪

cheery_an 2016-11-03

打赏
举报

感觉没有办法解决，你不停的移动位置而且timer设置的是30毫秒，肯定很闪。你看csdn右下角这个广告窗口不停的切换图片，也是闪

bomi16112 2016-11-02

打赏
举报

是我贴的那段代码，滚动的时候有抖动现象，可以拷下来看运行一下看看那个效果。想修正抖动现象。把滚动变得平滑

一支糖包仔 2016-11-02

打赏
举报

JS代码： function imgDouDong() { var div = $("#TrembledImg").parent(); var top = $("#TrembledImg").css("margin-top");//图片初始高度偏移距离 var left = $("#TrembledImg").css("margin-left");//图片初始水平偏移距离 var DCount = 20;//抖动次数 var NowCount=0;//当前抖动次数 var InterValId = setInterval(function () { NowCount++; var lr = Math.floor(Math.random() * 10); $("#TrembledImg").css("margin-left", (lr - 5) + "px"); var tr = Math.floor(Math.random() * 10); $("#TrembledImg").css("margin-top", (tr - 5) + "px"); if (NowCount > DCount) { $("#TrembledImg").css("margin-left", top); $("#TrembledImg").css("margin-top", left); clearInterval(InterValId); } },80); } html代码： <img src="Scripts/2.jpg" style="width:120px;" id="TrembledImg" /> 这不知道算不算是抖动。

在Vue中实现文字向上滚动的效果