JS+CSS实现左右文字滚动

举报
AlbertYang 发表于 2021/02/03 01:48:52 2021/02/03
【摘要】 <!doctype html><html> <head> <meta charset="UTF-8"> <title>文字滚动:公众号AlbertYang</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script> <style type="text...

      <!doctype html>
      <html>
     	<head>
     		<meta charset="UTF-8">
     		<title>文字滚动:公众号AlbertYang</title>
     		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
     		<style type="text/css">
      			* {
      margin: 0;
      padding: 0;
      			}
     			body {
      font: 12px/1 '微软雅黑';
      background: #fff;
      			}
     			.main {
      width: 600px;
      padding: 10px;
      margin: 0 auto;
      			}
     			.wrap {
      padding-top: 10px;
      overflow: hidden;
      width: 150px;
      cursor: pointer;
      			}
     			.scroll {
      width: 1200px;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
      			}
     		</style>
     	</head>
     	<body>
     		<div class="main">
     			<div class="wrap">
      <div class="scroll">
      <span>请您耐心等待~</span>
      </div>
     			</div>
     			<div class="wrap">
      <div class="scroll">
      <span>由于大促期间订单量激增,您的订单送达时效可能出现延迟,请放到GV房供热供热上档次的身份为您耐心等待~</span>
      </div>
     			</div>
     			<div class="wrap">
      <div class="scroll">
      <span>由于 发布</span>
      </div>
     			</div>
     		</div>
     		<script>
     			function audioTitleScroll() {
      console.log(22222);
      var audio_title = $(".wrap");
       audio_title.each(function() {
       titleScroll(this);
       });
      function titleScroll(wrap) {
      var div = wrap.getElementsByTagName('div')[0];
      var span = div.getElementsByTagName('span')[0];
      var span_w = 1000;
      if (span) {
       span_w = span.offsetWidth;
       }
      var div_w = wrap.offsetWidth;
      if (div_w > span_w || div.getElementsByTagName('span').length >= 2) {
      console.log(777);
      return false;
       }
      console.log(666);
       div.innerHTML += div.innerHTML;
      var timer = setInterval(goLeft, 20);
       $(wrap).hover(function() {
      clearInterval(timer);
       }, function() {
       timer = setInterval(goLeft, 20);
       });
      function goLeft() {
      if (span_w <= wrap.scrollLeft) {
       wrap.scrollLeft -= span_w;
       } else {
       wrap.scrollLeft++;
       }
       }
       }
      			};
      			$(function() {
       audioTitleScroll();
      			})
     		</script>
     	</body>
      </html>
  
 

 

文章来源: albertyang.blog.csdn.net,作者:Albert Yang,版权归原作者所有,如需转载,请联系作者。

原文链接:albertyang.blog.csdn.net/article/details/107641673

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。