发新贴  快速回复

各位大神戳进来,美工刚学js不太懂。

  89757
2014-07-08 09:38
   各位大神帮帮忙。做的一个效果,有一个10条的评论,让它们轮流滚动,当滚到第10条的时候,接着滚动而不是返回再重新滚。本来想效仿华为轮播图那样,滚到头的时候让第一个变relative接着滚动,结果整不明白。轮播图是一张一张滚,这么评论相当于三个三个显示(如下图)。规律是显示123,234,345.....9,10,1这样。 
    
   小弟干了几年美工,js用的不熟,各位大神谢谢了。当然大家遇到美工方面的问题也可以问我,一定尽力帮忙![u] QQ:1070612592 [/u]谢谢各位了!!下面是附件:







 
89757
自己帮顶
2014-07-08 09:38  回复本帖
nikoohp
你想实现的是无缝滚动吧?
2014-07-08 09:40  回复本帖
 
89757
大神快来啊,送身高180的娃娃啊,
2014-07-08 09:40  回复本帖
nikoohp
看看无缝滚动
2014-07-08 09:48  回复本帖
 
89757
forum.php?mod=redirect&goto=findpost&pid=27609&ptid=8730
你想实现的是无缝滚动吧?

原理应该是无缝滚动,但是不想要那个再重新填充一次内容放到后面重新滚这样
2014-07-08 09:49  回复本帖
 
89757
forum.php?mod=redirect&goto=findpost&pid=27609&ptid=8730
你想实现的是无缝滚动吧?

我看过华为轮播图,原理是把第一个变成相对定位放到后面然后滚动。但是这个跟那个有点区别,总是不成功。为此我还做了纸张,脑袋太笨了。。
2014-07-08 09:53  回复本帖
miaow
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>05</title>
    <style>
        *{padding:0;margin:0}
        body{font-size: 16px;font-family: "microsoft YaHei"}
        div{width:300px;height:150px;background: #eee;padding:0 15px;overflow: hidden;position: relative;margin:50px}
        li{list-style: none;line-height:30px;height:30px;border-bottom:1px dotted #333;overflow: hidden}
        ul{position: absolute;left:10px;top:0px;width:300px}
    </style>
    <script>
       window.onload = function(){
           var ul=document.getElementsByTagName('ul')[0],li=ul.getElementsByTagName('li'),timer = null,iH=li[0].clientHeight,num=0;
           setInterval(function(){
               var li1=li[0].cloneNode(true);
               num++;
               num%=li.length;
               ul.appendChild(li1);
               ul.removeChild(li[0]);
               fn1();
           },1000);
           function fn1(){
               timer=setInterval(function(){
                   if(ul.offsetTop<150-ul.offsetHeight){
                       num = 0;
                       ul.style.top=0+'px';
                   }
                   ul.style.top=-iH*num+'px';
               },13);
           }
       }
    </script>
</head>
<body>
<div>
    <ul>
        <li>主要用于移除jsp页面中的java代码编写一个</li>
        <li>这个标签处理类中,然后编写标签库描</li>
        <li>是打架不出拳,直接用刀砍,或者更牛逼的就开枪</li>
        <li>称为域名解析,域名解析需要由专门的域名解析系</li>
        <li>的距离为a)于Q,在OQ上取P,使|QP|=b(b</li>
        <li>工欲善其事,必先利其器。 想要学习安卓</li>
        <li>编译android程序时候,运行ant </li>
    </ul>
</div>
</body>
</html>

2014-07-08 15:25  回复本帖
 
89757
forum.php?mod=redirect&goto=findpost&pid=27620&ptid=8730


你的这个不对哦,不过还是谢谢啦,我已经找到相关视频了http://bbs.miaov.com/forum.php?mod=viewthread&tid=5703&extra=page%3D1
2014-07-08 15:42  回复本帖
nbin2008
innerHTML复制内容j加上去,绝对定位移动,当移动到一半的时候,定位归零,如此重复,老师讲过一个domove的封装函数,很好用
2014-07-08 20:05  回复本帖
miaow
自己帮顶
2014-07-09 14:15  回复本帖
登录 后才可以发表回复