网页特效:横向不间断滚动

最新推荐文章于 2021-03-11 21:40:21 发布
最新推荐文章于 2021-03-11 21:40:21 发布
阅读量694 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Amos318/article/details/35836569
版权

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>横向不间断滚动DIV CSS代码-DIVCSS5</title>
</head>
<body>
<style>
.scroll_div {width:600px; height:49px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
.scroll_div img {width:120px;height:49px;border: 0;margin: auto 8px; }
#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}/* 设置ul和li横排 */
</style>
<script language="javascript">
function ScrollImgLeft(){
 var speed=20
 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>
<h2 align="center">演示说明：向左滚动</h2>
<div style="text-align:center">
<div class="sqBorder">
<!--#####滚动区域#####-->
<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<ul>
<li> <img src=" http://www.divcss5.com/img/css-logo.gif" /></li>
<li> <img src=" http://www.divcss5.com/img/css-logo.gif" /></li>
<li> <img src=" http://www.divcss5.com/img/css-logo.gif" alt="div css" /></li>
<li> <img src=" http://www.divcss5.com/img/css-logo.gif" /></li>
<li> <img src=" http://www.divcss5.com/img/css-logo.gif" alt="divcss" /></li>
<li> <img src=" http://www.divcss5.com/img/css-logo.gif" /></li>
<li> <img src=" http://www.divcss5.com/img/css-logo.gif" /></li>
<li> <img src=" http://www.divcss5.com/img/css-logo.gif" /></li>
<li> <img src=" http://www.divcss5.com/img/css-logo.gif" /></li>
<li> <img src=" http://www.divcss5.com/img/css-logo.gif" /></li>
<li> <img src=" http://www.divcss5.com/img/css-logo.gif" /></li>
<li> <img src=" http://www.divcss5.com/img/css-logo.gif" alt="CSS" /></li>
<li> <img src=" http://www.divcss5.com/img/css-logo.gif" /></li>
<li> <img src=" http://www.divcss5.com/img/css-logo.gif" /></li>
<li> <img src=" http://www.divcss5.com/img/css-logo.gif" alt="divcss5" /></li>
<li> <img src=" http://www.divcss5.com/img/css-logo.gif" /></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>
<!--#####滚动区域#####-->
</div>
<script type="text/javascript">
 ScrollImgLeft();
</script>
</div>
<!--//向左滚动代码结束-->
</body></html>
Amos318
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页通用不间断滚动JS大全 简单实用
12-23
网页通用不间断滚动JS是一种常见的网页动态效果，常用于新闻更新、广告展示或公告滚动等场景。这类效果通过JavaScript实现，可以使得文字、图片等内容在页面上持续滚动，增强视觉吸引力和信息传递效率。"Class Of ...
html横向自动滚动代码,不间断无缝滚动代码(横向、竖向)
weixin_34211615的博客
05-31 1650
一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆副本，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到"无缝"滚动的目的。向上滚动：style=overflo...
scrollbar的属性及样式分类:css
命由己造，相由心生
05-29 2394
scrollbar的属性及样式分类:css     1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条）    overflow-x水平方向内容溢出时的设置    overflow-y垂直方向内容溢出时的设置    以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。2．scrollbar-3d-light-color立体滚动条亮边的颜色（设置
php文字左右滚动代码,JavaScript
weixin_36019543的博客
03-11 142
js文字横向滚动特效本文为大家分享了js文字横向滚动特效代码，具体实现内容如下：页面布局恭喜793765***获得 50元巨人点卡奖励恭喜793765***获得 50元巨人点卡奖励恭喜793765***获得 50元巨人点卡奖励恭喜793765***获得 50元巨人点卡奖励恭喜793765***获得 50元巨人点卡奖励恭喜793765***获得 50元巨人点卡奖励恭喜793765***获得 50元巨...
div+css+js横向不间断滚动
paopao_2017的博客
01-12 1890
横向不间断滚动DIV CSS代码-DIVCSS5 .scroll_div {width:600px; height:49px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;} .scroll_div img {width:120px;height:49px;border: 0;margin:
JS不间断横向滚动实现代码
zhuchunyan_aijia的博客
05-03 4103
.outerdiv { width: 100%; } .scroll_div { width: 200px; height: 70px; margin: 0 auto; overflow: hidden; white-space: nowrap; background
无缝横向滚动文字图片特效特效代码
03-20
标题中的“无缝横向滚动文字图片特效特效代码”指的是在网页设计中实现的一种视觉效果，它允许文字或图片在页面上不间断地水平滚动，给用户带来动态的浏览体验。这种效果通常用于新闻滚动、广告展示或者信息展示区域...
通用不间断滚动JS封装类，代替Marquee
05-12
内容索引:脚本资源,Ajax/JavaScript,图片滚动,Marquee　一个可以代替Marquee走马灯特效的图片滚动封装类，它可控制图片做无缝循环滚动，可以在上下左右四个方面滚动，而且具备丰富自定义设置功能。它的特点： 　横向...
图片不间断滚动js特效及思路
08-04
4、对于TABLE标记的横向滚动，需要对TABLE添加样式display = inline，如(<div id="marquee" style="width:760px;height:52px;overflow:auto;"><table style="display:inline">......</table></div>) 5、对于翻屏...
JS封装的滚动类,文字图片不间断滚动代码大全.rar
07-09
一个可以代替Marquee走马灯特效的图片滚动封装类，它可控制图片做无缝循环滚动，可以在上下左右四个方面滚动，而且具备丰富自定义设置功能。它的特点： 横向、纵向滚动格式调整 (解决横向滚动换行的问题，无需特殊...
不间断图片横向滚动特效代码
Honey_Potter的博客
12-20 1022
body{margin:0px;} ul{list-style:none; border:0; padding:0px; margin:0px;} li{list-style:none; float:left; border:0; padding:0px; margin:0px;} img{border:0px; padding:0px; margin:0px;}
横向不间断滚动菜单
hugejihu9的专栏
10-09 155
代码： &lt;!DOCTYPE html&gt;             &lt;html&gt;             &lt;head&gt;             &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;             &lt;title&gt;
窗体中的滚动字幕，向左右，及来回滚动
拓
01-20 2104
在窗体中添加一个label，一个Timer在Timer事件中填写代码：private void timer_Tick(object sender,EventArgs e){ label1.Left -=2; if(label1.Right<0) { label1.Left=this.Width; }}
横向不间断滚动DIV
无妆
11-11 500
1 DOCTYPE html> 2 html> 3 head> 4 meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 title>横向不间断滚动DIVtitle> 6 link href="css/jQuery.scrollSomething-1.0.
三种方式实现字幕水平滚动（走马灯），而且定时更新
可乐淘的专栏
03-20 2979
AndroidManifest.xml <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.cctvjiatao.timerdemo" android:versionCode="1" android:versionName="1.0" > <uses
横向的不间断广告
深海狂鲨
04-11 836
imgArr=new Array()imgArr[0]=""imgArr[1]=""imgArr[2]=""imgArr[3]=""imgArr[4]=""imgArr[5]=""imgArr[6]=""imgArr[7]=""imgArr[8]=""imgArr[9]=""imgArr[10]=""var moveStep=4 //步长，单位
网页图片左右滚动特效实例
bcbobo21cn的专栏
05-28 8637
图图：     很多网站上都有这个单击左右箭头滚动图片的效果； 看下代码： jq控制左右箭头滚动图片列表 *{ margin:0; padding:0;font-size: 12px;} ul{ list-style:none;} .slider{ width:960px;border: 1px #7
向左滚动代码可防止冲突
生活在继续
09-15 513
<br /> <br /> <!--//向左滚动代码开始 可调整样式表控制图片高宽--><br /><style type="text/css"><br />ul,li{margin:0px; padding:0px;list-style:none;}<br />.sqBorder {width:952px; height:152px; padding:0px; border:0px #000000 solid; background:#555555;}<br />.scroll_div {width:95
overflow-x: scroll;横向滚动
最新发布
06-02
没错，`overflow-x: scroll;` 是用来设置元素的水平滚动条，而不是垂直滚动条。以下是一个示例： HTML 代码： ``` <div class="container"> <div class="content"> <p>这是一段很长的文本，需要水平滚动才能查看完整内容。</p> </div> </div> ``` CSS 代码： ``` .container { width: 200px; height: 100px; overflow-x: scroll; /* 控制水平滚动条 */ } .content { width: 300px; height: 80px; } ``` 在以上示例中，`.container` 元素设置了固定的宽度和高度，并且使用 `overflow-x: scroll;` 来控制水平滚动条。`.content` 元素则设置了一个比 `.container` 元素更宽的宽度，使得其内容超出了 `.container` 元素，从而触发水平滚动条。用户可以通过水平滚动条来查看完整的内容。需要注意的是，由于 `.content` 元素的高度没有超过 `.container` 元素的高度，因此不会触发垂直滚动条。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值