足球游戏_中国足彩网￥体育资讯$

简要咨询 咨询QQ 网站导航 网站搜索 手机站点 联系我们
搜公告
  • 搜公告
  • 搜职位
公众号
事业单位
首 页
足球游戏
事业单位
特岗教师
三支一扶
银行招聘
中国足彩网
选调遴选
学历升学
公 众 号
全站导航
当前位置：首页 > 范文|应用文 > IT技术专栏 > 脚本栏目
JS实现文字向下滚动完整实例
来源：易贤网 阅读：900 次 日期：2015-02-10 14:19:31
温馨提示：易贤网小编为您整理了“JS实现文字向下滚动完整实例”,方便广大网友查阅！

这篇文章主要介绍了JS实现文字向下滚动的方法,以一个完整实例形式详细分析了html页面布局、css样式及对应的js滚动功能实现技巧,需要的朋友可以参考下

本文实例讲述了JS实现文字向下滚动的方法。分享给大家供大家参考。具体实现方法如下：

代码如下:

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<title>京东、淘宝晒单</title>

<style>

@charset "utf-8";

/*

@名称: base

@功能: 重设浏览器默认样式

*/

/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */

html{

color:#000;background:#fff;

-webkit-text-size-adjust: 100%;

-ms-text-size-adjust: 100%;

}

/* 内外边距通常让各个浏览器样式的表现位置不同 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,arti

cle,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {

margin:0;padding:0;

color:#333;

}

/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {

display:block;

}

/* HTML5 媒体文件跟 img 保持一致 */

audio,canvas,video {

display: inline-block;*display: inline;*zoom: 1;

}

/* 要注意表单元素并不继承父级 font 的问题 */

body,button,input,select,textarea{

font:12px/1.5 tahoma,arial,\\5b8b\\4f53;

}

input,select,textarea{

font-size:100%;

}

/* 去掉各Table cell 的边距并让其边重合 */

table{

border-collapse:collapse;border-spacing:0;

}

/* IE bug fixed: th 不继承 text-align*/

th{

text-align:inherit;

}

/* 去除默认边框 */

fieldset,img{

border:0;

}

/* ie6 7 8(q) bug 显示为行内表现 */

iframe{

display:block;

}

/* 去掉 firefox 下此元素的边框 */

abbr,acronym{

border:0;font-variant:normal;

}

/* 一致的 del 样式 */

del {

text-decoration:line-through;

}

address,caption,cite,code,dfn,em,th,var {

font-style:normal;

font-weight:500;

}

/* 去掉列表前的标识, li 会继承 */

ol,ul {

list-style:none;

}

/* 对齐是排版最重要的因素, 别让什么都居中 */

caption,th {

text-align:left;

}

/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */

h1,h2,h3,h4,h5,h6 {

font-size:100%;

font-weight:500;

}

q:before,q:after {

content:'';

}

/* 统一上标和下标 */

sub, sup {

font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;

}

sup {top: -0.5em;}

sub {bottom: -0.25em;}

a{

color: #333;

}

/* 让链接在 hover 状态下显示下划线 */

a:hover {

text-decoration:underline;

color: #c00;

}

/* 默认不显示下划线，保持页面简洁 */

ins,a {

text-decoration:none;

}

/* 清理浮动 */

.fn-clear:after {

visibility:hidden;

display:block;

font-size:0;

content:" ";

clear:both;

height:0;

}

.fn-clear {

zoom:1; /* for IE6 IE7 */

}

/* 隐藏, 通常用来与 JS 配合 */

body .fn-hide {

display:none;

}

/* 设置内联, 减少浮动带来的bug */

.fn-left,.fn-right {

display:inline;

}

.fn-left {

float:left;

}

.fn-right {

float:right;

}

#club{width:888px;height:190px;margin:40px auto;border:1px solid #dddddd;border-radius:5px 5px 0px 0px;}

