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

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

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

代码如下:

<!DOCTYPE>

<html>

<head>

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

<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日
移动网站

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
最新信息
2024年澜湄国际电力业程建设(云南)有限责任公司招聘公告
2024年红河州个旧市金湖街道办事处社区治理服务中心招聘简章
2025年中央民族大学附属中学红河州实验学校事业单位校园招聘公告
2024年楚雄师范学院招聘第三十五批博士拟聘用人员公示
2024年文山学院公开招聘急需紧缺人才第一批拟聘用人员公示
2024年文山学院公开招聘高层次人才第四批拟聘用人员公示
2025年国考笔试昭通考区温馨提示
2025年国考（保山考区）笔试考生温馨提示
中国一汽进出口公司2025校园招聘公告
2024年一汽丰田汽车销售有限公司招聘公告
公考类
云南公务员 贵州公务员 四川公务员 广西公务员 各省公务员 国家公务员 选调遴选
招聘类
188app金宝搏 特岗教师 三支一扶 志 愿 者 银行招聘 国企招聘
各类考试
学历升学 职业资格 外语考试 医学考试 工程考试 教师资格
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号：滇ICP备2023014141号-1 云南省教育厅备案号：云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证：（云）人服证字（2023）第0102001523号
云南网警备案专用图标
联系电话：0871-65317125（9:00—18:00） 获取招聘考试信息及咨询关注公众号：
咨询QQ：526150442（9:00—18:00）版权所有:
云南网警报警专用图标
Baidu
map