jquery实现公告翻滚效果
2019/6/29 22:29:50
本文主要是介绍jquery实现公告翻滚效果,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
翻滚效果非常不错,代码也很简单,这里就不多废话了。
复制代码 代码如下:
//样式文件:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.scrollNews {
width: 100%;
height: 20px;
overflow: hidden;
background: #FFFFFF;
border: 0px solid #AAAAAA;
}
.scrollNews ul {
padding: 2px 5px 5px 25px;
}
.scrollNews ul li {
height: 20px;
list-style-type: none;
font-size: small;
}
a {
text-decoration: none;
}
</style>
头部js
别忘了导入jquery库
复制代码 代码如下:
$(function () {
var settime;
$(".scrollNews").hover(function () {
clearInterval(settime);
}, function () {
settime = setInterval(function () {
var $first = $(".scrollNews ul:first"); //选取div下的第一个ul 而不是li;
var height = $first.find("li:first").height(); //获取第一个li的高度,为ul向上移动做准备;
$first.animate({ "marginTop": -height + "px" }, 600, function () {
$first.css({ marginTop: 0 }).find("li:first").appendTo($first); //设置上边距为零,为了下一次移动做准备
});
}, 3000);
}).trigger("mouseleave"); //trigger()方法的作用是触发被选元素的制定事件类型
});
jsp正文区
复制代码 代码如下:
<div class="scrollNews">
<img width="20" height="15" src="img/laba.png" align="left">
<ul>
<li><a class="tooltip" title="查询模块菜单名称更新公告:从2015-02-09开始,查询模块菜单使用新名称,具体请参考下方【查询模块新旧名称对照表】.">
查询模块菜单名称更新公告:从2015-02-09开始,查询模块菜单使用新名称,具体请参考下方【查询模块新旧名称对照表】.</a>
</li>
<li><a class="tooltip" title="查询模块菜单名称更新公告:从2015-02-09开始,查询模块菜单使用新名称,具体请参考下方【查询模块新旧名称对照表】.">
查询模块菜单名称更新公告:从2015-02-09开始,查询模块菜单使用新名称,具体请参考下方【查询模块新旧名称对照表】.</a>
</li>
</ul>
</div>
小伙伴们自由发挥下,应用到自己的项目中吧
这篇关于jquery实现公告翻滚效果的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06jquery对css样式(jquery中的css方法)-icode9专业技术文章分享
- 2023-05-27JQuery的认识和安装
- 2023-01-06JQuery应用技巧:如何定义 HTML 模板并使用 JQuery 进行加载-icode9专业技术文章分享
- 2022-09-29复习-jQuery
- 2022-09-04Python3项目初始化10-->前端基础jquery、ajax,sweetalert--更新用户改造
- 2022-08-30day 27 jquery
- 2022-08-29jQuery筛选器,bootstrap
- 2022-08-20JQuery事件绑定
- 2022-08-20JQuery案例
- 2022-08-07关于jQuery的学习