JS——文字横向滚动

最新推荐文章于 2024-09-02 21:53:59 发布
最新推荐文章于 2024-09-02 21:53:59 发布
阅读量1k 收藏 1
点赞数 
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="black" name="apple-mobile-web-app-status-bar-style"  />
  <meta content="telephone=no" name="format-detection" />
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link rel="stylesheet" type="text/css" href="resources/css/sm/sm.min.css"/>
  <link rel="stylesheet" type="text/css" href="resources/css/sm/sm-theme.css"/></head>
  <!-- <link rel="stylesheet" type="text/css" href="../../resources/css/animate.css"></head>
  -->
<body>

  
<style type="text/css"> 
#gongao{width:1000px;height:30px;overflow:hidden;line-height:30px;font-size:13px;font-family:'宋体';background:#DDE5ED;color:#0C77CF;font-weight:bold;} 
#gongao #scroll_begin, #gongao #scroll_end{display:inline} 
</style> 
<script type="text/javascript"> 
function ScrollImgLeft(){ 
var speed=50; 
var scroll_begin = document.getElementById("scroll_begin"); 
var scroll_end = document.getElementById("scroll_end"); 
var scroll_div = document.getElementById("scroll_div"); 
scroll_end.innerHTML=scroll_begin.innerHTML; 
function Marquee(){ 
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) 
scroll_div.scrollLeft-=scroll_begin.offsetWidth; 
else 
scroll_div.scrollLeft++; 
} 
var MyMar=setInterval(Marquee,speed); 
scroll_div.οnmοuseοver=function() {clearInterval(MyMar);} 
scroll_div.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed);} 
} 
</script> 
<div id="gongao"> 
<div style="width:900px;height:30px;margin:0 auto;white-space: nowrap;overflow:hidden;" id="scroll_div" class="scroll_div"> 
<div id="scroll_begin"> 
之所以在scroll_begin的div里面写这个多重复的文字，是因为这些文字的长度必须要大于scroll_div的div容器。如果小于div容易，则不会有一直滚动的效果。！！无缝滚动的内容宽度加起来必须要大于容器的宽度。！
</div> 
<div id="scroll_end"></div> 
</div> 
<script type="text/javascript">ScrollImgLeft();</script> 
</div> 

    
  <script type='text/javascript' src='resources/js/seajs/sea.js' charset='utf-8'></script>
  <script type='text/javascript' src='resources/js/seajs/seajs-preload.js' charset='utf-8'></script>
  <script type='text/javascript' src='resources/js/zepto.min.js' charset='utf-8'></script>
  <script type='text/javascript' src='resources/js/sm/sm.min.js' charset='utf-8'></script>
  <script type='text/javascript' src='resources/js/app.js' charset='utf-8'></script>
  <script type="text/javascript">seajs.use();</script>
</body>
</html>

文章摘自

DC豆
关注
js实现文字横向滚动
weixin_30256901的博客
04-28 729
页面布局 <div id="scroll_div" class="fl"> <div id="scroll_begin"> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <spa...
JS中文字横向滚动
sun215153的专栏
10-14 1059
Insert title here .scroll_div {width:840px;height:30px; margin:0 auto;overflow: hidden; white-space: nowrap;} #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #sc
CSS实现文字横向循环无缝滚动 鼠标移入暂停移出继续
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-02 1875
在现代网页设计中，动态效果能够显著提升用户体验，其中一个常见的需求就是让文字或内容能够自动滚动，尤其是在新闻站点或公告栏等场景下。本文将详细介绍如何利用CSS实现文字的横向循环无缝滚动，并且当鼠标移入时暂停滚动，移出后继续滚动的效果。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过上述步骤，我们不仅实现了基本的文字滚动功能，还增强了用户体验，使得页面更加生动有趣。首先，我们需要创建一个包含文字的容器，并为其设置滚动动画。专栏系列（点击解锁）
js 文字横向滚动
01-21
简单、实用的javascript文字横向滚动效果。
Js 实现横向文字重复滚动，超简单！！
Tongyao
01-31 5221
背景 因为公司系统需要实现横向文字滚动效果，所以自己手动写了一个，没用网上的，感觉网上的啰嗦繁琐，扩展性还不行，喜欢的话点赞收藏吧，下面是gif效果图。 效果 代码 html代码 <span id="wai"> <p id="text"> 早上好，您有0条公告信息未读，请您及时查看！！！ </p> </span> css，大家可以自行美化。 #wai{ width: 350px; //宽度可以修改 border: 1px red solid;
js文字横向滚动特效
10-23
主要介绍了js文字横向滚动特效，实现过程很简单，文字在某块区域内横向无间隙滚动，感兴趣的小伙伴们可以参考一下
用css、js实现字幕横向滚动
热门推荐
qq_26780317的博客
06-05 2万+
    最近，在写电子房价牌页面时，关于电子房价的提示，需要用到横向滚动字幕的效果，本文用的是jquery.js的方法来实现的。在网上查阅资料的时候，发现以前会使用&lt;marque&gt;的html标签来处理，但是，最新的MDN已将该标签废弃。一、实例相关情况介绍        用js实现字幕的横向水平滚动效果，效果图如下：二、运用的实例代码&lt;div id="affiche"&gt; ...
js实现的文字横向无间断滚动
10-28
因此，本篇将介绍一种利用JavaScript和CSS来实现更加灵活、可控的横向滚动效果的方法。 #### 二、技术原理 要实现文字横向无间断滚动，我们需要解决以下几个关键技术点： 1. **确定滚动容器**：首先需要确定一个...
swiper横向轮播——阶梯式滚动轮播
qq_45793384的博客
12-09 1133
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title>
JS实现图片横向滚动效果示例代码
12-09
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”... <head> <... charset=gb2312″ /> <...图片横向滚动代码</title> <!———–图片Block的样式————–> <st
js文字横向滚动特效，头尾停止
09-22
js文字滚动特效，到头尾停止，基于jquery4.1以上
JS模仿横向滚动条
10-29
JS模仿横向滚动条
可以左右移动横向无缝滚动的JS图片展示
12-09
可以左右移动横向无缝滚动的JS图片展示，不明白的可以问我
jQuery文字横向滚动效果的实现代码
10-22
下面小编就为大家带来一篇jQuery文字横向滚动效果的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
向左滚动-完整DIV+CSS+JS不间断横向滚动代码
11-09
向左滚动-完整DIV+CSS+JS不间断横向滚动代码 欧耶
Jquery横向滚动日历基于swiper
06-05
总的来说，"jQuery横向滚动日历基于Swiper"是一个结合了前端两大利器——jQuery的DOM操作和Swiper的滑动效果——的项目。它展示了如何利用现有的开源库创建具有独特用户体验的功能组件。如果你有更好的想法或实现...
友情链接横向文字上下间隙循环滚动JS效果
10-27
从提供的文件信息来看，我们可以了解到这个文件是关于实现一个特殊的JavaScript效果代码——“友情链接横向文字上下间隙循环滚动”的使用方法和实现原理。这个效果是模仿了QQ频道中的上下单行多条文字信息滚动的功能...
JS中如何实现文字横向滚动(向右滚动)
2301_76677965的博客
05-30 1575
那么我们就应该先存储最后一个字符，然后再把它去掉。想到这里，我们不禁联想到Array对象的。
js 文字横向无限滚动
最新发布
10-26
在JavaScript中创建文字横向无限滚动效果通常可以利用CSS和JavaScript结合实现，这通常用于创建轮播图、滚动公告等动态展示。以下是简单的步骤： 1. HTML结构： ```html 这是要滚动的文字...（内容很长，可以有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值