<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>平滑滚动</title>

</head>

	<style>

    	<!--

		#picture_div1{

			width:300px;

			height:100px;

			float:left;

			overflow:hidden;

			position:relative;

			left:0px;

			top:0px;

		}

		#picture_div4{

			width:300px;

			height:100px;

			float:left;

			overflow:hidden;

			position:relative;

			left:50%;

			top:0px;

		}

		#picture_in1,#picture_in2{

			float:left;

			width:800%;

		}

		#picture_div2,#picture_div3,#picture_div5,#picture_div6,img{

			float:left;

		}

		#wenzi_div1{

			position:relative;

			left:0px;

			top:20%;

			width:170px;

			height:105px;

			overflow:hidden;

		}

		#wenzi_div2{

			position:relative;

			left:50%;

			top:20%;

			width:170px;

			height:105px;

			overflow:hidden;

		}

		#wenzi_in1,#wenzi_in2{

			float:left;

			height:800%;

		}

		-->

    </style>

<body>

	<br /><h1 style="text-align:center">图片</h1><hr />

	<div id="picture_div1">

    <div id="picture_in1">

		<div id="picture_div2">

        	<img src="imgs/11.png"/>

			<img src="imgs/22.png"/>

			<img src="imgs/33.png"/>

        </div>

        <div id="picture_div3"></div>

    </div>

	</div>

    <div id="picture_div4" style="position:relative; left:400px; top:0px;">

    <div id="picture_in2">

    	<div id="picture_div5"></div>

		<div id="picture_div6">

        	<img src="imgs/11.png"/>

			<img src="imgs/22.png"/>

			<img src="imgs/33.png"/>

        </div>

    </div>

	</div>

    <br /><br /><br /><br /><br /><br /><br /><h1 style="text-align:center">文字</h1><hr />

    <div id="wenzi_div1">

    		<div id="wenzi_in1">

    			<ul id="wenzi_ul1">

        			<li>这里是第1条新闻</li>

           	 		<li>这里是第2条新闻</li>

            		<li>这里是第3条新闻</li>

            		<li>这里是第4条新闻</li>

            		<li>这里是第5条新闻</li>

            		<li>这里是第6条新闻</li>

            		<li>这里是第7条新闻</li>

            		<li>这里是第8条新闻</li>

            		<li>这里是第9条新闻</li>

            		<li>这里是第10条新闻</li>

        		</ul>

        		<ul id="wenzi_ul2"></ul>

    		</div>

   	</div>

    <div id="wenzi_div2">

    		<div id="wenzi_in2">

    			<ul id="wenzi_ul3"></ul>

        		<ul id="wenzi_ul4">

                	<li>这里是第1条新闻</li>

           	 		<li>这里是第2条新闻</li>

            		<li>这里是第3条新闻</li>

            		<li>这里是第4条新闻</li>

            		<li>这里是第5条新闻</li>

            		<li>这里是第6条新闻</li>

            		<li>这里是第7条新闻</li>

            		<li>这里是第8条新闻</li>

            		<li>这里是第9条新闻</li>

            		<li>这里是第10条新闻</li>

                </ul>

    		</div>

   	</div>

</body>

<script language="javascript" type="text/javascript">

	//图片控制

	//向左側

	var picture_div1 =  document.getElementById('picture_div1');

	var picture_div2 =  document.getElementById('picture_div2');

	var picture_div3 =  document.getElementById('picture_div3');

	picture_div3.innerHTML = picture_div2.innerHTML;

	var speed = 10;

	function pictureMarquee1(){

		if(picture_div3.offsetWidth - picture_div1.scrollLeft <= 0){

			picture_div1.scrollLeft -= picture_div2.offsetWidth;

		}else{

			picture_div1.scrollLeft++;

		}

	}

	var picture_id1 = setInterval(pictureMarquee1,speed);

	picture_div1.onmouseover = function(){

		clearTimeout(picture_id1);

	}

	picture_div1.onmouseout = function(){

		picture_id1 = setInterval(pictureMarquee1,speed);

	}

	//向右側

	var picture_div4 =  document.getElementById('picture_div4');

	var picture_div5 =  document.getElementById('picture_div5');

	var picture_div6 =  document.getElementById('picture_div6');

	picture_div5.innerHTML = picture_div6.innerHTML;

	function pictureMarquee2(){

		if(picture_div4.scrollLeft <= 0){

			picture_div4.scrollLeft += picture_div5.offsetWidth;

		}else{

			picture_div4.scrollLeft--;

		}

	}

	var picture_id2 = setInterval(pictureMarquee2,speed);

	picture_div4.onmouseover = function(){

		clearTimeout(picture_id2);

	}

	picture_div4.onmouseout = function(){

		picture_id2 = setInterval(pictureMarquee2,speed);

	}

	//文字控制

	//向左側

	var wenzi_div1 = document.getElementById('wenzi_div1');

	var wenzi_ul1 = document.getElementById('wenzi_ul1');

	var wenzi_ul2 = document.getElementById('wenzi_ul2');

	var speed1 = 100;

	wenzi_ul2.innerHTML = wenzi_ul1.innerHTML;

	function wenziMarquee1(){

		if(wenzi_ul2.offsetHeight - wenzi_div1.scrollTop <= 0){

			wenzi_div1.scrollTop -= wenzi_ul1.offsetHeight;

		}else{

			wenzi_div1.scrollTop++;

		}

	}

	var wenzi_id1 = setInterval(wenziMarquee1,speed1);

	wenzi_div1.onmouseover = function(){

		clearTimeout(wenzi_id1);

	}

	wenzi_div1.onmouseout = function(){

		wenzi_id1 = setInterval(wenziMarquee1,speed1);

	}

	//向右側

	var wenzi_div2 = document.getElementById('wenzi_div2');

	var wenzi_ul3 = document.getElementById('wenzi_ul3');

	var wenzi_ul4 = document.getElementById('wenzi_ul4');

	wenzi_ul3.innerHTML = wenzi_ul4.innerHTML;

	function wenziMarquee2(){

		if(wenzi_div2.scrollTop <= 0){

			wenzi_div2.scrollTop += wenzi_ul3.offsetHeight;

		}else{

			wenzi_div2.scrollTop--;

		}

	}

	var wenzi_id2 = setInterval(wenziMarquee2,speed1);

	wenzi_div2.onmouseover = function(){

		clearTimeout(wenzi_id2);

	}

	wenzi_div1.onmouseout = function(){

		wenzi_id2 = setInterval(wenziMarquee2,speed1);

	}

</script>

</html>

javaScript滚动新闻之上下左右平滑滚动的更多相关文章

  1. 使用JavaScript实现新闻滚动效果

    最近要实现一个滚动新闻效果,在网上查了一些资料,发现基本的实现方法有两种: 使用Marquee标签.这个标签的使用我已经转载了一篇比较详细的文章,这个标签的优点是便于使用,缺点是人们已经逐渐不适用它了 ...

  2. javaScript滚动新闻

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 常用JS图片滚动（无缝、平滑、上下左右滚动）

    常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 <head><-----></head><body> <!--向下滚动代码开始-->& ...

  4. 纯javaScript实现元素平滑滚动，改进前两个版本，支持鼠标滚轮滚动和点击元素滚动，滚动更顺畅

    windowScroll(id, number, distance, direction, obj) 参数介绍: 1.id:所要滚动的元素id; 2.number:滚动次数; 3.distance:每 ...

  5. ScrollTo：实现平滑滚动到页面指定位置

    ScrollTo:实现平滑滚动到页面指定位置 ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置.适用在一些页面内容比较多,页面长度有好几屏的场合,本 ...

  6. js平滑滚动到顶部,底部,指定地方

    [原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...

  7. 【转】使用jquery animate创建平滑滚动效果

    这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...

  8. AJAX技术之网易滚动新闻的简单实现(附源码)--AJAX

    1.AJAX简介: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法 ...

  9. [js常用]页面滚动的顶部,指定位置或底部,平滑滚动

    js平滑滚动到顶部.底部.指定地方 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

随机推荐

  1. 2.x ESL第二章习题2.5

    题目 描述 $y_i=x_i^T\beta+\epsilon_i$$\epsilon_i\sim N(0,\sigma^2)$ 已有训练集$\tau$,其中$X:n\times p,y:n\times ...

  2. javascript第十八课：windowd对象的方法

    window.confirm('确定删除吗?'); //当用户点击一个按钮出发一个事件的时候,弹出一个提示框让网友确认,返回一个bool值,点确定的话,返回true,点取消,返回flase windo ...

  3. SVN连接不上

    某次我们部门换了场地.SVNserver就连接不上了,后来公司数据中心处理好后,还是连接不上,原来还需刷新自己电脑的DNS. 如需转载,请注明出处http://blog.csdn.net/combat ...

  4. AS3: Socket 数据包 收 发

    AS3.0中使用Socket使用tcp服务器协议,它是一种流协议,不停的将分片传输给客户端,P作为流,发包是不会整包到达的,而是源源不断的. 它不同于UDP服务器协议,UDP作为数据包协议,整包到达. ...

  5. barManager.Menu(barSubItem)

    DevExpress 的帮助文档是在太缺乏了,他自己的帮助只有简单描述,没有样例,而它的网站上的在线帮助只有利用它的设计器设计的ToolBar.PopupMenu ,没有利用代码开发的.虽然要利用代码 ...

  6. uploadify控件使用在.net

    第一次是博客,还有丢丢小兴奋呢.作为一个资深菜鸟,为了给自己留下点什么,开始记录一些技术问题.当然也是学习过程.    下面是成品的在.net web下的应用,还有很多不足的地方,期待大家的点评. $ ...

  7. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  8. 转载 hashmap java8前的原理实现

    http://zhangshixi.iteye.com/blog/672697 1.    HashMap概述: HashMap是基于哈希表的Map接口的非同步实现.此实现提供所有可选的映射操作,并允 ...

  9. C语言常用的库文件（头文件、函数库）

    C语言常用的库文件(头文件.函数库) C系统提供了丰富的系统文件,称为库文件.C的库文件分为两类,一类是扩展名为".h"的文件,称为头文件,在前面的包含命令中我们已多次使用过.在& ...

  10. Qt5 文本编辑

    [应用场景]:在编辑框中输入一段文字,用鼠标选取文字,修改工具栏上的字体.字号大小.加粗.斜体等属性,选取的文字即发生相应的变化.       一. 任何一个文本编辑器的程序都要用到QTextEdit ...