首页
所有分类
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 相关文章推荐
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
锋利的jQuery 要点归纳（三） jQuery中的事件和动画（下：动画篇）
Mar 24 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
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
数据加密(1) 连接器(1) key(1) 曝光融合(1) 公共键(1) pycryto(1) kafka(2) HDR(1) 高动态范围(1) shell脚本(1)
You might like
PHP的中问验证码
2006/11/25 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
详解axios 全攻略之基本介绍与使用（GET 与 POST）
2017/09/15 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
理解Python中的绝对路径和相对路径
2017/08/30 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
Python爬虫包BeautifulSoup实例（三）
2018/06/17 Python
解决python "No module named pip" 的问题
2018/10/13 Python
Python元组常见操作示例
2019/02/19 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
沃尔玛加拿大：Walmart.ca
2020/03/02 全球购物
彪马香港官方网上商店：PUMA香港
2020/12/06 全球购物
广州御银科技股份有限公司试卷（C++）
2016/11/04 面试题
mysql有关权限的表都有哪几个
2015/04/22 面试题
本科毕业生自我鉴定
2013/11/02 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
质量负责人岗位职责
2015/02/15 职场文书
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python