>

必发88官网前后轮播封装,文字上下滚动

- 编辑:www.bifa688.com -

必发88官网前后轮播封装,文字上下滚动

//html

//css

<div class="text">
  <div class="textL">
    <div class="wraper1">
      <p>12321fhuhfkdhfjkdhfjhsfs</p>
      <p>223二一地方就圣诞高兴会飞的回复你没积分</p>
      <p>323二壹法可方便肥肉头皮那地点突然特个</p>
      <p>4232一沃尔特Yui离开家会骂你发2YTJHNBV</p>
      <p>523二1WERTYUIBGNBVCXHYUKVFD哈弗STYHGBVCdghfgd的反曲弓方法不给个</p>
      <p>623二一个货车给我们了电锅和公共交通卡让她吃得开图集</p>
      <p>723二1沃尔听话就不容许的够花就美眉出模具厂的是法官发都发</p>
      <p>823二1是电饭煲非常快就好v程序有同感的超过常规规你 </p>
    </div>

.slidsWarpper{
  height:100px;
  width:80%;
  margin:0 auto;
  border:2px solid red;
  overflow: hidden;
  position:relative;
}
.slides{
  position:absolute;
  top:0;
  left:0;
  width:100%;
}
.slide{
  height:30px;
  border:1px solid goldenrod;
  width:100%
}
</style>

  </div>
  <div class="textR">
    <div class="wraper2">
      <p>12321fhuhfkdhfjkdhfjhsfs</p>
      <p>22321地点就圣诞喜悦会飞的重振旗鼓你没积分</p>
      <p>323二一法可适合的数量肥肉头皮那地点突然特个</p>
      <p>423二1沃尔特Yui离开家会骂你发贰YTJHNBV</p>
      <p>523二一WERTYUIBGNBVCXHYUKVFD瑞鹰STYHGBVCdghfgd的层压弓方法不给个</p>
      <p>6232玖个货车给大家了电饭煲和公共交通卡让她吃得开图集</p>
      <p>72321Wall听话就不容许的够花就靓妹出模具厂的是法官发都发</p>
      <p>823二一是电锅异常快就好v程序有共鸣的特有你 </p>
    </div>
  </div>
</div>


//css

 

<style>
.text {
width: 80%;
margin: 0 auto;
}

//html

.textL,
.textR {
float: left;
height: 200px;
overflow: hidden;
position: relative;
width: 40%;
margin: 0 5%;
background: darkgoldenrod;
}

<div class="slidsWarpper">
  <div class="slides">

 

    <div class="slide">
      <a target="_blank" href="#">
        <p>111111111 </p>
      </a>

.wraper1,
.wraper2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
background: pink;
}

    </div>
    <div class="slide">
      <a target="_blank" href="#">
        <p>2222222222222222</p>
      </a>

p {
height: 30px;
line-height: 30px;
margin:0;
width:100%;
overflow: hidden;
}
</style>

    </div>
    <div class="slide">
      <a target="_blank" href="#">
        <p>2015第九5届中国国际冶金工展会在沪进行</p>
      </a>

//js

    </div>
    <div class="slide">
      <a target="_blank" href="#">
        <p>巴黎大数额深入分析公司亮相第一届世界网络大会 </p>
      </a>

<script type="text/javascript">
  function scroll(className,sizes,speed){
    var wraper = $(className);
    var ps = wraper.find('p:first');
    wraper.animate({'top':"-sizes 'px'"},speed,'linear',function(){
      wraper.append(ps).css('top',0);
      scroll(className,sizes,speed)
    })
  }

    </div>
    <div class="slide">
      <a target="_blank" href="#">
        <p>大额创立价值,汇赋科学和技术邀您共聚第三届世界互联网大会 </p>

  scroll('.wraper1',30,1500);
  scroll('.wraper2',30,1000);

      </a>
    </div>

  $('.wraper1').on('mouseover',function(){
    $(this).stop();
  }).on('mouseout',function(){
    scroll('.wraper1',30,1500);
  })
  $('.wraper2').on('mouseover',function(){
    $(this).stop();
  }).on('mouseout',function(){
    scroll('.wraper2',30,1000);
  })

  </div>

</script>

</div>


//js

window.onload = function(){

  var targetTop = 30;

  var targetTimer = 2000;

  function scroll(){

    var currentTop = Math.abs($('.slide').posiiton().top);

    var duration = (targetTop - currentTop) * targetTimer / targetTop;

    var slide = $('.slides').find('.slide:first');

    $('.slides').animate({'top':-targetTop},duration,'linear',function(){

      $('.slides').append(slide).css('top',0);

      scroll();

    })

  }

  scroll();

}

 

 

 

 

本文由必发88官网发布,转载请注明来源:必发88官网前后轮播封装,文字上下滚动