jQuery实现的文字逐行向上间歇滚动效果示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net jQuery文字逐行向上滚动代码</title>
<link href="css/index.css" rel="external nofollow" rel="stylesheet" type="text/css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
*{ margin:0px; padding:0px; font-family:'微软雅黑'; -webkit-tap-highlight-color:rgba(,,,); }
li{ list-style:none }
img{ border:none}
a{text-decoration:none;}
/* -------------------------摇奖排行榜----------------------------------- */
.Top_Record{}
.record_Top{width:%; height:50px; text-align:center; line-height:50px; margin:30px auto 0px; color:#;}
.topRec_List dl,.maquee{ width:%; overflow:hidden; margin: auto; color:#7C7C7C}
.topRec_List dd{ float:left; text-align:center; border-bottom:1px solid #1B96EE; color:#1B96EE;}
.topRec_List dl dd:nth-child(){ width:%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(){ width:%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(){ width:%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(){ width:%; height:40px; line-height:40px; }
.maquee{ height:195px;}
.topRec_List ul{ width:%; height:195px;}
.topRec_List li{ width:%; height:38px; line-height:38px; text-align:center; font-size:12px; border-bottom: 1px dashed #aaa;}
/*.topRec_List li:nth-child(2n){ background:#077cd0}*/
.topRec_List li div{ float:left;}
.topRec_List li div:nth-child(){ width:%;}
.topRec_List li div:nth-child(){ width:%;}
.topRec_List li div:nth-child(){ width:%;}
.topRec_List li div:nth-child(){ width:%;}
.apple a{display:block; text-decoration:none;}
.apple,.aa{ width:%; height:50px; overflow:hidden; margin:30px auto; border:1px solid #1B96EE;}
.apple a,.aa a{ width:%; height:50px; line-height:50px; text-indent:20px; color:#1B96EE;}
.aa {word-wrap:break-word;line-height:50px; color:#1B96EE;}
</style>
</head>
<body>
<div class="Top_Record">
<div class="record_Top">摇奖排行榜</div>
<div class="topRec_List">
<dl>
<dd>编号</dd>
<dd>姓名</dd>
<dd>奖项</dd>
<dd>时间</dd>
</dl>
<div class="maquee">
<ul>
<li>
<div></div>
<div>王**</div>
<div>中了30元</div>
<div>// :</div>
</li>
<li>
<div></div>
<div>王**</div>
<div>中了30元</div>
<div>// :</div>
</li>
<li>
<div></div>
<div>王**</div>
<div>中了30元</div>
<div>// :</div>
</li>
<li>
<div></div>
<div>王**</div>
<div>中了30元</div>
<div>// :</div>
</li>
<li>
<div></div>
<div>王**</div>
<div>中了30元</div>
<div>// :</div>
</li>
<li>
<div></div>
<div>王**</div>
<div>中了30元</div>
<div>// :</div>
</li>
<li>
<div></div>
<div>王**</div>
<div>中了30元</div>
<div>// :</div>
</li>
<li>
<div></div>
<div>王**</div>
<div>中了30元</div>
<div>// :</div>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
function autoScroll(obj){
$(obj).find("ul").animate({
marginTop : "-39px"
},,function(){
$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
})
}
$(function(){
var scroll=setInterval('autoScroll(".maquee")',);
$(".maquee").hover(function(){
console.log("aaa");
clearInterval(scroll);
},function(){
scroll=setInterval('autoScroll(".maquee")',);
});
});
</script>
</body>
</html>
<MARQUEE id="msky" direction="left" width="" scrolldelay ="" onmouseover="this.stop();" onmouseout="this.start();"> <span class="style2"> 今天 晴转多云 ℃～℃ 东南风3-4级</span></MARQUEE>
jQuery实现的文字逐行向上间歇滚动效果示例的更多相关文章
- Jquery 文字上下滚动效果示例代码
<!doctype html> <html> <head> <meta charset="utf-8"> ...
- jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...
- jQuery鼠标悬停文字渐隐渐现动画效果
jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...
- 使用JavaScript完成文字向上间歇滚动
使用JavaScript完成文字的间歇滚动 const init = (initData) => { const area = initData.area; // 设置单行滚动的高度: cons ...
- 使用jQuery实现向上循环滚动效果（超简单）
今天突发奇想 想到的一个新思路 通过使用animate改变外边距达到滚动效果 再用复制节点插入到最后一行达到循环目的 HTML代码如下 <body> <ul style=" ...
- Expression Blend4经验分享：文字公告无缝循环滚动效果
这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...
- jquery插件之文字无缝向上滚动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...
- 纯css3实现文字间歇滚动效果
场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...
- 使用jquery animate实现锚点慢慢平滑滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- DFS问题举例：N个整数选k个使其和为x
N个整数选k个使其和为x,若有多个方案,选择元素平方和最大的一个 #include<cstdio> #include<cmath> #include<cstring> ...
- [USACO10FEB]购买巧克力Chocolate Buying
题目描述 Bessie and the herd love chocolate so Farmer John is buying them some. The Bovine Chocolate Sto ...
- CF#538 C - Trailing Loves (or L'oeufs?) /// 分解质因数
题目大意: 求n!在b进制下末尾有多少个0 https://blog.csdn.net/qq_40679299/article/details/81167283 一个数在十进制下末尾0的个数取决于10 ...
- zic2xpm - 将 ZIICS 象棋片段 (chess pieces) 转换为 XBoard (XPM/XIM) 片段的工具。
总览 SYNOPSIS zic2xpm file1 [file2 ...] 描述 zic2xpm 将一个或多个 ZIICS 片段文件转换为 XBoard 可用的格式.如果你给出一个以上的文件名,小心同 ...
- centos7 sshd 安全设置
ssh 的安全机制 1.SSH之所以能够保证安全,原因在于它采用了非对称加密技术(RSA)加密了所有传输的数据. 2.传统的网络服务程序,如FTP等在网络上用明文传送数据.用户帐号和用户口令,很容 ...
- 数组去重Set也可实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- echats问题
echats 横轴显示不下datazoom配置,加入滚动条 实例博客 https://blog.csdn.net/Zheng_xiao_xin/article/details/80882113 常用 ...
- laydate日期插件弹出闪退和多次闪退问题解决
情况:点击第一个input 日期,可以正常选择日期,之后点击任何一个,都会闪一下然后消失,无法正常选择: 原因:lay-key的值的问题,需要循环重新为lay-key赋值 解决: <input ...
- EF批量添加数据之修改SQL Server执行上限
asp.net core 项目 打开Startup.cs services.AddDbContext<MyContext>( options => { options.UseSqlS ...
- class3_Entry & Text 输入和文本框
程序总体运行效果图如下; #!/usr/bin/env python # -*- coding:utf-8 -*- # -------------------------------------- ...