<!DOCTYPE HTML>

<html>

<head>

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

<title>滚动新闻</title>

</head>

<style type="text/css">

	#div1{

		width:200px;

		height:80px;

		background-color:#CCC;

		position:absolute;

		left:0px;

		top:0px;

		z-index:1;

		overflow:hidden;

	}

	#imgs{

		width:100px;

		height:400px;

		background-color:#9C9;

		position:absolute;

		left:200px;

		top:0px;

		z-index:1;			//垂直方向置于最顶层

		overflow:hidden;	//超出部分隐藏

	}

</style>

<body>

	<!--div 的高度设置比实际须要的高度小-->

	<div id="div1">

    	<ul id="news">

    		<li><a href="#">aaaaaaaaaaaaaaa</a></li>

        	<li><a href="#">bbbbbbbbbbbbbbb</a></li>

        	<li><a href="#">ccccccccccccccc</a></li>

        	<li><a href="#">ddddddddddddddd</a></li>

        	<li><a href="#">eeeeeeeeeeeeeee</a></li>

        	<li><a href="#">fffffffffffffff</a></li>

        	<li><a href="#">ggggggggggggggg</a></li>

        </ul>

    </div>

    <div id="imgs">

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

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

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

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

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

    </div>

</body>

</html>

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

		//注意须要让当前的dom载入全然之后，再运行js代码

		//文字滚动

		news = document.getElementById('news');

		function newScroll(node){

			var t = node.firstChild;

			node.removeChild(t);

			node.appendChild(t);

		}

		id = setInterval('newScroll(news)',400);

		news.onmouseover = function(){

			clearTimeout(id);

		}

		news.onmouseout = function(){

			id = window.setInterval('newScroll(news)',400);

		}

		//图片滚动

		imgs = document.getElementById('imgs');

		id1 = setInterval('newScroll(imgs)',400);

		imgs.onmouseover = function(){

			clearTimeout(id1);

		}

		imgs.onmouseout = function(){

			id1 = window.setInterval('newScroll(imgs)',400);

		}

</script>

javaScript滚动新闻的更多相关文章

  1. javaScript滚动新闻之上下左右平滑滚动

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

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

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

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

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

  4. 基于jQuery实现滚动新闻代码下载

    分享一款基于jQuery实现滚动新闻代码下载.这是一款基于bootstrup 3实现的响应式jQuery滚动新闻插件.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  5. 滚动新闻插件vticker

    vTicker 是一款非常小巧的 jQuery 垂直滚动插件,压缩后只有 2KB.vTicker 支持自定义滚动时间.间隔时间.显示个数.滚动方向(向上/向下).容器高度等等,但它对 HTML 结构有 ...

  6. javascript滚动栏响应鼠标滑轮的实现上下滚动事件

    实现鼠标滚动滚轮事件: <script type="text/javascript"><pre name="code" class=" ...

  7. 【js与jquery】jquery循环滚动新闻

    2.html代码: <h3>最新动态</h3> <div class="scrollNews" > <ul> <li>& ...

  8. 利用JQuery一步步打造无缝滚动新闻

    首先,我们这里有这么一段html代码,很简洁,如下所示: 1 <div id="tag">2 <ul>3 <li>你说我是好人吗,我是好人啊&l ...

  9. 基于JQuery打造无缝滚动新闻

    JQuery实现 新闻无缝滚动 一.使用"首尾追加"实现无缝滚动 <head lang="en"> <meta charset="U ...

随机推荐

  1. winform基础——实现简易赈灾物资发放登记系统

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  2. 中间件(Middleware)

    中间件(Middleware) ASP.NET Core开发,开发并使用中间件(Middleware). 中间件是被组装成一个应用程序管道来处理请求和响应的软件组件. 每个组件选择是否传递给管道中的下 ...

  3. ASIO攻破！！！----转

    from:http://www.cppblog.com/shanoa/archive/2009/06/26/88606.aspx 花了足足3天时间,外加1天心情休整,终于在第5天编写出了一个能运行的基 ...

  4. CImageList类Create函数参数解析

    前面提到了CImageList类的Create(...)函数,虽然MSDN上已经有所解释,但仍有网友问到参数的具体含义,下面就我的理解,对参数进行一次轻量级的剖析 函数原型(其他重载函数请参看msdn ...

  5. 5款帮助简化的HTML5 Audio开发的Javascript类库

    HTML5的audio标签提供了我们方便控制声音的功能,可是使用原生的HTML5来开发声音或者音乐相关的项目仍旧很的麻烦.在今天这篇文章中,我们将介绍5款帮助你简化开发的javascript audi ...

  6. Hadoop--序列化

    序列化: 对象的序列化用于将一个对象编码成字节流,以及从字节流中重新构建对象. 将一个对象编码成一个字节流称为序列化该对象. 序列化三种主要的用途: 1.作为一种持久化格式. 2.作为一种通信的数据格 ...

  7. Cookie不能保存中文解决方式

     在用cookie保存username的时候,发现cookie值不能存中文,报例如以下错: Control character in cookie value, consider BASE64 e ...

  8. PAI里field module的on input和on request区别

    在编辑屏幕的PAI的时候,对字段的检查一般用field xxx module xxx或者用chain.有两种操作可供选择,一种是on input,另一种是on request. 区别是: on inp ...

  9. 【Demo 0002】Java基础-语句

    本章学习要点:        1.  掌握Java关健语句使用方法;          2.  理解与语句相关的关键字用法; 一.Java 关键语句        Java语句以及关联关键字与C完全相 ...

  10. [More Effective C++]条款22有关返回值优化的验证结果

    (这里的验证结果是针对返回值优化的,其实和条款22本身所说的,考虑以操作符复合形式(op=)取代其独身形式(op),关系不大.书生注) 在[More Effective C++]条款22的最后,在返回 ...