文字走马灯 置顶显示

html-css021

文字走马灯 置顶显示,第1张

应用css实现走马灯置顶显示

超出显示

用到命令 text-overflow : clip | ellipsis 文本超出:截断|省略

但这一条命令是看不到效果的,需要另外两条命令配合使用,让文本能够溢出,第一个是强制一行内显示,white-space:nowrap;第二个是溢出内容隐藏,overflow:hidden

超出跑马等效果

老的前端开发人员对于marquee标签肯定不陌生,一个被淘汰的标签,被刚入门的新手所喜爱,因为能通过一个简单的标签做出动态的效果。但是在实际应用上的局限性和效果的过时,使这个标签退出历史舞台,大家纷纷改用js来实现无间断滚动等效果。

新的CSS3 marquee设置,可以说功能强大了很多,更加易操作,用简单的代码解决了js中比较纠结的字符长度判断等难题。强烈推荐大家使用。

对于这个属性的定义,W3C标准用法和webkit内核浏览器的支持用法并不相同,由于我们立足实战实用,所以这里只介绍好用的。可用的。

我们需要四句常用命令

overflow:-webkit-marquee//指定溢出时滚动。

-webkit-marquee-style:scroll | slide | alternate//跑马灯样式,分三种。

scroll,从一端滚动到另一端,内容完全滚入(消失)时重新开始。slide,从一端滚到另一端,内容接触到另一端后,立马重新开始。alternate,内容不跑到显示区域外,在里面来回碰壁反弹。这里主要用第一种。

-webkit-marquee-repetition:infinite | number// 跑马灯跑的次数,infinite 为无限多次,不结束。或者可以用正整数设置滚动的次数。

-webkit-marquee-direction:up | down | left | right//跑动的方向,这个要注意结合实际情况,即实际你操作的标签文本流溢出在哪个方向溢出。

-webkit-marquee-speed:slow | normal | fast//跑动的速度设置。

首先是必须要有js跟CSS配合起来的,当然两者都不一定,例如js也可以实现动画效果,只是麻烦,要简单点直接用JQ里面的animate()方法配合css控制动画,又或者直接一点使用CSS3实现动画,注意是css3,但就你的代码写的是走马灯这种早就没人用的写法,目测你是个初学者,所以我的回答你并不会采纳,因为你看不懂,现在一般都用脚本写轮播图,没人用走马灯的了。

CSS3的悬停我可以写给你,JQ目测写出来对你也没多大用处,到时还得绑定什么的你一搞不出觉得我瞎说不采纳我那更悲剧

给img标签加上class或者给marquee加上class,否则怎么搞,我这里就以直接给img加上class="animate"写给你了

.animate:hover{-webkit-transform:scale(1.25,1.25)transform:scale(1.25,1.25)box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.4)-webkit-transition:all .4s-moz-transition:all .4s-o-transition:all .4s-ms-transition:all .4stransition:all .4s}

里面的大小什么都是可以控制的,包括时间,这些就拜托您上W3C看看,我已经打了很多东西了,你要有良心就采纳,采纳后可以追问,否则别追问我问题了哈,我是web前端,语气有点叼,因为我被迫来问答里混,原谅我一个技术人员被叫来干这些鸟不拉屎的工作,所以带点脾气