<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. 【转】OpenGL超级宝典笔记——纹理映射Mipmap

    原文地址 http://my.oschina.net/sweetdark/blog/177812 , 感谢作者,若非法转载请联系本人. 目录[-] Mipmapping Mipmap过滤 构建Mip层 ...

  2. Beta阶段第十次Scrum Meeting

    情况简述 BETA阶段第十次Scrum Meeting 敏捷开发起始时间 2017/1/4 00:00 敏捷开发终止时间 2017/1/5 00:00 会议基本内容摘要 deadline到来 参与讨论 ...

  3. json基础

    1 xml缺点 用xml表示一个对象,数据存储效率低 <person> <firstName>Morra<firstName> <lastName>Do ...

  4. 【JavaWeb】Spring+SpringMVC+MyBatis+SpringSecurity+EhCache+JCaptcha 完整Web基础框架（五）

    SpringSecurity(2) 好久没有写了,之前只写了一半,我是一边开发一边写Blog一边上班,所以真心没有那么多时间来维护Blog,项目已经开发到编写逻辑及页面部分了,框架基本上已经搭建好不会 ...

  5. window.onload 和 DOMContentLoaded区别及如何判断dom是否加载完毕

    http://blog.allenm.me/2010/02/window-onload-和-domcontentloaded/ 其中使用IE不支持DOMContentLoaded,那么判断IE是否加载 ...

  6. maven log4g 用法

    <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> & ...

  7. redis 操作 hash 的测试

    1>hset setname field value hset stuSet name zhangsan:1        2>hget setname field hget stuset ...

  8. 搭建NFS服务器

    1:yum install -y nfs-utils-* portmap-* 2:NFS安装完毕,需要创建共享目录,共享目录在vi /etc/exports文件里面配置,可配置参数如下: /data/ ...

  9. 深夜用git真是醉了

    t吐槽一下那些 感觉命令行高效的傻逼们 我只想吃个牛肉串  你让我先学会宰牛? 命令不是对底层代码的封装? 程序的终极奥义就是把很多复杂的东西,封装到一个按钮就能完成 .叫做简为美. 浪费别人的时间等 ...

  10. SVN 图标消失

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