时间:2021-07-01 10:21:17 帮助过:19人阅读
- <div class="inform" style="">
- <div style="height:35px; overflow:hidden;">
- <ul id="marquee" style="height:35px;">
- <li><a href="javascript:void(0)" style="display:inline-block;overflow: hidden; white-space: nowrap;text-overflow:ellipsis; width: 100%;">****已预订****</a></li>
- <li><a href="javascript:void(0)" style="display:inline-block;overflow: hidden; white-space: nowrap;text-overflow:ellipsis; width: 100%;">
- ****已预订****</a></li>
- </ul>
- </div>
- <script type="text/javascript">
- var liHeight = $('#marquee li').eq(0).outerHeight();
- //$('#marquee').css('height',liHeight * $('#marquee li').length * 2);
- setTimeout("startmarquee("+ liHeight +", 50, 500, 'marquee')", 500);
- function startmarquee(lh,speed,delay,id) {
- var t;
- var p = false;
- var o = document.getElementById(id);
- o.innerHTML += o.innerHTML;
- o.onmouseover = function() {
- p = true;
- }
- o.onmouseout = function() {
- p = false;
- }
- o.scrollTop = 0;
- function start() {
- t = setInterval(scrolling,speed);
- if(!p) o.scrollTop += 1;
- }
- function scrolling() {
- if(o.scrollTop%lh != 0) {
- o.scrollTop += 1;
- if(o.scrollTop >= o.scrollHeight / 2) o.scrollTop = 0;
- } else {
- clearInterval(t);
- setTimeout(start,delay);
- }
- }
- setTimeout(start,delay);
- }
- </script>
- </div>
- .inform {
- padding: 1px;
- margin: 10px auto;
- /*position: fixed; bottom:80px;left: 50%;*/ width: 6.8rem;font-size: 12px;/*margin-left: -3.4rem;*/ border: none; background-color:rgba(238,115,115,0.3); border-radius: 10px;
- }
- .inform h2 {
- background: none repeat scroll 0 0 #015198;
- font-weight: normal;
- line-height: 30px;
- }
- .inform h2 span {
- color: #FFFFFF;
- font-size: 16px;
- padding-left: 10px;
- }
- .inform h2 a {
- color: #FFFFFF;
- float: right;
- font-size: 14px;
- padding-right: 3px;
- }
- .inform ul {
- height: 170px;
- margin-top: 7px;
- overflow: hidden;
- }
- .inform ul li {
- line-height: 26px;
- padding-left: 12px;
- }
以上就是js实现消息滚动效果的方法的详细内容,更多请关注Gxl网其它相关文章!