首页
所有分类
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实现键盘Enter键提交表单的方法
May 27 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
Bootstrap每天必学之工具提示（Tooltip）插件
Apr 26 Javascript
node.js请求HTTPS报错：UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 Javascript
微信小程序实现可长按移动控件
Nov 01 Javascript
vue递归实现树形组件
Jul 15 Vue.js
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) LOGO(1) most_common(1) 爬虫(2) 抖音(1) pip(1) MIME(1) Xpath(1) Counter(1) binlog(2)
You might like
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
PHP技术开发技巧分享
2010/03/23 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
详解Vue 项目中的几个实用组件（ts）
2019/10/29 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
python实现用户登录系统
2016/05/21 Python
Python代码实现KNN算法
2017/12/20 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
python读取xlsx的方法
2018/12/25 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
python从Oracle读取数据生成图表
2020/10/14 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
欧洲最大的滑雪假期供应商之一：Sunweb Holidays
2018/01/06 全球购物
七年级地理教学反思
2014/01/26 职场文书
爱祖国演讲稿
2014/05/04 职场文书
品德评语大全
2014/05/05 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python