#club .modle{width:443px;height:190px;border-right:1px solid #dddddd;float:left;}

#club .modle_right{border-right:none;float:right;}

#club .modle .modle_title{width:443px;height:29px;line-height:29px;font-size:12px;font-weight:bold;background:#f3f3f3;}

#club .modle .modle_title span{padding-left:7px;}

#club .modle .modle_con{width:423px;margin:0 auto;height:160px;overflow:hidden;}

#club .modle .modle_con ul li{border-bottom:1px #DDD dotted;position:relative;}

#club .modle .modle_con .modle_img{width:50px;height:79px;text-align:center;}

#club .modle .modle_con .modle_img img{margin-top:14px;}

#club .modle .modle_con .modle_img i{display:block;width:15px;height:17px;background:url(/image/buy.png)no-repeat;position:absolute;top:10px;left:60px;}

#club .modle .modle_con .modle_text{width:337px;height:60px;overflow:hidden;margin-top:15px;padding-left:8px;}

#club .modle .modle_con .modle_text p a{color:#005ea7;}

#club .modle .modle_con .modle_text div a{color:#999999;}

</style>

</head>

<body>

<div id="club">

<div class="modle" id="modle_left">

<h2 class="modle_title"><span>热门晒单</span></h2>

<div class="modle_con">

<ul>

<li class="fn-clear">

<div class="modle_img fn-left"><a href="###"><img src="image/ho1。jpg"></a><i></i></div>

<div class="modle_text fn-right">

<p><a href="###">很不错的一款电热壶哟</a></p>

<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>

</div>

</li>

<li class="fn-clear">

<div class="modle_img fn-left"><a href="###"><img src="image/ho2。jpg"></a><i></i></div>

<div class="modle_text fn-right">

<p><a href="###">很不错的一款电热壶哟</a></p>

<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>

</div>

</li>

<li class="fn-clear">

<div class="modle_img fn-left"><a href="###"><img src="image/ho1。jpg"></a><i></i></div>

<div class="modle_text fn-right">

<p><a href="###">很不错的一款电热壶哟</a></p>

<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>

</div>

</li>

<li class="fn-clear">

<div class="modle_img fn-left"><a href="###"><img src="image/ho2。jpg"></a><i></i></div>

<div class="modle_text fn-right">

<p><a href="###">很不错的一款电热壶哟</a></p>

<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>

</div>

</li>

<li class="fn-clear">

<div class="modle_img fn-left"><a href="###"><img src="image/ho3。jpg"></a><i></i></div>

<div class="modle_text fn-right">

<p><a href="###">很不错的一款电热壶哟</a></p>

<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>

</div>

</li>

</ul>

</div>

</div>

<div class="modle modle_right" id="modle_right">

<h2 class="modle_title"><span>热门晒单</span></h2>

<div class="modle_con">

<ul>

<li class="fn-clear">

<div class="modle_img fn-left"><a href="###"><img src="image/ho1。jpg"></a><i></i></div>

<div class="modle_text fn-right">

<p><a href="###">很不错的一款电热壶哟</a></p>

<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>

</div>

</li>

<li class="fn-clear">

<div class="modle_img fn-left"><a href="###"><img src="image/ho2。jpg"></a><i></i></div>

<div class="modle_text fn-right">

<p><a href="###">很不错的一款电热壶哟</a></p>

<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>

</div>

</li>

<li class="fn-clear">

<div class="modle_img fn-left"><a href="###"><img src="image/ho3。jpg"></a><i></i></div>

<div class="modle_text fn-right">

<p><a href="###">很不错的一款电热壶哟</a></p>

<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>

</div>

</li>

<li class="fn-clear">

<div class="modle_img fn-left"><a href="###"><img src="image/ho1。jpg"></a><i></i></div>

<div class="modle_text fn-right">

<p><a href="###">很不错的一款电热壶哟</a></p>

<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>

</div>

</li>

<li class="fn-clear">

