登录
当前位置： 首页 > 编程笔记 >

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

洪飞白
2023-03-14
本文向大家介绍JS实现文字向下滚动完整实例，包括了JS实现文字向下滚动完整实例的使用技巧和注意事项，需要的朋友参考一下

本文实例讲述了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实现的相册图片左右滚动完整实例

    本文向大家介绍JS实现的相册图片左右滚动完整实例，包括了JS实现的相册图片左右滚动完整实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现的相册图片左右滚动效果。分享给大家供大家参考，具体如下： 执行左移右移函数： 在前天html加入div容器： 下面是改变左右按钮可用状态 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、

  • JS实现排行榜文字向上滚动轮播效果

    本文向大家介绍JS实现排行榜文字向上滚动轮播效果，包括了JS实现排行榜文字向上滚动轮播效果的使用技巧和注意事项，需要的朋友参考一下 最近在一个抽奖活动中需要在页面上对中奖名单做排行榜的轮播，故根据下面的简单列子修改实现了滚动效果。 效果图(文字向上轮播)： demo如下： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

  • Js实现滚动变色的文字效果

    本文向大家介绍Js实现滚动变色的文字效果，包括了Js实现滚动变色的文字效果的使用技巧和注意事项，需要的朋友参考一下 Js实现滚动变色的文字效果，在效果展示页面，可看到文字在交替变色显示，以吸引人的注意，效果真心不错哦，把代码拷贝到你的网站后，修改成想要的文字就OK了。 以下是源代码：

  • JS实现倒计时和文字滚动的效果实例

    本文向大家介绍JS实现倒计时和文字滚动的效果实例，包括了JS实现倒计时和文字滚动的效果实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现倒计时和文字滚动效果的方法。分享给大家供大家参考。具体实现方法如下： 说明：一般我们在一些淘宝类店铺中会看到一些像搞竞拍之类的活动，从中我们时而会发现一些倒计时的效果，在一些年会等场合我们也会发现一些抽奖活动，从中我们也可以看到一些随即滚动的效果

  • js实现列表向上无限滚动

    本文向大家介绍js实现列表向上无限滚动，包括了js实现列表向上无限滚动的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现列表向上无限滚动的具体代码，供大家参考，具体内容如下 先来一张效果图 html js css(样式自己调) 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

  • JS实现单行文字不间断向上滚动的方法

    本文向大家介绍JS实现单行文字不间断向上滚动的方法，包括了JS实现单行文字不间断向上滚动的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现单行文字不间断向上滚动的方法。分享给大家供大家参考。具体分析如下： 前几天帮一个朋友写了一个单行文字不间断向上滚动的JS效果，现在分享给需要的weber。先看HTML和CSS代码： CSS： HTML： 该动画效果的原理是 先将ul向上滚动一

相关阅读

js实现列表向上无限滚动JS实现单行文字不间断向上滚动的方法js实现会跳动的日历效果(完整实例)Delphi实现图片滚动切换的完整实例代码js实现简单实用的AJAX完整实例

相关文章

回文树/回文自动机 (PAM) 实现及模板实战-Swing实现文件夹浏览SpringBoot整合Prometheus实现应用监控用Python完成一个查票系统实现123006自动抢票Dubbo 整合Spring 容器实现服务优雅启动和停止

相关问答

Android滚动视图不会一直向下滚动解析向下滚动的整个网页的html代码如何实现recyclerview的水平自动滚动向下滚动方法选择Appium中的文本回收商视图：向下滚动

相关工具

双向滚动scrollview滚动数字Label滚动菜单《Redis 设计与实现》循环滚动视图

相关文档

Effective Modern C++ 中文版（不完整）Redis 设计与实现Android Gradle 用户指南（不完整）Gradle 实战中文版如何实现自己的 jQuery
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.