前端一个简单的文字滚动特效
摘要： 前端开发文件命名规范 人人网fed css编码前端开发规范 web前端开发的规范 html 代码 <!DOCTYPE html> <html> <head lang=”en”> <meta charset=”……
| 前端开发文件命名规范 |
| 人人网fed css编码前端开发规范 |
| web前端开发的规范 |
html 代码
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″ />
<title>一个简单的文字滚动效果</title>
<style>
#container {
width: 500px;
height: 300px;
margin: 200px auto;
border: 1px solid #ddd;
text-align: center;
background-color: #eee;
}
.text {
width: 200px;
height: 30px;
overflow: hidden;
cursor: pointer;
margin: 0 auto;
}
.text ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.text ul li {
width: 200px;
height: 30px;
background: #333;
line-height: 30px;
}
</style>
</head>
<body>
<div id=”container”>
<h1>文字滚动效果</h1>
<div class=”text”>
<ul>
<li class=”li1″ style=”color:orange”>wellcoto</li>
<li>
<a style=”color:green” href=”http://lmrone.top”
>http://lmrone.top</a
>
</li>
<li style=”color:blue”>web前端学习</li>
</ul>
</div>
</div>
<script src=”http://lmrone.top/templets/smallcase/jq.js”></script>
<script>
$(function() {
//文字滚动的函数
function textslide() {
var height = $(‘.text ul li’).height() //获取li的高度
//让第一个向上30px,完成之后，再把这个li添加到li的最后，然后把它的marginTop还原到0
$(‘.text ul li’)
.eq(0)
.animate({ marginTop: -height }, function() {
$(this)
.remove()
.appendTo(‘.text ul’)
.css({ marginTop: 0 })
})
}
//每隔3s执行一次文字的滚动
var t = setInterval(textslide, 1000)
//当鼠标触碰到text区域时，停止滚动，就需要清除计时器clearInterval
$(‘.text’).hover(
function() {
clearInterval(t)
//当鼠标离开text区域时，继续滚动
},
function() {
t = setInterval(textslide, 1000)
},
)
})
</script>
</body>
</html>
1.思路
通过改变每个li的margin-top来进行移动
2.涉及的知识点
.setInterval(fn,time);
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
hover(infn,outfn);
hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。infn规定 mouseover 事件发生时运行的函数,必须填写
appendTo()
用法：$(content).appendTo(selector) content规定要插入的内容（必须包含 html 标签）; selector:规定把内容追加到哪个元素上
remove():remove() 方法移除被选元素，包括所有的文本和子节点
语法:$(selector).remove()
| 网易前端开发规范 |
| 前端开发规范手册 |
| google 前端开发规范 |
» 本文来自：前端开发者 » 《前端一个简单的文字滚动特效》
» 本文链接地址：https://www.rokub.com/6311.html
» 您也可以订阅本站：https://www.rokub.com
近期评论