这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 简单实现无缝滚动效果, 结合完整实例形式分析了 javascript 实现图片无缝滚动效果的实现技巧, 涉及 javascript 结合时间函数定时触发动态修改页面元素属性的相关操作方法, 需要的朋友可以参考下
本文实例讲述了 JS 简单实现无缝滚动效果。分享给大家供大家参考,具体如下:
- <!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>
效果图如下:
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0708/332374.html