茶叶网站模板 html,有没有教做网站实例视频,学生个人网页制作html源代码, 最新版地址在线CSS如何实现文字横向滚动滚动效果1、垃圾liMarquee#xff08;最好别用#xff09;2、css实现文字滚动#xff0c;且鼠标移入移出暂停和继续HTML源码如下#xff1a;CSS源码如下#xff1a;JS源码如下#xff1a;3、片尾彩蛋CSS实现文字横向循环无缝滚动#xff0c;鼠标…
CSS如何实现文字横向滚动滚动效果1、垃圾liMarquee最好别用2、css实现文字滚动且鼠标移入移出暂停和继续HTML源码如下CSS源码如下JS源码如下3、片尾彩蛋CSS实现文字横向循环无缝滚动鼠标移入暂停移出继续【写在前面】故事的起源还得从客户现场的一个问题说起前段时间总有客户现场反馈你们的系统用着用着就会出现卡住的状态导致页面无响应一开始我以为是内存的问题后面深入才发现是CPU消耗太多的问题核心问题就是我引用了jquery的liMarquee插件没想到这玩意儿搞死我了。涉及知识点css滚动CSS3animationliMarquee文字滚动jquery鼠标事件滚动效果 1、垃圾liMarquee最好别用
之前在做文字滚动的时候我图个省事直接应用了jquery.liMarquee.js组件就是这个垃圾插件让系统的CPU占用率飙升正常都是在5%一下这个直接把你的cpu干到20%。
2、css实现文字滚动且鼠标移入移出暂停和继续
这个原理主要就是利用css3的animation属性可以设置动画的时间及状态和方向。下面就暴力点直接上代码哈
HTML源码如下
div classhddp classgundong黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅黄大大好帅/p/divCSS源码如下
.hdd {width: 300px;margin: 0 auto;border: 1px solid #ff6700;overflow: hidden;}.gundong {padding-left: 20px;font-size: 12px;color: #000;display: inline-block;white-space: nowrap;animation: 10s wordsLoop linear infinite normal;}.gundong:hover {/* 设置动画是否暂停 paused暂停*/animation: 10s wordsLoop linear infinite paused;}keyframes wordsLoop {0% {transform: translateX(200px);-webkit-transform: translateX(200px);}100% {transform: translateX(-100%);-webkit-transform: translateX(-100%);}}-webkit-keyframes wordsLoop {0% {transform: translateX(200px);-webkit-transform: translateX(200px);}100% {transform: translateX(-100%);-webkit-transform: translateX(-100%);}}JS源码如下
var k 0;var _strLength $(.gundong).text().length;var _second _strLength / 3;$(.gundong).css({animation: _second s wordsLoop linear infinite normal})$(.gundong).off(mouseover).on(mouseover, function () {$(.gundong).css({animation: _second s wordsLoop linear infinite paused})})$(.gundong).off(mouseout).on(mouseout, function () {$(.gundong).css({animation: _second s wordsLoop linear infinite normal})})这个里面的js对滚动时间进行了一个计算操作也就是说根据字的格式来判断的主要目的就是防止滚动文字很多的情况下出现了我们不可控速度的问题。 另外针对鼠标移入移出事件主要还是应用了jquery的on事件通过不同的事件我们去改变css的animation是normal滚动还是paused暂停。
3、片尾彩蛋
这篇文章如若对您有帮助的话想支持博主的可以上皇榜看看哟 皇榜[点击此处进入]
