Jquery 文字上下滚动效果示例代码
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>jQuery文字逐行向上滚动代码 - 站长素材</title> | |
<link href="css/index.css" rel="stylesheet" type="text/css"> | |
<script src="js/jquery.min.js"></script> | |
</head> | |
<body> | |
<!-- -------------摇奖排行榜--------------- --> | |
<div class="Top_Record"> | |
<div class="record_Top"><p>摇奖排行榜</p></div> | |
<div class="topRec_List"> | |
<dl> | |
<dd>编号</dd> | |
<dd>姓名</dd> | |
<dd>奖项</dd> | |
<dd>时间</dd> | |
</dl> | |
<div class="maquee"> | |
<ul> | |
<li> | |
<div>1</div> | |
<div>王**</div> | |
<div>中了30元</div> | |
<div>2014/12/30 14:20</div> | |
</li> | |
<li> | |
<div>2</div> | |
<div>王**</div> | |
<div>中了30元</div> | |
<div>2014/12/30 14:20</div> | |
</li> | |
<li> | |
<div>3</div> | |
<div>王**</div> | |
<div>中了30元</div> | |
<div>2014/12/30 14:20</div> | |
</li> | |
<li> | |
<div>4</div> | |
<div>王**</div> | |
<div>中了30元</div> | |
<div>2014/12/30 14:20</div> | |
</li> | |
<li> | |
<div>5</div> | |
<div>王**</div> | |
<div>中了30元</div> | |
<div>2014/12/30 14:20</div> | |
</li> | |
<li> | |
<div>6</div> | |
<div>王**</div> | |
<div>中了30元</div> | |
<div>2014/12/30 14:20</div> | |
</li> | |
<li> | |
<div>7</div> | |
<div>王**</div> | |
<div>中了30元</div> | |
<div>2014/12/30 14:20</div> | |
</li> | |
<li> | |
<div>8</div> | |
<div>王**</div> | |
<div>中了30元</div> | |
<div>2014/12/30 14:20</div> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<div class="apple"> | |
<ul> | |
<li><a href="#" target="_blank">你是我的小丫小苹果 </a></li> | |
<li><a href="#" target="_blank">怎么爱你都不嫌多</a></li> | |
<li><a href="#" target="_blank">红红的小脸儿温暖我的心窝 </a></li> | |
<li><a href="#" target="_blank">点亮我生命的火 火火火火</a></li> | |
<li><a href="#" target="_blank">你是我的小丫小苹果 </a></li> | |
<li><a href="#" target="_blank">就像天边最美的云朵</a></li> | |
<li><a href="#" target="_blank">春天又来到了花开满山坡 </a></li> | |
<li><a href="#" target="_blank">种下希望就会收获</a></li> | |
</ul> | |
</div> | |
<script type="text/javascript"> | |
function autoScroll(obj){ | |
$(obj).find("ul").animate({ | |
marginTop : "-39px" | |
},500,function(){ | |
$(this).css({marginTop : "0px"}).find("li:first").appendTo(this); | |
}) | |
} | |
$(function(){ | |
setInterval('autoScroll(".maquee")',3000); | |
setInterval('autoScroll(".apple")',2000); | |
}) | |
</script> | |
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> | |
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p> | |
<p>来源:<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p> | |
</div> | |
</body> | |
</html> | |
Jquery 文字上下滚动效果示例代码的更多相关文章
- jquery文字纵向滚动效果(带间隔停留)
<script type="text/javascript"> //文字纵向滚动 $(function() { var $this = $("#quotati ...
- jQuery实现文字横向滚动效果
HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...
- js实现文字上下滚动效果
大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...
- jquery文字上下滚动--单行 批量多行 文字图片上下翻滚 | 多行滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery文字左右滚动
实现jquery文字左右滚动 <div class="fl">中奖名单:</div> <div class="scrollText" ...
- javascript跟随滚动效果插件代码(javascript Follow Plugin)
这篇文章介绍了javascript跟随滚动效果插件代码(javascript Follow Plugin),有需要的朋友可以参考一下Js 跟随滚动效果插件支持定义多个跟随ID,采用css fixed属 ...
- jQuery实现的文字逐行向上间歇滚动效果示例
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery实现文字上下滚动效果
文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> &l ...
- jquery实现多行文字图片滚动效果
今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function ...
随机推荐
- FZU 1058 粗心的物理学家
这题有毒.要用long double定义,以及cout控制格式输出. #include<cstdio> #include<cstring> #include<cmath& ...
- virtio-win 驱动
Direct downloads are available for the .iso, .vfd, and qemu-ga installers. Stable virtio-win iso: ht ...
- JAVA判断32位还是64位,调用不同的DLL(转)
源:JAVA判断32位还是64位,调用不同的DLL 通过获取sun.arch.data.model可判断是32还是64的JAVA 将32或者64位的DLL放不同的目录,实现自适应调用DLL Prope ...
- UVa 10945 - Mother bear
题目大意:给一个字符串,判断是否回文(忽略大小写,忽略非字母字符). #include <cstdio> #include <cctype> #include <cstr ...
- 怎样编制excel序列目录
怎样编制序列目录 原帖内容:http://www.excelpx.com/forum.php?mod=viewthread&tid=164190&extra=%26page%3D1&a ...
- Zookeeper的基本概念
Reference: http://mp.weixin.qq.com/s?src=3×tamp=1477979201&ver=1&signature=bBZqNrN ...
- ASCII 码对应表
Macron symbol ASCII CODE 238 : HTML entity : [ Home ][ español ] What is my IP address ? your public ...
- 黄聪:VPS用轻松备份工具备份Wordpress,文件夹通配符
db;log;wp-admin;wp-includes;temp;upgrade;twentyfourteen;twentyfifteen;twentysixteen;twentythirteen;t ...
- JavaScript定时机制、以及浏览器渲染机制 浅谈
昨晚,朋友拿了一道题问我: a.onclick = function(){ setTimeout(function() { //do something ... },0); }; JavaScript ...
- Mysql中如何创建、删除授权用户
在mysql数据库下使用create user创建新用户,例如: 新创建后的用户没有任何授权.使用grant命令授权xushouwei访问数据库databaseweb下的所有表,密码为xsw12345 ...