无缝滚动DEMO

最新推荐文章于 2023-03-01 19:37:31 发布
最新推荐文章于 2023-03-01 19:37:31 发布
阅读量317 收藏
点赞数
文章标签： jquery ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lijinfeng0823/article/details/120040378
版权

http://code.ciaoca.com/jquery/kxbdmarquee/demo/

<html><head>
<meta charset="utf-8">
<title>jQuery kxbdMarquee 无缝滚动 - 在线演示 - 前端开发仓库</title>
<link rel="stylesheet" href="/static/css/base.css">
<link rel="stylesheet" href="/static/css/demo.css"><style>
#marquee1{width:310px;height:45px;overflow:hidden;background:#333;}
#marquee1 ul li{float:left; padding:0 1px;}
#marquee1 ul li img{display:block;}

#marquee2{width:300px;height:25px;overflow:hidden; background:#EFEFEF;}
#marquee2 ul li{float:left; padding:0 10px; line-height:25px;}

#marquee3{width:60px;height:235px;overflow:hidden;background:#333;}
#marquee3 ul li{float:left; padding:1px 0;}
#marquee3 ul li img{display:block;}

#marquee4{width:200px;height:200px; overflow:hidden;background:#EFEFEF;}
#marquee4 ul li{float:left; width:180px; padding:10px; line-height:20px;}
</style>
</head>
<body>
<div class="wrap">
  <div class="side">
    <div class="logo">
  <h1><a href="/" target="_blank">前端开发仓库</a></h1>
  <em>在线演示</em>
</div>

<div class="about">
  <h2>jQuery kxbdMarquee 无缝滚动</h2>
  <ul>
    <li><a target="_blank" href="http://www.kxbd.com/?p=281">来源</a></li>  </ul>
</div>
      </div>
  <div class="main">
    <div class="inwrap">
      <h2>示例</h2>
      
      <div class="example">
        <h2>横向滚动 (right)</h2>
        <div id="marquee1">
          <ul style="width: 992px;">
            <li><img src="img/01s.jpg" width="60" height="45"></li>
            <li><img src="img/02s.jpg" width="60" height="45"></li>
            <li><img src="img/03s.jpg" width="60" height="45"></li>
            <li><img src="img/04s.jpg" width="60" height="45"></li>
            <li><img src="img/05s.jpg" width="60" height="45"></li>
            <li><img src="img/06s.jpg" width="60" height="45"></li>
            <li><img src="img/07s.jpg" width="60" height="45"></li>
            <li><img src="img/08s.jpg" width="60" height="45"></li>
          <li><img src="img/01s.jpg" width="60" height="45"></li><li><img src="img/02s.jpg" width="60" height="45"></li><li><img src="img/03s.jpg" width="60" height="45"></li><li><img src="img/04s.jpg" width="60" height="45"></li><li><img src="img/05s.jpg" width="60" height="45"></li><li><img src="img/06s.jpg" width="60" height="45"></li><li><img src="img/07s.jpg" width="60" height="45"></li><li><img src="img/08s.jpg" width="60" height="45"></li></ul>
        </div>
      </div>
        
      <div class="example">
        <h2>横向滚动 (left)</h2>
        <div id="marquee2">
          <ul style="width: 3460px;">
            <li><a href="#">新闻公告一</a></li>
            <li><a href="#">新闻公告二新闻公告二新闻公告二新闻公告二</a></li>
            <li><a href="#">新闻公告三新闻公告三</a></li>
            <li><a href="#">新闻公告四新闻公告四新闻公告四</a></li>
            <li><a href="#">新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五</a></li>
            <li><a href="#">新闻公告六新闻公告六新闻公告六</a></li>
          <li><a href="#">新闻公告一</a></li><li><a href="#">新闻公告二新闻公告二新闻公告二新闻公告二</a></li><li><a href="#">新闻公告三新闻公告三</a></li><li><a href="#">新闻公告四新闻公告四新闻公告四</a></li><li><a href="#">新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五</a></li><li><a href="#">新闻公告六新闻公告六新闻公告六</a></li></ul>
        </div>
      </div>
        
      <div class="example">
        <h2>纵向滚动 (bottom)</h2>
        <div id="marquee3">
          <ul style="height: 752px;">
            <li><img src="img/01s.jpg" width="60" height="45"></li>
            <li><img src="img/02s.jpg" width="60" height="45"></li>
            <li><img src="img/03s.jpg" width="60" height="45"></li>
            <li><img src="img/04s.jpg" width="60" height="45"></li>
            <li><img src="img/05s.jpg" width="60" height="45"></li>
            <li><img src="img/06s.jpg" width="60" height="45"></li>
            <li><img src="img/07s.jpg" width="60" height="45"></li>
            <li><img src="img/08s.jpg" width="60" height="45"></li>
          <li><img src="img/01s.jpg" width="60" height="45"></li><li><img src="img/02s.jpg" width="60" height="45"></li><li><img src="img/03s.jpg" width="60" height="45"></li><li><img src="img/04s.jpg" width="60" height="45"></li><li><img src="img/05s.jpg" width="60" height="45"></li><li><img src="img/06s.jpg" width="60" height="45"></li><li><img src="img/07s.jpg" width="60" height="45"></li><li><img src="img/08s.jpg" width="60" height="45"></li></ul>
        </div>
      </div>
        
      <div class="example">
        <h2>纵向滚动 (top)</h2>
        <div id="marquee4">
          <ul style="height: 1000px;">
            <li><a href="#">新闻公告一新闻公告一</a></li>
            <li><a href="#">新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二</a></li>
            <li><a href="#">新闻公告三新闻公告三新闻公告三新闻公告三</a></li>
            <li><a href="#">新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四</a></li>
            <li><a href="#">新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五</a></li>
            <li><a href="#">新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六</a></li>
          <li><a href="#">新闻公告一新闻公告一</a></li><li><a href="#">新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二</a></li><li><a href="#">新闻公告三新闻公告三新闻公告三新闻公告三</a></li><li><a href="#">新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四</a></li><li><a href="#">新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五</a></li><li><a href="#">新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六</a></li></ul>
        </div>
      </div>
      
    </div>
  </div>
