<!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. 如果一个Object对象可能是集合或者数组那么如何对其进行迭代

    需求:一个方法传入的参数是Object类型(假设对象为“items”,使用Object类型也是为了使用多态而增加方法复用性),但已知这个Object对象可能是集合,包括Collection和Map,也 ...

  2. Servlet的学习之Session（4）

    在本篇中,我们来使用Session完成一个用户登录的案例,前提声明:这个案例主要用于学习Session技术,是属于比较简单的类型,以后会采用MVC模式来开发登录,那就会比较复杂. 现在大多数网站都提供 ...

  3. iphone缩小uIImage图片

    UIImage的缩小 有时候,项目中,要用到上传图片,从图片库里取出的图片有的太大了,而要上传的时候,会很费时间,而且也没必要太大,所以就把图片综缩小一下,再传! #pragma UIImagePic ...

  4. 【SSH进阶之路】Hibernate映射——多对一单向关联映射（四）

    [SSH进阶之路]Hibernate基本原理(一) ,小编介绍了Hibernate的基本原理以及它的核心,採用对象化的思维操作关系型数据库. [SSH进阶之路]Hibernate搭建开发环境+简单实例 ...

  5. Codeforces Round #256 (Div. 2) 题解

    Problem A: A. Rewards time limit per test 1 second memory limit per test 256 megabytes input standar ...

  6. Linux 高性能server编程——高级I/O函数

    重定向dup和dup2函数 #include <unistd.h> int dup(int file_descriptor); int dup2(int file_descriptor_o ...

  7. TPL异步并行编程之取消任务

    TPL异步并行编程之简单使用 在上篇随笔里面说明了Task的使用,仅仅是简单使用,有时候把一个任务交给Task去执行,但是呢还是要管理下,比如说:我要叫这个任务停止了,不做了,任务取消了,或者超时了 ...

  8. Lucene.Net 2.3.1开发介绍 —— 三、索引（五）

    原文:Lucene.Net 2.3.1开发介绍 -- 三.索引(五) 话接上篇,继续来说权重对排序的影响.从上面的4个测试,只能说是有个直观的理解了.“哦,是!调整权重是能影响排序了,但是好像没办法来 ...

  9. Hibernate获取Connection

    package com.trendcom.base.util; import java.sql.Connection; import java.sql.SQLException; import jav ...

  10. android之LruCache源代码解析

    移动设备开发中,因为移动设备(手机等)的内存有限,所以使用有效的缓存技术是必要的.android提供来一个缓存工具类LruCache,开发中我们会经经常使用到,以下来他是怎样实现的. 在package ...