<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. KMP算法实现

    链接:http://blog.csdn.net/joylnwang/article/details/6778316 KMP算法是一种很经典的字符串匹配算法,链接中的讲解已经是很明确得了,自己按照其讲解 ...

  2. vue-validator（vue验证器）

    官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-v ...

  3. 利用django创建一个投票网站（二）

    创建你的第一个 Django 项目, 第二部分 这一篇从第一部分(zh)结尾的地方继续讲起.本节我们将继续写 Web 投票应用,并主要关注 Django 提供的自动生成的管理页面(admin site ...

  4. iOS代码规范

    一.文档结构管理 1.建立Libraries文件夹,所有第三方库放入其中. 2.建立Utilities文件夹,自已封装的类放入其中. 3.建立Constants.h头文件,所有的常量定义于其中.Con ...

  5. DOM解析XML报错：Content is not allowed in prolog

    报错内容为: Content is not allowed in prolog. Nested exception: Content is not allowed in prolog. 网上所述总结来 ...

  6. Theano printing

    Theano printing To visualize the internal relation graph of theano variables. Installing conda insta ...

  7. DateUtils 学习记录1

    开发过程中很多时候都需要处理各种各样的日期..有些项目可能还会有自己的DateUtil.... 其实apache commons lang3有一个很好用的日期处理工具类,叫DateUtils... 基 ...

  8. window 使用vagrant搭建开发开发环境

    # -*- mode: ruby -*-# vi: set ft=ruby : # All Vagrant configuration is done below. The "2" ...

  9. Spring标签<mvc:annotation-driven/>解读

    一.AnnotationDrivenBeanDefinitionParser 通常如果我们希望通过注解的方式来进行Spring MVC开发,我们都会在***-servlet.xml中加入<mvc ...

  10. iOS－Block总结 && 全面解析逆向传值

    1.block的特点:      block是C语言:      block是一种数据类型.可以当做参数,也可以用做返回值:--总之,对比int的用法用即可(当然,定义的时候,最好跟函数对比):   ...