<html>

<head>

<style>

.scroll{

	overflow:hidden;

	width:100%;

}

.scrollout{

  height:250px;

  width:100%;

  overflow:hidden;

  cursor:pointer;

  }

</style>

<script type="text/javascript" src="jquery.js"></script>

<script>

 //无缝滚动

	var rclone=$("#rscroll").html();//这里要用html而不能用clone,html()方法是获取html代码，你是要加长html代码，clone方法是要复制节点信息

	$("#rscrollout").append(rclone);//其次，你滚动的内容长度要大于200+scrollTop的高度才能进行滚动

	var lclone=$("#lscroll").html();

	$("#lscrollout").append(lclone);

	var speed=1;

	var NY=window.setInterval(scroll2,100);

	function scroll2(){

		var scrollTop=$(".scrollout").scrollTop()+speed;

		if(scrollTop==400){

			scrollTop=0;

 		}

		$(".scrollout").scrollTop(scrollTop);

	}

	$(".scrollout").hover(function(){clearInterval(NY)},function(){NY=setInterval(scroll2,100);});

</script>

</head>

<body>

<div class="scrollout" id="rscrollout">

				<div id="rscroll" class="scroll" style="height:400px;">

					<ul>

						<li>1</li>

						<li>11</li>

						<li>111</li>

						<li>1111</li>

						<li>11111</li>

						<li>111111</li>

						<li>1111111</li>

						<li>11111111</li>

						<li>111111111</li>

						<li>1111111111</li>

						<li>11111111111</li>

						<li>111111111111</li>

						<li>1111111111111</li>

						<li>11111111111111</li>

						<li>111111111111111</li>

					</ul>

				</div>

</div>

</body>

</html>

　　

css 上下滚动效果的更多相关文章

  1. HTML+CSS页面滚动效果处理

    HTML+CSS代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...

  2. css实现视差滚动效果

    今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使 ...

  3. CSS 实现滚动进度条效果

    参考:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 前言:细化总结.参考的文章作者已经写的很详细了.这里在从初学者 ...

  4. 纯css解决div隐藏浏览器原生滚动条，但保留鼠标滚动效果的问题

    当我们的内容超出了我们的div,往往会出现滚动条,影响美观.尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果.  我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效 ...

  5. 使用css实现炫酷的横屏滚动效果

    炫酷的横屏滚动效果css实现 DEMO: https://codepen.io/kobako/pen/BxVLLm 我们对滚动条都不陌生.平时浏览的网页,进度条通常是垂直方向的,内容从上往下排列.但是 ...

  6. css设置背景固定不滚动效果的示例

    css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...

  7. 纯css，div隐藏滚动条，保留鼠标滚动效果。

    示例1: html,body { height: 100%; } body { overflow: hidden; } .full-screen { position: relative; width ...

  8. CSS完成视差滚动效果

    一.是什么 视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验 我们可以把网页解刨成:背景层.内容层.悬浮层 当滚动鼠标滑轮的时候 ...

  9. CSS隐藏overflow默认滚动条同时保留滚动效果

    主要应用于移动端场景,仿移动端滚动效果.对于隐藏滚动条,众所周知overflow:hidden,但是想要的滚动效果也没了. 所以对于移动端webkit内核提供一个伪类选择器: .element::-w ...

随机推荐

  1. 小公司0成本基于Pythony的单元\GUI\Web自动化\性能的几个开源软件测试工具

    以下是当前流行的几款适合小公司0成本的几个开源软件测试解决方案: 1.单元测试 a.unittest :Python自带的单元测试框架 b.pyunit:Junit的Python版本 2.使用Pyho ...

  2. 为什么不用rxjava?

    rxjava等系列产品.思想是很好的,但是被大多数人用成了一坨屎! 就拿rx最经典的那个例子来说: 假设有这样一个需求:界面上有一个自定义的视图 imageCollectorView ,它的作用是显示 ...

  3. 在Main方法中设置异常的最后一次捕捉

    在做Winfrom程序时,有时会遇到一个异常,可是这个异常不知道在什么地方发生的,程序会自动关闭,然后什么也没有了,在网上找到了一种方法,用来捕捉这种异常. 出现这种情况的原因是在程序中某些地方考虑不 ...

  4. SVN 图标消失

    问题描述:第一次安装完好,电脑重启后,svn小图标消失不见.查看注册表,发现属于svn小图标的注册表都消失不见. 问题分析:删除杀毒软件(360),因为电脑安装了360,ShellIconOverla ...

  5. Web API系列(二)接口安全和参数校验

    以前简单介绍过web api 的设计,但是还是有很多朋友问我,如何合理的设计和实现web api.比如,接口安全,异常处理,统一数据返回等问题.所以有必要系统的总结总结 web api 的设计和实现. ...

  6. [Java] Spring MVC 知识点

    云图: @Service 用于标注业务层组件. 在 Spring-servlet 配置xml中,component-scan 标签默认情况下自动扫描指定路径下的包(含所有子包),将带有@Compone ...

  7. C# Async, Await and using statements

    Async, Await 是基于 .NEt 4.5架构的, 用于处理异步,防止死锁的方法的开始和结束, 提高程序的响应能力.比如: Application area           Support ...

  8. 关于 FPGA 内部信号扇入扇出

    扇入.扇出系数 扇入系数是指门电路允许的输入端数目.一般门电路的扇入系数为1—5,最多不超过8.扇出系数是指一个门的输出端所驱动同类型门的个数,或称负载能力.一般门电路的扇出系数为8,驱动器的扇出系数 ...

  9. c语言经典算法——查找一个整数数组中第二大数

    题目: 实现一个函数,查找一个整数数组中第二大数. 算法思想: 设置两个变量max1和max2,用来保存最大数和第二大数,然后将数组剩余的数依次与这两个数比较,如果这个数a比max1大,则先将max1 ...

  10. 安装Axure7.0,完整教程,有验证码和汉化包

    以下内容由Axure中文网 » Axure7.0中文汉化语言包下载 axure汉化包 改编,特此声明 1.下载安装包 官方下载页面: http://www.axure.com/download 官网直 ...