<div class="modle_img fn-left"><a href="###"><img src="image/ho2。jpg"></a><i></i></div>

<div class="modle_text fn-right">

<p><a href="###">很不错的一款电热壶哟</a></p>

<div><a href="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div>

</div>

</li>

</ul>

</div>

</div>

</div><!--club end-->

<script type="text/javascript" src="jquery-1.4.js"></script>

<script>

$(function(){

function scollDown(id,time){

var liHeight=$("#"+id+" ul li").height();

var time=time||2500;

setInterval(function(){

$("#"+id+" ul").prepend($("#"+id+" ul li:last").css("height","0px").animate({

height:liHeight+"px"

},"slow"));

},time);

}

scollDown("modle_left");

scollDown("modle_right",3000);

});

</script>

</body>

</html>

中国足彩网信息请查看IT技术专栏

中国足彩网信息请查看脚本栏目
【点此处就本文及相关问题在本站进行非正式的简要咨询（便捷快速）】 【点此处查询各地各类考试咨询QQ号码及交流群】
上一篇：js实现Select下拉框具有输入功能的方法
下一篇：jquery实现聚光灯效果的方法
易贤网手机网站地址：JS实现文字向下滚动完整实例
由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！
相关阅读脚本栏目
Bottle框架中的装饰器类和描述符应用详解10月30日
Python探索之SocketServer详解10月30日
Python探索之实现一个简单的HTTP服务器10月30日
python探索之BaseHTTPServer-实现Web服务器介绍10月30日
13个最常用的Python深度学习库介绍10月30日
深入理解Python中的*重复运算符10月30日
python logging日志模块详解10月30日
System表空间不足的报警问题浅析10月22日
Android开发自定义TextView省略号样式的方法10月22日
MySQL 清除表空间碎片的实例详解10月22日
Ubuntu下MySQL安装及配置远程登录教程10月22日
Python 2.x如何设置命令执行的超时时间实例10月22日
windows 64位下redis安装教程10月22日
Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果10月22日
浅谈Node Inspector 代理实现10月22日
java web开发之购物车功能实现示例代码10月22日
Android开发中GridView用法示例10月22日
Django ORM框架的定时任务如何使用详解10月22日
SpringMail使用过程中的报错解决办法10月22日
Android 使用自定义RecyclerView控件实现Gallery效果10月22日
易贤网移动网站
最新信息
2024年临沧市沧源县文化旅游产业开发投资有限公司招聘综合成绩公示
2024年临沧市沧源县文化旅游产业开发投资有限公司招聘面试成绩公示
2024年楚雄州发展和改革委员会所属事业单位选调笔试成绩查询查疑公告
2024年云南省审计厅遴选公务员综合成绩公示
2024年大理州人民政府办公室选调事业单位专业技术人员笔试成绩及面试公示
2024年下半年云南文化和旅游厅直属事业单位报名数据（截至9月21日10:30）
2025年国家某部委及其直属机构公务员招录报名温馨提示
2024年云南省能源局遴选公务员面试成绩和综合成绩公告
2024年9月文山州广南县启星劳务派遣有限公司招聘公告
2024年?昭通市下半年事业单位招聘报名数据（截至9月21日11时）
公考类
云南公务员 贵州公务员 四川公务员 广西公务员 各省公务员 国家公务员 选调遴选
招聘类
事业单位 中国足彩网 特岗教师 三支一扶 志 愿 者 银行招聘 国企招聘
各类考试
学历升学 会计考试 职业资格 外语考试 医学考试 工程考试 教师资格
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号：滇ICP备2023014141号-1 足球游戏_中国足彩网￥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证：（云）人服证字（2023）第0102001523号
云南网警备案专用图标
联系电话：0871-65317125（9:00—18:00） 获取招聘考试信息及咨询关注公众号：hfpxwx
咨询QQ：526150442（9:00—18:00）版权所有:易贤网
云南网警报警专用图标