首页
所有分类
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 浮动导航栏实现代码
Aug 27 Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
微信小程序 两种滑动方式（横向滑动，竖向滑动）详细及实例代码
Jan 13 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 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
城市猎人(1) 文书(291) AngularJS(2) 波段(1) explain(2) 西索(1) 申请书(21) Docker(14) 观后感(479) HAM-2000(1)
You might like
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
Vue 过渡（动画）transition组件案例详解
2017/01/22 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
[01:00]DOTA2 store： Collection of Artisan's Wonders
2015/08/12 DOTA
跟老齐学Python之再深点，更懂list
2014/09/20 Python
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
python入门教程之识别验证码
2017/03/04 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
试用期转正员工自我评价
2014/09/18 职场文书
anaconda python3.8安装后降级
2021/06/11 Python