</div>

<script src="/static/js/highlight/highlight.pack.js"></script>
<script src="/static/js/controller/demo.js"></script><script src="/static/js/jquery/jquery-1.3.2.min.js"></script>
<script src="js/jquery.kxbdmarquee.min.js"></script>
<script>
$('#marquee1').kxbdMarquee({
  direction: 'right'
});

$('#marquee2').kxbdMarquee({
  isEqual: false
});

$('#marquee3').kxbdMarquee({
  direction: 'down'
});

$('#marquee4').kxbdMarquee({
  direction: 'up',
  isEqual: false
});
</script>

<!-- <script src="http://code.ciaoca.com/static/js/donate.js"></script> -->
<div style="display:none;">
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cdiv id='cnzz_stat_icon_5076009' style='display:none;'%3E%3C/div%3E%3Cscript src='" + cnzz_protocol + "s25.cnzz.com/stat.php%3Fid%3D5076009' type='text/javascript'%3E%3C/script%3E"));</script><div id="cnzz_stat_icon_5076009" style="display:none;"><a href="https://www.cnzz.com/stat/website.php?web_id=5076009" target="_blank" title="站长统计">站长统计</a></div><script src=" http://s25.cnzz.com/stat.php?id=5076009" type="text/javascript"></script><script src="http://c.cnzz.com/core.php?web_id=5076009&amp;t=z" charset="utf-8" type="text/javascript"></script>
</div>

<div id="fatkun-drop-panel">
        <a id="fatkun-drop-panel-close-btn">×</a>
            <div id="fatkun-drop-panel-inner">
                <div class="fatkun-content">
                    <svg class="fatkun-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5892"><path d="M494.933333 782.933333c2.133333 2.133333 4.266667 4.266667 8.533334 6.4h8.533333c6.4 0 10.666667-2.133333 14.933333-6.4l2.133334-2.133333 275.2-275.2c8.533333-8.533333 8.533333-21.333333 0-29.866667-8.533333-8.533333-21.333333-8.533333-29.866667 0L533.333333 716.8V128c0-12.8-8.533333-21.333333-21.333333-21.333333s-21.333333 8.533333-21.333333 21.333333v588.8L249.6 475.733333c-8.533333-8.533333-21.333333-8.533333-29.866667 0-8.533333 8.533333-8.533333 21.333333 0 29.866667l275.2 277.333333zM853.333333 874.666667H172.8c-12.8 0-21.333333 8.533333-21.333333 21.333333s8.533333 21.333333 21.333333 21.333333H853.333333c12.8 0 21.333333-8.533333 21.333334-21.333333s-10.666667-21.333333-21.333334-21.333333z" p-id="5893"></path></svg>
                    <div class="fatkun-title">拖拽到此处</div>
                    <div class="fatkun-desc">图片将完成下载</div>
                </div>
            </div>
    </div></body></html>

