横向不间断滚动菜单

最新推荐文章于 2024-05-24 17:17:32 发布
最新推荐文章于 2024-05-24 17:17:32 发布
阅读量158 收藏
点赞数

代码：

<!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"><a href="http://www.divcss5.com/">DIVCSS5</a>演示说明：向左滚动</h2>

            <div style="text-align:center">

            <div class="sqBorder">

            <!--#####滚动区域#####-->

            <div id="scroll_div" class="scroll_div">

            <div id="scroll_begin">

            <ul>

            <li><a href="http://www.divcss5.com/"><img 
                 src="http://www.divcss5.com/img/css-logo.gif" /></a></li>

            <li><a href="http://www.divcss5.com/"><img 
                 src="http://www.divcss5.com/img/css-logo.gif" /></a></li>

            <li><a href="http://www.divcss5.com/"><img 
                src="http://www.divcss5.com/img/css-logo.gif" alt="div css" 
            /></a></li>

            <li><a href="http://www.divcss5.com/"><img 
                src="http://www.divcss5.com/img/css-logo.gif" /></a></li>

            <li><a href="http://www.divcss5.com/"><img 
                src="http://www.divcss5.com/img/css-logo.gif" alt="divcss" 
            /></a></li>

            <li><a href="http://www.divcss5.com/"><img 
                src="http://www.divcss5.com/img/css-logo.gif" /></a></li>

            <li><a href="http://www.divcss5.com/"><img 
                   src="http://www.divcss5.com/img/css-logo.gif" /></a></li>

            <li><a href="http://www.divcss5.com/"><img 
                   src="http://www.divcss5.com/img/css-logo.gif" /></a></li>

            <li><a href="http://www.divcss5.com/"><img 
                src="http://www.divcss5.com/img/css-logo.gif" /></a></li>

            <li><a href="http://www.divcss5.com/"><img 
                src="http://www.divcss5.com/img/css-logo.gif" /></a></li>

            <li><a href="http://www.divcss5.com/"><img 
                src="http://www.divcss5.com/img/css-logo.gif" /></a></li>

            <li><a href="http://www.divcss5.com/"><img 
                src="http://www.divcss5.com/img/css-logo.gif" alt="CSS" 
            /></a></li>

            <li><a href="http://www.divcss5.com/"><img 
                src="http://www.divcss5.com/img/css-logo.gif" /></a></li>

            <li><a href="http://www.divcss5.com/"><img 
                src="http://www.divcss5.com/img/css-logo.gif" /></a></li>

            <li><a href="http://www.divcss5.com/"><img 
                src="http://www.divcss5.com/img/css-logo.gif" alt="divcss5" 
            /></a></li>

            <li><a href="http://www.divcss5.com/"><img 
                src="http://www.divcss5.com/img/css-logo.gif" /></a></li>

            </ul>

            </div>

            <div id="scroll_end"></div>

            </div>

            <!--#####滚动区域#####-->

            </div>

            <script type="text/javascript">ScrollImgLeft();</script>

            </div>

            <!--//向左滚动代码结束-->

            </body></html>

 

 

 

 

 

文章来自：源码在线 https://www.shengli.me/javascript/10.html

 

 

