首页
所有分类
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 相关文章推荐
jQuery中文入门指南，翻译加实例，jQuery的起点教程
Jan 13 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
JavaScript高级程序设计（第3版）学习笔记4 js运算符和操作符
Oct 11 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
js 自定义个性下拉选择框示例
Aug 20 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 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
PL660(1) YB235(1) 直流胆(1) MX500(1) 台湾(1) YB400(2) YB217(1) S2000(3) 南麂列岛(1) 森海(1)
You might like
php获取mysql版本的几种方法小结
2008/03/25 PHP
php getsiteurl()函数
2009/09/05 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
JS分页效果示例
2013/10/11 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python实现的Excel文件读写类
2015/07/30 Python
python模拟Django框架实例
2016/05/17 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
Django框架安装方法图文详解
2019/11/04 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
整个世界的设计师家具在哈恩：Designathome
2019/03/25 全球购物
Groupon荷兰官方网站：高达70％的折扣
2019/11/01 全球购物
就业推荐表自我鉴定
2013/10/29 职场文书
实习生的自我评价
2014/01/08 职场文书
户外活动总结
2015/02/04 职场文书