文字上下滚动效果

案例:

第一种:直接用<marquee></marquee>   最终效果可以实现,但是据说用户效果不好(我不知道原因)

HTML代码:

◎ direction   表示滚动的方向,值可以是left,right,up,down,默认为left
◎ behavior   表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alternate(往返滚动)
◎ loop   表示循环的次数,值是正整数,默认为无限循环
◎ scrollamount   表示运动速度,值是正整数,默认为6
◎ scrolldelay   表示停顿时间,值是正整数,默认为0,单位似乎是毫秒
◎ align   表示元素的垂直对齐方式,值可以是top,middle,bottom,默认为middle
◎ bgcolor   表示运动区域的背景色,值是16进制的RGB颜色,默认为白色
◎ height、width   表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认width=100% height为标签内元素的高度
◎ hspace、vspace   表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素。
◎ onmouseover=this.stop() onmouseout=this.start()   表示当鼠标以上区域的时候滚动停止,当鼠标移开的时候又继续滚动。

最终效果:

第二种:利用jq来实现,利用插件完成文字滚动效果。

在头部<head></head>中引入js

HTML:

在<div></div>后面加入jq代码:

CSS:

最终效果:

时间: 2024-10-19 15:57:57

文字上下滚动效果的相关文章

jquery实现文字上下滚动效果

文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文字滚动</title> <style type="text/css

javaScript 利用随机数和定时器完成几个有用的文字小操作 文字的滚动效果,文字的打印效果和文字的颜色闪烁

文字的滚动 <body> <textarea id="textarea"></textarea> <script> str=" 文 字 的 滚 动 效 果"; function roll(){ str=str.substr(1,str.length)+str.substring(0,1); document.getElementById("textarea").style.fontSize=&quo

排行榜 文字向上滚动效果

<!-- 文字轮播效果 start--> <script> (function($){ $.fn.FontScroll = function(options){ var d = {time: 3000,s: 'fontColor',ulClassName:'line'} var o = $.extend(d,options); //d目标参数 options原参数 对原对象中的每个属性进行判断,如果是,那么将他拷贝到目标的对象上去. this.children('ul').addC

JQuery实现文字无缝滚动效果 Marquee插件

推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. 官方演示,如下: Demo 使用方法如下: 1.加载javascript. <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript&

jquery实现多行文字图片滚动效果

今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function(opt,callback){if(!opt) var opt={};var _this=this.eq(0).find("ul:first");var lineH=_this.find("li:first").height(), line=opt.line?parse

jQuery实现文字横向滚动效果

HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; overflow:hidden; height:20px;"> <div id="noticeList" style="position:absolute; top:0; height:20px;"> <span>jQuery文字横

jquery文字纵向滚动效果(带间隔停留)

<script type="text/javascript"> //文字纵向滚动 $(function() { var $this = $("#quotation"); var scrollTimer; $this.hover(function() { clearInterval(scrollTimer); }, function() { scrollTimer = setInterval(function() { scrollNews($this);

css3 文字轮番滚动效果2——改进版

1.优化了之前的代码: 2.修正了先前按照文字的条目的数量计算速度的问题,现在改为按照字符的个数计算动画执行一次需要的时间,更为精确: 3.增添了每一行JS代码的注释. 4.这个案例的用途一般为告警信息的展示: 告警的条数是不确定的,每条告警的字数是不确定的,展示告警的区域可根据浏览器的分辨率进行放大缩小: 本案例的书写满足这几个条件. 5.本案例的实现思路: 1)设置一个展示文字的div:该div的宽度用百分比来表示: 2)设置一个能够放下所有的文字条目的div:该div的宽度通过计算得到:

纯css3实现文字间歇滚动效果

场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用Vue,已经很少操作DOM了,所以考虑最好通过CSS来实现,可以通过Vue给模板元素动态绑定class来实现相同的功能,如果需要考虑css3兼容性的话,可以去使用JavaScript去完成. 主要用到了css3的两个属性:@framekeys和animation 通过 @keyframes 规则,能够