文字横向滚动，或上下滚动

最新推荐文章于 2023-06-05 16:40:02 发布
最新推荐文章于 2023-06-05 16:40:02 发布
阅读量735 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cxy_12345/article/details/79298184
版权

1、文字横向滚动使用<marquee>标签即可。

<marquee><h1 style="margin: 40px; font: 30px Microsoft Yahei; text-align: center;">简单的jQuery无缝向上滚动效果演示1</h1></marquee>

2、文字纵向滚动，引入一个scroll.js,记住要先引用jquery.js。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>简单的jQuery无缝向上滚动效果演示</title>
<style>

.myscroll { width: 300px; height: 260px; margin: 0 auto; border: 1px solid #ccc; line-height: 26px; font-size: 12px; overflow: hidden;}

</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/scroll.js"></script>
<script type="text/javascript">
$(function(){
	$('.myscroll').myScroll({
		speed: 40, //数值越大，速度越慢 
		rowHeight: 26 //li的高度
	});
});
</script>
</head>

<body>

<div class="menu" style="margin:50px auto;width:500px;">
	<marquee><h1 style="margin: 40px; font: 30px Microsoft Yahei; text-align: center;">简单的jQuery无缝向上滚动效果演示1</h1></marquee>
</div>

<div class="myscroll">
	<ul>
		<li><a href="">用FlexSlider制作支付宝2013版幻灯片</a></li>
		<li><a href="">扁平化UI/Flat UI Kit(PSD)</a></li>
		<li><a href="">童趣卡通圣诞老人矢量素材(EPS)</a></li>
		<li><a href="">63个线性图标素材(PSD)</a></li>
		<li><a href="">15个音乐类图标素材(AI)</a></li>
		<li><a href="">jQuery侧边导航插件SidebarJS</a></li>
		<li><a href="">jQuery计时器插件TimeCircles</a></li>
		<li><a href="">jQuery仿Google Play幻灯片效果插件plusview</a></li>
		<li><a href="">100个圣诞节矢量图标(PSD/SVG)</a></li>
			<li><a href="">15个音乐类图标素材(AI)</a></li>
		<li><a href="">jQuery侧边导航插件SidebarJS</a></li>
		<li><a href="">jQuery计时器插件TimeCircles</a></li>
			<li><a href="">15个音乐类图标素材(AI)</a></li>
		<li><a href="">jQuery侧边导航插件SidebarJS</a></li>
		<li><a href="">jQuery计时器插件TimeCircles</a></li>

	</ul>
</div>


</body>
</html>


cxy_12345
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 实现文字上下滚动效果（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-01 977
JavaScript 实现文字上下滚动效果（附完整源码）
友情链接横向文字上下间隙循环滚动JS效果
10-27
友情链接文字上下间隙循环滚动JS效果，仿qq频道上下单行多条滚动js效果代码，可用于新闻，友情链接上下间隙滚动,非常实用，需要了解的朋友可以参考下
JS JavaScript 实现文字上下滚动效果
聆听
06-05 476
JS JavaScript 实现文字上下滚动效果
图片滚动flexslider插件使用及参数说明
lanchg的博客
08-30 358
引用：https://www.cnblogs.com/zhouyuxiang/p/4992346.html
文字上下滚动
qq_34169711的博客
01-16 272
cloud 1----------- 2----------- 3----------- 4----------- 5----------- 6----------- 7----------- 8----------- 9----------- 9----------- 9----------- 9----------- 9--...
vue 公告消息横向滚动
c_qianxia5040的博客
04-29 6328
第一种：纯文字展示，只有一句话 效果图 <!-- 公告栏组件 --> <template> <div class="notice-bar" @click="tipClick"> <div class="notice-bar__icon"> <img src="@/assets/icons/notice.png"/> <span>{{ sub_title }}</span> &lt
vue实现公告栏文字上下滚动效果的示例代码
10-15
在Vue.js框架中，实现公告栏文字上下滚动的效果，可以通过利用Vue的动态组件和过渡效果来完成。这个功能在许多网页应用中常见，用于展示滚动通知或公告。下面将详细介绍如何使用Vue实现这一效果。 首先，我们需要...
h5实现移动端横向滚动tab，并响应内容
01-10
在移动Web开发中，创建一个具有横向滚动Tab的界面是一个常见的需求，这通常用于展示多个类别或选项，而有限的屏幕空间无法垂直排列所有内容。本文将深入探讨如何使用HTML5技术来实现移动端的横向滚动Tab，并且这些...
无缝横向滚动文字图片特效特效代码
03-20
同时，“文字上下滚动的特效代码”则表明还有文字内容可以垂直滚动，这可能是标题、简短的新闻摘要或其他信息，提供了一种不同于图片的展示方式。 标签“无缝”和“横向”进一步强调了这个特效的特点，即滚动过程的...
文字上下滚动的效果
qq_44538193的博客
02-20 2012
文字上下滚动的效果 开发工具与关键技术：Adobe Dreamweaver CC 2018 作者：李德新 撰写时间：2019年02月 20日 jquery插件是我们学习IT技术必须学会的使用的技术，而js代码也是非常重要的，所以现在我来演示一下图片向左滚动的效果。 首先的布局很重要，先要按要求布置好布局才能实现文字上下滚动的效果。...
纯JS打造循环间隔滚动公告栏
02-27
通过二维数组循环显示公告，如果为最后一条循环回第一条 循环效果为进入中间区为快速进入，停顿数秒（预设2.5秒）后快速离开中间区，同时下一条公告快速进入！ 鼠标经过并且停留在公告区时，公告不进行切换，待鼠标离开后再次进行切换！ 点击公告区可查看当前点击公告内容 如果内容DIV当前未被打开，创建一个DIV，滑动路径分为两步，第一步滑动的宽度、高度、左距、顶距分别为上一次关闭的内容区的的宽度、高度、左距、左距，如果未打开过采用默认，第二步滑动同下一条一致 如果内容DIV当前已打开，则调整大小及位置为将要打开的大小及位置，滑动并替换内容区主题和内容 内容DIV可做成可移动，参考本人上次所写的移动DIV代码，此处不提供
文字上下相接 滚动.html js
12-18
部分代码如下： var Marquee = function(id){ try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}; var container = document.getElementById(id), slide = container.getElementsByTagName("li")[0], speed = arguments[1] || 80, //速度 delta = 0,//当前滚动的位置 critical = slide.offsetHeight;//临界点 slide.innerHTML += slide.innerHTML; var rolling = function(){
jquery 文字由左向右滚动 走马灯
07-16
jquery 文字由左向右滚动 走马灯 兼容性比较好
js实现的文字横向无间断滚动
10-28
要实现这样一个功能，文字在某块区域内横向无间隙滚动。
html如何上下滚动字幕,HTML如何实现文字的滚动效果
weixin_39943383的博客
05-30 6324
在HTML中，可以通过HTML的标签来实现文字的滚动效果，通过设置标签里的不同属性来实现不同的文字的滚动效果。在HTML中实现文字的滚动效果其实很简单，本篇文章就给大家介绍HTML 标签实现文字的滚动效果的方法，让大家了解标签设置不同属性实现的不同文字滚动效果。HTML Marquee标签是一个非标准的HTML元素，可以用于水平或垂直滚动图像或文本。简单来说，就是它会自动向上，向下，向左或向右的...
html 横屏滚动字幕,文字横向滚动效果
weixin_32512381的博客
05-31 1289
很多网站都有公告，并且都喜欢用横向滚动的方式来展现。最近自己用jQuery也写了文字横向滚动，实现了自定义滚动速度，鼠标经过时暂停的功能。HTMLjQuery文字横向滚动jQuery制作文字横向滚动www.jb51.netJS代码：方法一：$.fn.textScroll=function(){var speed=60,flag=null,tt,that=$(this),child=that.chi...
水平滚动字幕的jquery插件和原生代码
weixin_33939380的博客
09-14 124
滚动可以用标签<marquee>来实现，网上有些文章说marquee只有IE支持，其他的浏览器不支持。开始我还信以为真，后来亲手是一把，才知道这种说法是错误的。其他浏览器（chrome,opera,safari,firefox等）都是支持marquee的（绝知此事要躬行啊）。既然所有浏览器都兼容不应该就没问题了，但是仔细发现marquee实现的滚动效果太挫了，一卡一卡地滚，用户体验不好...
vue横屏滚动公告
Java领域优质创作者，华为云享专家
10-24 6229
横屏滚动的公告
文字横向滚动效果
avinegar的专栏
03-06 3250
/*My Marquee CSS Start*/ .my_marquee_info{width:200px;border:#987654 solid 1px;padding:20px 3px 3px 2px;margin-top:30px;} .my_marquee_main{width:200px;height:160px;border:#234567 solid 1px;padding:2
jquery文字横向滚动 广播
最新发布
09-23
另外，为了达到广播的效果，我们可以在文字左侧和右侧分别添加一些空隙，并在文字滚动到一定位置时，将其重新定位到容器的最左侧，实现连续循环滚动的效果。 除了使用原生的jQuery方法，我们还可以使用一些好用的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值