js 实现文字列表滚动效果
今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下:
html代码:
<style type="text/css">
*{margin:;padding:;list-style-type:none;}
a,img{border:;}
a,a:visited{color:#5e5e5e; text-decoration:none;}
a:hover{color:#b52725;text-decoration:underline;}
.clear{display:block;overflow:hidden;clear:both;height:;line-height:;font-size:;}
body{font:12px/% Arial, Helvetica, sans-serif;}
/* ranklist */
.ranklist{height:200px;overflow:hidden;}
.ranklist li{height:26px;line-height:26px; padding-bottom:10px; overflow:hidden;position:relative;padding: 70px 30px;}
.ranklist li em{background:url(images/mun.gif) no-repeat;width:20px;height:16px;overflow:hidden;display:block;position:absolute;left:;top:;text-align:center;font-style:normal;color:#;}
.ranklist li em{background-position: -16px;}
.ranklist li.top em{background-position: ;color:#fff;}
.ranklist li .num{position:absolute;right:;top:;color:#;}
</style>
</head>
<body> <div class="ranklist" id="ranklist">
<ul style="margin-top:0px;">
<li class="top">
<em></em><p><a href="http://www.17sucai.com/" target="_blank">js图片左右无缝滚动用鼠标控制图片滚动</a></p><span class="num">32万下载</span>
</li>
<li class="top">
<em></em><p><a href="http://www.17sucai.com/" target="_blank">js无缝滚动制作js文字无缝滚动和js图片无缝滚动</a></p><span class="num">32万下载</span>
</li>
<li class="top">
<em></em><p><a href="http://www.17sucai.com/" target="_blank">jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作</a></p><span class="num">32万下载</span>
</li>
<li>
<em></em><p><a href="http://www.17sucai.com/" target="_blank">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></p><span class="num">32万下载</span>
</li>
<li>
<em></em><p><a href="http://www.17sucai.com/" target="_blank"> javascript滚动图片带按钮控制上下左右自动无缝滚动</a></p><span class="num">32万下载</span>
</li>
<li>
<em></em><p><a href="http://www.17sucai.com/" target="_blank">jquery hover图片插件制作鼠标滑过标题单个展开图片效果</a></p><span class="num">32万下载</span>
</li>
<li>
<em></em><p><a href="http://www.17sucai.com/" target="_blank">flash图片特效3D立体动画焦点图片切换带左右按钮控制滚动</a></p><span class="num">32万下载</span>
</li>
<li>
<em></em><p><a href="http://www.17sucai.com/" target="_blank">js lazyload实现网页图片延迟加载特效</a></p><span class="num">32万下载</span>
</li>
<li>
<em></em><p><a href="http://www.17sucai.com/" target="_blank">FlippingBook电子杂志书去版权,翻页图片全部外调 站长珍藏版</a></p><span class="num">32万下载</span>
</li>
<li>
<em></em><p><a href="http://www.17sucai.com/" target="_blank">门户网站jquery广告控制flash或图片顶部广告显示隐藏</a></p><span class="num">32万下载</span>
</li>
</ul>
</div>
js代码:
<script type="text/javascript">
var scrtime;
function scrollTextList() {
/// <summary>
/// 滚动文字列表
/// </summary>
scrtime = window.setInterval(function () {
var $ul = $("#ranklist ul"); var liHeight = $ul.find("li:first").height();
$ul.animate({ marginTop: -liHeight + "px" }, , function () { $ul.find("li:first").insertAfter($ul.find("li:last"));
$ul.css({ marginTop: });
});
}, );
}
$(function () {
scrollTextList();
$("#ranklist").mouseover(function () {
clearInterval(scrtime);
}).mouseout(function () {
scrollTextList();
}); });
</script>
js 实现文字列表滚动效果的更多相关文章
- js实现文字上下滚动效果
大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...
- js标题文字向上滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- JQuery实现页面企业广告图片切换和新闻列表滚动效果
最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- jquery实现文字上下滚动效果
文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> &l ...
- Vue开发组件之替代marquee标签,超出宽度文字横向滚动效果
一.npm 安装 如果你想安装插件(自己写的)安装 install dependencies npm i marquee-components 使用 在main.js引入 import marquee ...
- js 实现单行文本滚动效果
js 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, ...
- jquery实现多行文字图片滚动效果
今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function ...
- js实现文字横向滚动
页面布局 <div id="scroll_div" class="fl"> <div id="scroll ...
- TextView实现文字水平滚动效果
有时候我们使用TextView显示文本,只想把所有内容用一行显示出来,但是一行又显示不完,就需要让文本实现水平滚动的效果. 具体实现方法如下: 1,实现自定义TextView并实现isFocused( ...
随机推荐
- Spring IoC、DI入门小程序
Alt+/智能提示xml配置文件节点及属性:在接口上使用Ctrl+T可以提示其实现类 一.IoC控制反转(将创建对象的权利交给spring)入门小程序 1.引入jar包 2.工程基本结构 3.新建Us ...
- thinkphp开发规范
1.编写目的 为了更好的提高技术部的工作效率,保证开发的有效性和合理性,并可最大程度的提高程序代码的可读性和可重复利用性,指定此规范.开发团队根据自己的实际情况,可以对本规范进行补充或裁减. ...
- Java 获取距离最近一段时间的时间点
if (timeFilter == 1) {// 最近三个月 long curTimeSeconds = System.currentTimeMillis() / 1000L; para.put(&q ...
- 解决微信OAuth2.0网页授权回调域名只能设置一个的问题
https://github.com/HADB/GetWeixinCode GetWeixinCode 解决微信OAuth2.0网页授权回调域名只能设置一个的问题 使用方法 部署get-weixin- ...
- 一个令人蛋疼的 Microsoft.AspNet.FriendlyUrls
我一个项目都基本上做完了,结果部署到我服务器的时候结果一直报404 找不到 一看global.asax有个路由注册的代码 public static void RegisterRoutes(Route ...
- 数据库的模糊查询mybatis
<!-- oracle --> <select id="searchUserBySearchName" parameterType="java.lang ...
- Usermod 命令详解 ------工作中修改shell时用 usermod -s /bin/csh home
Usermod 命令详解 2012-09-11 11:01:36 标签:usermod 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.htt ...
- 如何测试本机的公网IP能否被Internet用户访问
声明:本机的公网IP是指ADSL拨号方式取得的公网IP,并非指固定公网IP. 一.新建IIS站点 xp系统需要有安装包才能安装IIS服务 windows7及以上与系统直接在windows->控制 ...
- .NET中的装饰器设计模式
- Entity Framework ModelFirst尝试
前言 Model First我们称之为“模型优先”,这里的模型指的是“ADO.NET Entity Framework Data Model”,此时你的应用并没有设计相关数据库,在Visual Stu ...