`
DBear
  • 浏览: 231124 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类

图片跑马灯

阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
img{width:755px;height:388px;margin:0px;}
</style>
</HEAD>

<BODY>
<div id="demo" style="float:left;overflow:hidden;height:388px;line-height:22px;width:755px;color:black">
     <div style="width:4610px;height:388px;" >
	   <div id="demo1" style="float:left;">
	      <img alt="" src="http://img03.taobaocdn.com/tps/i3/T1SV0SXilCXXXXXXXX-770-300.jpg">
	      <img alt="" src="http://img.alimama.cn/bcrm/adboard/picture/2010-11-22/101122110857581.jpg">
	      <img alt="" src="http://img03.taobaocdn.com/tps/i3/T1EHNSXfxXXXXXXXXX-770-300.jpg">
	   </div>
	   <div id="demo2" style="float:left;"></div>
	 </div>
</div>
<div class="clear"></div>
<script type="text/javascript">

var demo2 = document.getElementById("demo2");
var demo1 = document.getElementById("demo1");
var demo = document.getElementById("demo");

demo2.innerHTML=demo1.innerHTML;
var speed=8;
function Marquee(){

  
  //当显示到demo2的最后一张图片时,就将画面移回demo1的最后一张图片
  if(demo.scrollLeft>=(demo.scrollWidth-755)){
	var offsetWidth = demo2.offsetWidth;
	var scrollLeft = demo.scrollLeft;
	demo.scrollLeft-=demo2.offsetWidth;
  } else {
	demo.scrollLeft++;
  }
}

var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

  
  
</script>
</BODY>
</HTML>
 
分享到:
评论

相关推荐

    android完美图片跑马灯

    在Android开发中,"android完美图片跑马灯"是一个常见的组件,主要用于展示一系列图片或文字,以滚动的方式形成一种动态视觉效果,类似于我们常见的广告轮播或者新闻滚动条。这种跑马灯通常需要实现头尾无缝衔接,以...

    强大的jQuery文字和图片跑马灯特效.zip

    《jQuery文字和图片跑马灯特效详解》 在网页设计中,动态效果是提升用户体验的重要手段,其中,jQuery的文字和图片跑马灯特效尤为常见,它能够为网站增添活力,吸引用户注意力。本文将深入探讨这个强大的jQuery特效...

    很炫的图片跑马灯功能

    这个“很炫的图片跑马灯功能”是一个包含代码和样式的解决方案,它能让你的图片以循环滚动的方式呈现,营造出一种动态流动的效果。 在实现图片跑马灯功能时,通常会涉及到以下几个关键知识点: 1. **HTML 结构**:...

    ImageView 图片跑马灯效果源码

    在标题为“ImageView 图片跑马灯效果源码”的项目中,我们关注的是如何利用ImageView来实现一个动态的“跑马灯”效果,即图像像马灯一样不断滚动或循环展示。这种效果常用于新闻标题展示或者广告轮播等场景,增加了...

    图片跑马灯(用户控件)

    标题中的“图片跑马灯(用户控件)”是指一种在网页或应用程序中实现的动态效果,它将一组图片连续滚动展示,就像传统的跑马灯广告一样,为用户提供了一种吸引注意力并展示多张图片的方式。用户控件是.NET Framework...

    简单图片跑马灯效果

    本教程将深入讲解如何使用jQuery库来实现一个简单的图片跑马灯效果。 一、jQuery简介 jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。通过jQuery,开发者可以更加便捷地...

    flash+xml文字+图片跑马灯滚动字母

    标题中的“flash+xml文字+图片跑马灯滚动字母”指的是使用Adobe Flash技术,结合XML数据格式和图片元素,实现一种动态展示文字和图片效果的滚动显示功能。这种跑马灯效果常见于早期网页设计中,用于吸引用户注意力,...

    用javascript实现的跑马灯控件,文字跑马灯或图片跑马灯皆可噢!

    支持的参数有 div对象(id名称或dom对象都可以,已经在内部作了处理) 宽度(可选) 高度(可选) 内容(由数组实现,数组里存放任何html内容都可以,示例里存放的是img标签,也就是说,实现了几张图片的跑马灯效果...

    C#动态加载图片跑马灯滑动jquery滑动

    总的来说,"C#动态加载图片跑马灯滑动jquery滑动"这一技术组合,结合了后端数据处理与前端交互设计,为Web应用提供了丰富且动态的用户体验。开发者需要掌握C#的数据库操作和JSON序列化,以及jQuery的DOM操作和动画...

    android跑马灯图片展示加10种特效

    对于图片跑马灯,我们可以使用`HorizontalScrollView`或者自定义View来实现类似的效果。 接着,我们来看如何添加图片切换特效。在Android中,我们可以利用`Animation`类或者`Animator`类来实现各种动画效果。以下是...

    android 跑马灯图片展示+10种切换特效

    在Android应用开发中,"跑马灯图片展示"是一种常见的动态效果,通常用于广告轮播、通知滚动等场景。跑马灯效果通过不断移动图片或文字来实现视觉上的连续滚动,给用户带来新颖的交互体验。本文将详细介绍如何利用`...

    JavaScript动态网页跑马灯图片

    在压缩包中的"动态取得图片跑马灯"文件中,可能包含了实现上述功能的JavaScript源代码、HTML结构以及可能的CSS样式。通过阅读和理解这些代码,你可以深入学习如何构建一个完整的JavaScript动态跑马灯图片效果。同时...

    图片跑马灯+一个自定义imageview,可以圆角和椭圆

    在Android开发中,"图片跑马灯+一个自定义imageview,可以圆角和椭圆"是一个常见的需求,尤其在创建动态展示或者广告轮播组件时。跑马灯效果通常是通过ViewPager实现,它可以循环滚动展示多张图片或内容。自定义...

    Android ImageView图片循环跑马灯效果源码-IT计算机-毕业设计.zip

    然而,有时候开发者需要实现更复杂的视觉效果,比如图片循环跑马灯效果。这个"Android ImageView图片循环跑马灯效果源码"就是一个典型的示例,适用于学生进行毕业设计学习,以提升其在Android应用开发中的实践能力。...

    Delphi实现透明跑马灯效果

    在Delphi中实现透明跑马灯效果涉及到图形用户界面(GUI)编程,特别是与控件、事件处理和自定义绘图相关的技术。跑马灯效果通常是指文本或图像在界面上按照某种方式循环滚动,而透明则涉及到控件的背景处理和颜色...

    Android应用源码之ImageView 图片循环跑马灯的效果_跑马灯.zip

    在Android开发中,实现ImageView图片循环跑马灯效果是一个常见的需求,这通常涉及到视图滚动、动画以及线程控制等技术。在这个项目中,我们将会深入解析如何利用Android的ImageView和相关API来创建一个类似跑马灯的...

    android多种方式实现垂直滚动和水平滚动跑马灯效果

    在Android开发中,跑马灯效果是一种常见的动态展示文本的方式,它可以吸引用户的注意力并增加界面的活力。本项目提供了一种灵活的方法来实现垂直滚动和水平滚动的跑马灯效果,适用于各种应用场景,如通知、广告展示...

Global site tag (gtag.js) - Google Analytics