首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现文字向下滚动完整实例

Posted in Javascript onFebruary 06, 2015

本文实例讲述了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>

希望本文所述对大家的javascript程序设计有所帮助。

JS实现文字向下滚动完整实例

- Author -

whazhl

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
node中koa中间件机制详解
Aug 22 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
jquery中filter方法用法实例分析
Feb 06 #Javascript
Jquery对select的增、删、改、查操作
Feb 06 #Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 #Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 #Javascript
js实现多选项切换导航菜单的方法
Feb 06 #Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 #Javascript
javascript强制点击广告的方法
Feb 06 #Javascript
Grundig(1) 飞利浦(2) S400(1) SANGEAN(1) D1835(1) PHILIPS(3) ATS-909X(1) 山进(2) L4X25T(1) D1875(1)
You might like
PHP 超链接 抓取实现代码
2009/06/29 PHP
PHP读取PDF内容配合Xpdf的使用
2012/11/24 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
jquery选择器排除某个DOM元素的方法（实例演示）
2014/04/25 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
python删除文件示例分享
2014/01/28 Python
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
Python基类函数的重载与调用实例分析
2015/01/12 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
python解决字符串倒序输出的问题
2018/06/25 Python
Python socket聊天脚本代码实例
2020/01/02 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
联想澳大利亚官网：Lenovo Australia
2018/01/18 全球购物
全球高级音频和视频专家：HiDef Lifestyle
2019/08/02 全球购物
大学生职业生涯规划范文
2013/12/31 职场文书
地道战观后感
2015/06/04 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript