滚动标签 文字滚动_s_kzn的博客-程序员宝宝_span 内容滚动

技术标签: html5  javascript  css3  开发语言  

目录

滚动标签

1.文字滚动

2.图片滚动


滚动标签

在制作网页的时候,很多情况下会遇到需要某一个文字或者图片像广告那样水平或者垂直的滚动,这样的效果。JavaScript可以制作,但是比较麻烦,直接看那些代码会感觉到非常的复杂。这里我们来介绍一种简单的方式实现这样效果,他就是HTML标签中的marquee,他其实是一个容器标签。
 

1.文字滚动

margin标签:创建一个滚动的文本字幕,应用于文字、图片、表格。

文字滚动格式:

<marquee direction="滚动方向" behavior="滚动方式" scrollmount="滚动速度">文字</marquee>

                direction属性的取值:
            
                 left:默认值,向左滚动
                 
                 right: 向右滚动
                 
                 up:向上滚动
                 
                 down:向下滚动
                 

     
               behavior属性的取值:
            
                scroll:默认值,循环滚动
                
                slide:只滚动一次,不重复滚动 

                 width、height:设置滚动范围 

<marquee direction="left" behavior="scroll"   loop="-1" width="1000" height="50" hspace="10" vspace="10"> 
    
        <span>此处输入滚动内容</span>
    
    </marquee>

 展示效果:从右向左滚动。

2.图片滚动

格式:
           <marquee direction="滚动方向" behavior="滚动方式" scrollmount="滚动速度">
             <img src=""/>
           </marquee>

<marquee behavior="" direction="right">
        <img src="../素材/im1.jpg" alt="" width="100" height="200">
        <img src="../素材/im2.jpg" alt="" width="200" height="200">
    </marquee>

 图片从左向右移动

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_61700036/article/details/120902994

智能推荐

opencv图像处理之鼠标事件(矩形roi绘图)_samylee的博客-程序员宝宝

为满足图像处理要求,博主写此简易代码有如下作用:1、根据感兴趣区域做深度学习标签;2、提取感兴趣区域进行目标跟踪;3、对感兴趣区域进行进一步操作。

语音识别,文本转语音,语音转文本_weixin_30633405的博客-程序员宝宝

1. 语音合成. 百度AipSpeech: synthesis(): 1: 与合成语音的文本. 2. 语言. 3. 客户端类型,1 4.option{语音合成参数}: pit 声调 spd 语速 vol 音量 per cosplay 合成语音角色. 2. 语音识别 百度 AipSpeech asr(): 1. 音频文件流 ...

性能测试持续集成实例(Jenkins+Jmeter+ANT)_黑夜照亮前行的路的博客-程序员宝宝

性能测试持续集成(Jenkins+Ant+Jmeter)一、环境准备:1、JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.html2、Jmeter:http://jmeter.apache.org/download_jmeter.cgi3、Ant:http://ant.apache.

std::vector::erase - iterator_Yongqiang Cheng的博客-程序员宝宝

std::vector::erase - iterator1. std::vector::erase - iter--; 必不可少Given a list of integers, remove all the even elements from the vector and print the vector.给定一个整数列表,从向量中删除所有偶数元素并打印该向量。Input: 1, 2, 3, 4, 5, 6, 7, 8, 9Output: 1 3 5 7 9Explanation: 2,

Kettle工具实现CSV文件的抽取和JSON文件的数据抽取_一只瓜瓜的博客-程序员宝宝

使用kettle工具前需要做的准备: 因为本次实验是将CSV文件和JSON文件中的数据保存至数据库的数据表中,所以在此之前需要在数据库中建立一个数据库及两个数据表。 建立数据库、数据表过程如下:mysql -u root -p -- 回车后需要输入你的数据可以密码/*进入MySQL后开始建库建表*/mysql&gt; create database extract; -- 新建一个名为extract的数据库mysql&gt; use extrac...

(二)DDR协议基础进阶——(Pinout信号组成、地址关系)_SD.ZHAI的博客-程序员宝宝_ddr协议

文章目录一、DDR的相关命令二、DDR的时序一、DDR的相关命令   DDR在完整的PC端或移动电子消费端中属于芯片的外挂组件,其引脚信号按照功能可以分为6大类:前3类为时钟信号、地址及控制信号、数据信号;后3类为电源信号、接地信号、配置信号。   具体的信号信息如下表: 分类 信号名 方向 源 描述 时钟复位信号 CKE IN 时钟使能, Clock Enable 阻抗匹配使能

随便推点

影响计算机算法世界的十位大师_ajian005的博客-程序员宝宝

伟大的智者——Don E.Knuth     中文名:高德纳(1938-)算法和程序设计技术的先驱者。 Oh,God!一些国外网站这样评价他。一般说来,不知道此人的程序员是不可原谅的。其经典著作《计算机程序设计艺术》更是被誉为算法中“真正”的圣经,像KMP和LR(K)这样令人不可思议的算法,在此书比比皆是。难怪连 Bill Gates都说:“如果能做对书里所有的习题,就直接来微软上班吧!”

uni-app rich-text图片自适应 宽度100%_曲浩_的博客-程序员宝宝

info = info.replace(/\&lt;img/g, "&lt;img style='width: 100%;'")

xshell 免费版_晚吟是我的的博客-程序员宝宝_xshell 免费版

下载地址:https://www.netsarang.com/en/xshell/

MVC 几种过滤器及如何使用_xulong5000的博客-程序员宝宝_mvc过滤器有哪几种

MVC有哪几种过滤器?最近面试好像经常问到这个问题。其实我对概念性的东西不是很感冒,我也许经常用到,但是就是脑子里没有对概念进行过总结归纳,这就是本身有实力但是又不总归纳知识点的人在面试过程中最吃亏最遗憾的地方。下面摘自百度搜索出来的信息。 MVC过滤器分为四种:Authorization(授权),Action(行为),Result(结果)和Exception(异常)...

CVE-2021-4034:pkexec本地提权_FLy_鹏程万里的博客-程序员宝宝

影响范围Polkit Pkexec漏洞类型本地权限提升利用条件影响范围应用漏洞概述Polkit是一个应用程序级别的工具集,通过定义和审核权限规则,实现不同优先级进程间的通讯,控制决策集中在统一的框架之中,决定低优先级进程是否有权访问高优先级进程Polkit在系统层级进行权限控制,提供了一个低优先级进程和高优先级进程进行通讯的系统,它和sudo等程序不同,Polkit并没有赋予进程完全的root权限,而是通过一个集中的策略系统进行更精细的授权,这个漏洞是本地触发,只有在获得有限

直方图反向投影车牌识别_sun_rui_houqi的博客-程序员宝宝_直方图反向投影的意义

思路1、车牌识别1、用已知的模板,提取出感兴趣的区域作为特征图像,并计算这个区域的直方图(OpenCV中calaHist函数只可计算单通道,车牌为蓝色背景,可分离通道后计算蓝色通道)图一2、用上述直方图模型来匹配要检测的图片,也就是要检测的车牌。图二3、用计算出图一的蓝色通道直方图来匹配图二的图片如果两幅图的反向投影矩阵相似或相同,那么我们就可以判定这两幅图这个特征是相同的图像的反向投影图是用输入图像的某一位置上像素值(多维或灰度)对应在直方图的一个bin上的值来代替该像素值,所以得到的