<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. 在mysql 查询语句中将时间戳格式转化为年月日格式

    SELECT  FROM_UNIXTIME('时间戳的字段名称', '%Y-%m-%d %H:%i:%s')   FROM `表名` http://www.cnblogs.com/tdalcn/arc ...

  2. JavaScript系列文章：自动类型转换

    我们都知道,JavaScript是类型松散型语言,在声明一个变量时,我们是无法明确声明其类型的,变量的类型是根据其实际值来决定的,而且在运行期间,我们可以随时改变这个变量的值和类型,另外,变量在运行期 ...

  3. 他（he）（钟神）

    他[问题描述]一张长度为N的纸带,我们可以从左至右编号为0 −N(纸带最左端标号为0) .现在有M次操作,每次将纸带沿着某个位置进行折叠,问所有操作之后纸带的长度是多少.[输入格式]第一行两个数字N, ...

  4. CSS-垂直|水平居中问题的解决方法总结

    题外话:前两天和专业老师探讨最近的一个项目,涉及到对一个浮动的盒子局中的问题,老师的解决方法打开了我的新思路.让我有了总结一下平时的居中问题的想法.不然可能忘掉了以后又要到处寻找解决办法了.另外也给我 ...

  5. Java中如何把一下字符串转换成map

    首先,你先确认你的字符串是否是json格式的,如果是json格式,那你可以使用Gson.jar或json-lib-xx-jdk.jar两个包来自动解析解析. 使用Gson更简单些,只需要导入一个包就可 ...

  6. web api9

  7. Quartz 学习记录1

    原因 公司有一些批量定时任务可能需要在夜间执行,用的是quartz和spring batch两个框架.quartz是个定时任务框架,spring batch是个批处理框架. 虽然我自己的小玩意儿平时不 ...

  8. Android之ListView性能优化——一行代码绑定数据——万能适配器

    如下图,加入现在有一个这样的需求图,你会怎么做?作为一个初学者,之前我都是直接用SimpleAdapter结合一个Item的布局来实现的,感觉这样实现起来很方便(基本上一行代码就可以实现),而且也没有 ...

  9. ELK 集中日志分析 windows部署实战

    一步步来 1.下载软件 Elasticsearch: https://download.elasticsearch.org/...p/elasticsearch/2.0.0/elasticsearch ...

  10. 10、代码块、构造代码块、静态代码块及main方法之间的关系

    1.普通代码块: 在方法或语句中出现在{}之间的类容就称为普通代码块,简称代码块.普通代码块和一般的语句执行顺序由他们在代码中出现的次序决定--“先出现先执行”,即顺序执行. /*下面第一个类时合法的 ...