lijinfeng0823
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery.marquee.js官方下载
10-20
jquery.marquee.js demo及源文件
jquery多风格多功能滚动特效代码插件jquery.liMarquee.js下载.zip
07-05
jquery多风格多功能滚动特效代码插件jquery.liMarquee.js下载
关于Jquery无限滚动插件kxbdMarquee使用过程所遇到的3个问题（结合tab栏切换，定时器未被清空，网页缩小后滚动效果消失）及解决方案
m0_50621863的博客
07-28 916
kxbdMarquee的基本使用(更改后的源码在文本末尾) 地址：https://github.com/erdouzhang/jquery.kxbdmarquee.js 使用方法及参数说明 * @DOM * <div id="marquee"> * <ul> * <li></li> * <li></li> * </ul> * </div> * @CSS
js实现跑马灯
h220801__zzl的博客
03-01 1358
js实现跑马灯，给定数组
无缝滚动--jquery.kxbdmarquee.js
MyNameIsXiaoLai的博客
01-18 215
https://blog.csdn.net/erdouzhang/article/details/55106785 无缝滚动--jquery.kxbdmarquee.js 2017年02月14日 21:35:52 erdouzhang 阅读数：2122更多 个人分类： 轮播 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/erdouzhan...
JavaScript极简无缝滚动demo.html
02-19
JS极简无缝滚动.html
js无缝滚动demo
11-25
在网页设计中，无缝滚动是一种常见的特效，可以为用户提供流畅的浏览体验，使得内容仿佛没有边界地持续滚动。本示例将探讨如何使用原生JavaScript来实现一个简单的无缝滚动效果。 首先，我们需要理解无缝滚动的基本...
jquery 无缝滚动 demo
11-09
【jQuery 无缝滚动效果详解】 在网页设计中，动态效果的运用可以提升用户体验，其中“无缝滚动”是一种常见的视觉效果，常用于展示图片或文本信息。本教程将深入讲解如何利用jQuery实现页面图片的无缝滚动效果，...
无缝滚动效果js
01-20
无缝滚动效果是网页设计中的一种常见技术，它使得页面内容能够不间断地、平滑地滚动显示，给用户带来流畅的视觉体验。这种效果通常应用于新闻滚动、广告轮播或者长内容展示等场景。在本案例中，我们有两个关键文件：...
js向上无缝滚动,网站公告效果 具体代码
10-26
在本例中，我们探讨的是如何使用JS创建一个向上无缝滚动的网站公告效果。这个效果常见于网站顶部，用来展示重要的通知或者更新信息。 首先，我们需要了解HTML和CSS的基础知识。HTML（HyperText Markup Language）...
jquery.kxbdmarquee插件
03-10
无缝滚动插件jquery.kxbdmarquee.以及所依赖的jQuery。
jQuery kxbdMarquee 无缝滚动
05-31
jQuery kxbdMarquee 无缝滚动
JQuery插件Marquee.js实现无缝滚动效果
11-22
Marquee.js插件提供了许多属性选项，您可以配置定制外观和效果。 { yScroll: "top" // 初始滚动方向 (还可以是"top" 或 "bottom") showSpeed: 850 // 初始下拉速度 scrollSpeed: 12 // 滚动速度 , pauseSpeed: 5000 // 滚动完到下一条的间隔时间 pauseOnHover: true // 鼠标滑向文字时是否停止滚动 loop: -1 // 设置循环滚动次数 （-1为无限循环） fxEasingShow: "swing" // 缓冲效果 fxEasingScroll: "linear
DropShadow控件
weixin_33743248的博客
11-02 72
功能：         1.锐化边角效果：可以让Panel等控件的边角圆滑。         2. 阴影效果：让指定的控件具备阴影效果。         3. 阴影透明：此设置是专门针对控件的阴影，设置透明度，如果控件没有阴影，则此功能也不存在。 属性：         TargetControlID：要应用阴影的控件ID。          Opacity：阴影的透明度。最大值为1，...
js实现横向跑马灯效果
Cike___的博客
01-30 879
js实现横向跑马灯
信息滚动（marquee+JS实现）
Xiaoming's Blog
01-08 2749
为什么<marquee>标签会被弃用？ 因为它违反了W3C的武学道义，W3C江湖第一原则就是功能性分离即行为与表现的分离，只有恪守这个原则的标签才会被允许参加舞林大会，其他类似于marquee尔等皆是歪门邪道，武功再高也不要，不要！好像就是武功太高啦，哈哈
JS仿marquee无缝滚动实用篇+JS随机生成字符串
上帝的FANS的专栏
03-22 1208
JS仿marquee无缝滚动实用篇+JS随机生成字符串。页面文字滚动，预约挂号滚动，js滚动
vue 无缝滚动横向公告
最新发布
12-13
以下是一个基于Vue实现的文字横向无缝滚动组件的代码示例： ```vue <template> <div class="marquee"> <div class="marquee-content" ref="marqueeContent"> <slot></slot> </div> </div> </template> <script> export default { name: 'Marquee', data() { return { timer: null, speed: 1, isPaused: false } }, mounted() { this.start() }, methods: { start() { this.timer = setInterval(() => { if (!this.isPaused) { const marqueeContent = this.$refs.marqueeContent const marqueeWidth = marqueeContent.offsetWidth const parentWidth = marqueeContent.parentNode.offsetWidth if (marqueeWidth - this.speed <= parentWidth) { marqueeContent.style.left = '0px' } else { marqueeContent.style.left = parseInt(marqueeContent.style.left || '0') - this.speed + 'px' } } }, 20) }, pause() { this.isPaused = true }, resume() { this.isPaused = false } }, beforeDestroy() { clearInterval(this.timer) } } </script> <style> .marquee { overflow: hidden; position: relative; } .marquee-content { position: absolute; white-space: nowrap; } </style> ``` 使用方法： 在需要使用滚动公告的地方，引入该组件并使用`<marquee>`标签包裹需要滚动的内容即可，例如： ```vue <template> <div> <marquee> <span>这是第一条公告</span> <span>这是第二条公告</span> <span>这是第三条公告</span> </marquee> </div> </template> <script> import Marquee from '@/components/Marquee.vue' export default { name: 'Demo', components: { Marquee } } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值