`
阅读更多
<!doctype html>
<title>javascript无缝滚动</title>
<meta charset="utf-8" />
<meta name="keywords" content="javascript无缝滚动" />
<meta name="description" content="javascript无缝滚动" />
<style type="text/css">
	h1 {
		font: 400 16px/1 "Microsoft YaHei", KaiTi_GB2312, SimSun
	}
	#marquee {
		position: relative;
		width: 400px;
		overflow: hidden;
		border: 10px solid #8080C0;
	}
	#marquee img {
		border: 0px;
	}
	#marquee dl,
	#marquee dt,
	#marquee dd,
	#marquee a {
		float: left;
		margin: 0;
		padding: 0;
	}
	#marquee dl {
		width: 1000%;
		height: 150px;
	}
</style>
<script type="text/javascript">
var Marquee = function(id) {
	try {
		document.execCommand("BackgroundImageCache", false, true);
	} catch(e) {};
	var container = document.getElementById(id),
		original = container.getElementsByTagName("dt")[0],
		clone = container.getElementsByTagName("dd")[0],
		speed = arguments[1] || 10;
	clone.innerHTML = original.innerHTML;
	container.scrollLeft = clone.offsetLeft
	var rolling = function() {
		if(container.scrollLeft == 0) {
			container.scrollLeft = clone.offsetLeft;
		} else {
			container.scrollLeft--;
		}
	}
	var timer = setInterval(rolling, speed) //设置定时器
	container.onmouseover = function() {
			clearInterval(timer)
	} //鼠标移到marquee上时,清除定时器,停止滚动
	container.onmouseout = function() {
			timer = setInterval(rolling, speed)
	} //鼠标移开时重设定时器
}
window.onload = function() {
	Marquee("marquee");
}
</script>
<h1>javascript无缝滚动(向右滚动)</h1>
<div id="marquee">
	<dl>
		<dt>
			<a href="###"><img src="img/o_s017.jpg" alt="javascript无缝滚动"/></a>
			<a href="###"><img src="img/o_s018.jpg" alt="javascript无缝滚动"/></a>
			<a href="###"><img src="img/o_s019.jpg" alt="javascript无缝滚动"/></a>
			<a href="###"><img src="img/o_s020.jpg" alt="javascript无缝滚动"/></a>
			<a href="###"><img src="img/o_s021.jpg" alt="javascript无缝滚动"/></a>
			<a href="###"><img src="img/o_s022.jpg" alt="javascript无缝滚动"/></a>
			<a href="###"><img src="img/o_s023.jpg" alt="javascript无缝滚动"/></a>
		</dt>
		<dd></dd>
	</dl>
</div>

效果图:

 

<!doctype html>
<title>javascript无缝滚动 </title>
<meta charset="utf-8" />
<meta name="keywords" content="javascript无缝滚动" />
<meta name="description" content="javascript无缝滚动 " />
<style type="text/css">
	h1 {
		font: 400 16px/1 "Microsoft YaHei", KaiTi_GB2312, SimSun
	}
	#marquee,
	#marquee li {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#marquee {
		position: relative;
		height: 100px;
		width: 280px;
		overflow: hidden;
		border: 10px solid #c0c0c0;
	}
	#marquee a {
		display: block;
		padding: 5px;
		text-decoration: none;
		white-space: nowrap;
		color: #000;
	}
	#marquee a:hover {
		background: #efefda;
		color: #3bcdfe
	}
</style>
<script type="text/javascript">
var Marquee = function(id) {
	try {
		document.execCommand("BackgroundImageCache", false, true);
	} catch(e) {};
	var container = document.getElementById(id),
		original = container.getElementsByTagName("li")[0],
		speed = arguments[1] || 10,
		clone = original.cloneNode(true);
	container.appendChild(clone);
	var rolling = function() {
		if(container.scrollTop == clone.offsetTop) {
			container.scrollTop = 0;
		} else {
			container.scrollTop++;
		}
	}
	var timer = setInterval(rolling, speed) //设置定时器
	container.onmouseover = function() {
			clearInterval(timer)
		} //鼠标移到marquee上时,清除定时器,停止滚动
	container.onmouseout = function() {
			timer = setInterval(rolling, speed)
		} //鼠标移开时重设定时器
}
window.onload = function() {
	Marquee("marquee");
}
</script>
<h1>javascript无缝滚动(向上滚动)</h1>
<ul id="marquee">
	<li>
		<a href="###">一一一一一一一一一一一一一一一一</a>
        <a href="###">一一一一一一一一一一一一一一一一</a>
        <a href="###">一一一一一一一一一一一一一一一一</a>
        <a href="###">一一一一一一一一一一一一一一一一</a>
        <a href="###">一一一一一一一一一一一一一一一一</a>
        <a href="###">一一一一一一一一一一一一一一一一</a>
        <a href="###">一一一一一一一一一一一一一一一一</a>
        <a href="###">一一一一一一一一一一一一一一一一</a>
        <a href="###">一一一一一一一一一一一一一一一一</a>
        <a href="###">一一一一一一一一一一一一一一一一</a>
	</li>
</ul>

效果图:

 

 

 

 

 

  • 大小: 28.4 KB
  • 大小: 25.2 KB
2
1
分享到:
评论

相关推荐

    无缝滚动制作js文字无缝滚动和js图片无缝滚动

    总结来说,JavaScript无缝滚动技术是通过数组和定时器结合DOM操作来实现的。无论是文字还是图片,都可以通过这种方法实现流畅的滚动效果。在实际开发中,可以根据项目需求进行定制,如调整滚动速度、添加不同的过渡...

    js无缝滚动代码制作js图片无缝滚动向上无缝滚动

    "无缝滚动"的实现主要依赖于JavaScript的定时器(setTimeout或setInterval)和DOM操作。下面我们将详细介绍如何用JS来制作图片的向上无缝滚动效果: 1. **HTML结构**: 首先,我们需要在HTML中设置一个包含所有图片...

    js无缝滚动demo

    本示例将探讨如何使用原生JavaScript来实现一个简单的无缝滚动效果。 首先,我们需要理解无缝滚动的基本原理。无缝滚动通常是通过在视口顶部或底部自动加载新的内容,模拟无限滚动的效果。这可以通过监听滚动事件,...

    js无缝滚动制作js文字无缝滚动和js图片无缝滚动

    2. **JS无缝滚动原理** - **定时器(setTimeout或setInterval)**:利用JS的定时器函数,周期性地改变内容的位置,模拟滚动效果。 - **CSS定位(position属性)**:通过修改元素的`top`、`left`等定位属性,实现...

    js 无缝滚动,鼠标放上去暂停代码

    ### JS 无缝滚动,鼠标放上去暂停代码 在前端开发中,实现文本或图片的无缝滚动效果是非常常见的需求之一,特别是在新闻网站、广告横幅等场景下。这种效果不仅可以提升用户体验,还能增加页面的吸引力。本文将详细...

    js无缝滚动兼容火狐

    js无缝滚动js无缝滚动js无缝滚动js无缝滚动js无缝滚动js无缝滚动js无缝滚动js无缝滚动js无缝滚动js无缝滚动js无缝滚动js无缝滚动js无缝滚动js无缝滚动js无缝滚动js无缝滚动

    javascript无缝滚动代码

    综上所述,“javascript无缝滚动代码”不仅是一项实用的网页设计技术,还涉及到了前端开发的多个核心领域,如DOM操作、事件处理、性能优化等。掌握这项技能,对于提升网页的交互性和视觉吸引力具有重要意义。

    js无缝滚动特效js无缝滚动特效

    "无缝滚动特效"是JS中常见的一个功能,它使得网页中的内容能够不间断、平滑地滚动,为用户带来流畅的浏览体验。在网页设计中,这种特效常用于新闻资讯、产品展示等区域,让信息持续滚动,增加视觉吸引力。 要实现...

    JS无缝滚动代码 - HTML

    JavaScript(简称JS)无缝滚动是一种常见的网页动态效果,它使得页面中的内容能够不间断地自动滚动,为用户带来更流畅的视觉体验。在HTML页面中,JS无缝滚动常用于新闻更新、广告轮播或者滚动菜单等场景。下面我们将...

    js无缝滚动

    JavaScript(简称JS)无缝滚动是一种常见的网页动态效果,它使得页面中的内容,通常是图片或文字,能够不间断地从右向左或从下向上平滑滚动,提升用户体验,增加视觉吸引力。这种技术在网站的新闻滚动、广告轮播、...

    JavaScript无缝滚动小例

    这个"JavaScript无缝滚动小例"提供了一个实现这一效果的实例,包括向上、向下、向左和向右四个方向的滚动。 首先,让我们了解JavaScript如何实现无缝滚动的基本原理。通常,我们利用JavaScript的定时器(如`...

    JS无缝滚动 双层图片+文字解决滚动一次问题

    JS无缝滚动的核心在于利用JavaScript来控制元素的位置,使其在视觉上形成连续滚动的效果。通常,我们会创建两个或多个相同的容器,一个显示在视口内,另一个则位于其后。当第一个容器滚动到底部时,立即切换到第二...

    JS无缝滚动效果

    综上所述,"JS无缝滚动效果"是利用jQuery插件技术,结合JavaScript和CSS,实现的一种动态、流畅的页面元素滚动展示效果。开发者可以通过理解上述关键知识点,自定义或修改现有插件,以满足特定项目的需求。在实际...

    kxbdSuperMarquee.js无缝滚动

    本文将深入探讨“kxbdSuperMarquee.js”这一JavaScript库,它提供了无缝滚动的效果,使得滚动元素在到达终点后能平滑地返回起点,形成一种循环滚动的视觉体验。 一、kxbdSuperMarquee.js简介 kxbdSuperMarquee.js...

    原生JS控制无缝滚动图片

    这就是一个简单的原生JavaScript无缝滚动图片的实现。通过这个项目,你可以学习到如何操作DOM、处理事件、应用CSS样式,以及利用requestAnimationFrame实现平滑动画。这个基础的实例可以作为起点,进一步扩展以支持...

    js无缝滚动制作js文字无缝滚动

    在本文中,我们将深入探讨如何使用JavaScript来制作无缝滚动效果,包括文字无缝滚动和图片无缝滚动,以及如何创建文字切换特效,如滤镜切换和文字闪烁与变色效果。 首先,让我们关注文字无缝滚动。这种效果通常用于...

    js表格无缝滚动效果

    为了提供更好的用户体验,可以采用JavaScript(js)来实现表格的无缝滚动效果,让表格像一个无边界的容器一样平滑滚动。这种效果在大数据量的展示或者长表格中尤其有用,它能让用户更容易地浏览和查找信息。 首先,...

    JS无缝滚动

    JS无缝滚动的核心是通过JavaScript来改变元素的位置,模拟出无限循环的效果。通常,我们会在一个容器内放置一组要滚动的元素,然后通过定时器调整这些元素的位置,使用户感觉它们在不断滚动。 ### 2. 滚动方向 ...

    原创DIV+CSS+JS无缝滚动代码(从右向左)

    原创DIV+CSS+JS无缝滚动代码(从右向左)

Global site tag (gtag.js) - Google Analytics