<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. 网页中如何启用QQ交谈

    很多网友都会发现好多的网页中会有诸如,网页中如何启用QQ交谈? 1. 登录QQ, 打开网址:http://shang.qq.com/v3/widget.html 启用QQ通讯组件. 2. 选择组件样式 ...

  2. OS命令注入中的空格

    1.bash 空格可以替换为%20.%09(tab).%2b(+) in url.{IFS} 2.Win shell 空格可以替换为%20.%09(tab).%0b.%0c.%2b(+) in url

  3. SpringCloud: 服务发现

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #e4af0a } sp ...

  4. linux安装Jenkins

    一.下载jenkins 最新地址在:https://jenkins.io 我下载的是:Jenkins 2.35.war,下载好直接放到tomcat的webapp目录里,启动tomcat就可以运行了 二 ...

  5. DUT Star Weekly Contest #3 Problem F Solution

    题目链接 问题转化 \[a_i+a_j+(i-j)^2=a_i+i^2+a_j+j^2-2ij\] 令 \(b_i=a_i+i^2\) , 问题化为: 求 \[\max \{b_i+b_j-2ij\} ...

  6. JavaScript If...Else 语句

    JavaScript If...Else 语句 JavaScript的开头和结束标签: <script type="text/javascript"></scri ...

  7. 推荐一篇关于java 学习的文章，感觉写的很不错

    ---恢复内容开始---    很多网友问我学习Java有没有什么捷径,我说"无他,唯手熟尔".但是我却很愿意将自己学习的一些经验写出来,以便后来者少走弯路,帮助别人是最大的快乐嘛 ...

  8. php实现返回上一页的功能

    php实现返回上一页的功能的3种有效方法 header(location:你的上一页的路径);   //   注意这个函数前不能有输出      header(location:.getenv(&qu ...

  9. C# 反射研究

    概念 反射这东西,对于我这种小白,听起来总是觉得好大上的. 当初理解它费了一点时间,后来看了一句话,突然恍然大悟,“反射就跟B超一样,我们在不剖开人体的情况下想看清楚内部情况, 我们就通过发射超声波, ...

  10. phpcms 添加memcache支持

    1,修改caches/configs/cache.php <?php return array ( 'file1' => array ( 'type' => 'file', 'deb ...