hugejihu9
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片不间断横向滚动效果
01-23
在网页设计中，图片不间断横向滚动效果是一种常见的视觉呈现方式，它可以吸引用户的注意力并增加网站的动态感。这种效果常用于展示产品、新闻更新或广告轮播等场景。接下来，我们将详细探讨实现这一效果的关键技术和...
js实现的文字横向无间断滚动
10-28
### JavaScript 实现文字横向无间断滚动 #### 一、需求背景 在Web开发中，有时需要实现一种视觉效果——让一段文字或一系列元素在页面上进行横向无间断滚动。这种效果常见于新闻网站、广告展示等场景，能够吸引...
横向滑动导航条可点击滑动
qiushuiduren的专栏
08-11 2062
横向滑动导航条示例 先看效果如下：可滑动，标题可点击    附下载地址  http://download.csdn.net/detail/qiushuiduren/9600760 利用 HorizontalScrollView 和 Fragment 实现以上横向导航栏滑动效果 MainActivity 类代码 public class MainActivity ex
html菜单横向滑动效果,[非js]用css实现移动端菜单横向滑动功能
weixin_42326020的博客
06-05 301
testbody,p { margin:0; padding:0;}.concent { margin:50px auto; width:100%; max-width:750px; min-width:320px; }.box { white-space:nowrap; overflow-x:auto; }/*注释1*/.box::-webkit-scrollbar { width:0; hei...
css-自定义横竖滚动条样式
最新发布
2301_76671906的博客
05-24 952
CSS的::-webkit-scrollbar伪元素来修改滚动条的外观，包括宽度、颜色、滑块的形状等。
uniapp横向选项卡（水平滚动导航栏）效果二demo（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
10-12 1147
uniapp横向选项卡（水平滚动导航栏）效果二demo
横向滑动菜单, HorizontalScrollView,fragment，Viewpager结合使用
王志强_android_专栏
09-11 573
package com.wzq.scrollviewindicater; import android.graphics.Color; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import andr...
vue --- 横向滚动菜单
zxsy19966的博客
06-18 8873
【vue】横向滚动菜单
DIV+CSS+JS不间断横向滚动实现代码
10-27
不间断横向滚动想必大家在很多场合都有见过吧，本文也使用DIV+CSS+JS实现一个，感兴趣的你可以参考下哈，希望对你学习有所帮助
CSS3实现精美横向滚动菜单按钮
09-27
今天给大家分享基于css3实现精美横向滚动菜单按钮，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
横向滚动jQuery导航菜单
12-31
【横向滚动jQuery导航菜单】是一种常见的网页交互设计，它允许用户在水平方向上浏览菜单项，为网站增加了一种现代且动态的用户体验。在本文中，我们将深入探讨如何使用jQuery实现这种效果，以及相关的HTML、CSS和...
纯JS横向无限级菜单
12-27
纯JS写成，支持所有浏览器，不依赖jquery，可移植性强，简单使用
基于Vue的可滑动菜单栏
08-13
基于Vue的移动端可滑动菜单栏
CSS - 实现横向滚动（横向滚动布局）
热门推荐
王佳斌
08-24 3万+
CSS - 实现横向滚动（横向滚动布局），css横向滚动布局，css实现元素横向滚动的方法css中如何实现横向滚动布局，纯CSS实现横向滚动条，横向不间断滚动DIV CSS代码，纯CSS3横向滚动条实现。
Vue横向菜单滚动翻页功能的实现
m0_55728090的博客
01-24 4685
转载CSDN博主「watanaki」的原创文章 原文链接：https://blog.csdn.net/Watanaki/article/details/111060410 横向菜单滚动翻页功能的实现 实现方法 使用了走马灯的思想，将菜单项放在一排，超过显示区域隐藏，点击实现菜单的滚动。 效果图 具体实现 html部分 <div class="dataNav"> <button class="dataNavPrev" @click="navPrev">
移动端微信h5下ul实现横向滚动css代码
tpstu的专栏
03-09 2万+
在微信端实现商品分类的显示，需要横向显示所有分类，超出宽度的分类需要能够横向滚动显示。折腾许久，一直以为只有使用js来实现这个功能，经过不断的调试，发现只要通过css样式调整就可以实现。由于对前端知识学习不多，所以调试很久才实现该功能。特此记录，以备下次使用。 这是默认显示，手指触碰滑动的时候可以左右滑动。 并且 在微信端不会出现滚动条这根黑条。 具体实现代码如下： html代
CSS制作简单的横向菜单
JollyLee
12-04 5218
用CSS制作简单的横向菜单
横向滚动菜单按钮
qq_35832558的博客
04-20 509
横向滚动菜单按钮 - Glunefish             ul{list-style:none;}         ul li a{             display:block;             width:40px;             height:40px;              background:rgb(208,165,3
div+css+js横向不间断滚动
paopao_2017的博客
01-12 1894
横向不间断滚动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原生无间断横向滚动字幕
01-29
js原生无间断横向滚动字幕可以通过使用HTML、CSS和JavaScript来实现。首先，我们可以在HTML中创建一个容器元素，用来存放滚动字幕内容。然后，在CSS中设置容器元素为隐藏溢出，并且内部文本为绝对定位，让它们在容器内水平滚动。 接下来，我们使用JavaScript来实现无间断的横向滚动效果。首先需要获取内容元素，并且利用JavaScript动态设置其left值，使其向左移动。当内容移动到容器的最左侧时，我们可以将其left值重新设置为容器的宽度，这样就实现了无间断的滚动效果。同时，我们可以利用定时器来不断触发这个移动动作，从而实现整个滚动过程。 最后，在JavaScript中还可以添加一些交互逻辑，比如鼠标悬停时暂停滚动，鼠标移出时恢复滚动。这样就可以完善无间断横向滚动字幕的效果。 总的来说，通过HTML、CSS和JavaScript的配合，我们可以实现一个简单而有效的无间断横向滚动字幕效果，可以应用于网站的新闻滚动、广告轮播等场景中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值