JavaScript实现走马灯效果[无缝连接、循环滚动] 向右

最新推荐文章于 2024-08-03 17:05:14 发布
最新推荐文章于 2024-08-03 17:05:14 发布
阅读量486 收藏
点赞数
文章标签： javascript xhtml c# ViewUI
原文链接：http://www.cnblogs.com/zxl/archive/2009/08/25/1553789.html
版权

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="you.aspx.cs" Inherits="you" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
<div align="center" id="demo" style="overflow:hidden;height:33px;width:500px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">
  <table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td id="demo1"><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif" border="0"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif" border="0"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif" border="0"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif" border="0"></td>
      <td id="demo2"> </td>
    </tr>
  </table>
</div>

<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=10;    //数值越大滚动速度越慢
demo2.innerHTML = demo1.innerHTML;
demo.scrollLeft = demo.scrollWidth;
function Marquee(){
    if(demo.scrollLeft<=0)
        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>

转载于:https://www.cnblogs.com/zxl/archive/2009/08/25/1553789.html

weixin_30484247
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript实现多张图片左右无缝滚动效果
10-20
本文主要介绍了javascript实现多张图片左右无缝滚动效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧
javascript实现的左右无缝滚动效果
10-21
主要介绍了javascript实现的左右无缝滚动效果,可实现左右平滑无缝滚动的效果,并且可响应鼠标滑过而停止滚动,非常简便实用,需要的朋友可以参考下
JavaScript实现走马灯效果[无缝连接、循环滚动]
anmi5580的博客
09-18 1594
JavaScript实现走马灯效果[无缝连接、循环滚动] 无缝跑马灯效果以下代码在IE6、Firefox+Win2k环境下测试通过网页走马灯连续循环滚动一、向上的无缝循环滚动 HTML代码 <!-- 指向链接图片的URL --> <base href="<a href="http://blog.netfetch.cn" target="_blank"&...
JavaScript实现走马灯效果,上 下 左 右无缝连接、循环滚动
leiyonglin的博客
08-19 1万+
1 一 2 二 3 三 5 四 6 五 4 六 <!-- var demo = document.getElementById("demo"); var demo1 = document.getElementById
javascript实现走马灯效果[无缝连接、循环滚动、无空白maquee]
iteye_16634的博客
05-22 795
以下代码在IE6、Firefox+Win2k环境下测试通过 一、向上的无缝循环滚动 程序代码： [ 复制代码到剪贴板 ] ...
js实现走马灯效果（无缝衔接）
热门推荐
normol的博客
09-04 3万+
需要注意的是，scrollLeft属性只有当他内部元素超出父级元素时才有效，否则将一直为0， 可以将scrollLeft想象成有横向的滚动条， 而scrollLeft++则相当于将滚动条向右拖动，当拖动到展示内容实际宽度后（需要另一个与展示内容相同的区域，否则一轮左移完成后会出现留白），需要恢复为0<!DOCTYPE html> <html lang="en"> <head> <meta
利用Scrip实现走马灯效果[无缝连接、循环滚动]
龙的天空
06-11 1426
下面说一下这个相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。 先了
zt 利用Scrip实现走马灯效果[无缝连接、循环滚动]
爪蛙 Today is well worth effort
06-17 162
以下代码在IE6、Firefox+Win2k环境下测试通过 一、向上的无缝循环滚动 程序代码： [ 复制代码到剪贴板 ]  &lt;!-- 指向链接图片的URL --&gt;&lt;base href="http://www.it365cn.com"&gt;&lt;div align="center" id="demo" style="overflow:hidden;height:200px;w.
(转)无缝连接、循环滚动的走马灯效果
jcyka的专栏
02-09 1056
JavaScript实现走马灯效果[无缝连接、循环滚动] 无缝跑马灯效果 以下代码在IE6、Firefox+Win2k环境下测试通过 一、向上的无缝循环滚动 HTML代码 &lt;!-- 指向链接图片的URL --&gt;&lt;base href="&lt;a href="http://blog.ad0.cn" target="_blank"&gt;http://blog.ad0.cn&lt...
用div实现向左右无缝滚动图片效果
IT专业技术博客
12-02 9061
用div实现向左右无缝滚动图片效果2008年07月05日 星期六 上午 11:01div+css学习笔记22（用div实现向左无缝滚动图片效果）JavaScript实现走马灯效果[无缝连接、循环滚动] 无缝跑马灯效果以下代码在IE6、Firefox+Win2k环境下测试通过网页走马灯连续循环滚动废话少说，代码贴出来：WIDTH: 580px;大的div宽度要为s
JavaScript实现简单精致的图片左右无缝滚动效果
10-20
主要介绍了JavaScript实现简单精致的图片左右无缝滚动效果,涉及javascript结合时间函数动态操作页面元素属性的相关技巧,需要的朋友可以参考下
vue实现图片滚动的示例代码(类似走马灯效果)
08-27
Vue 实现图片滚动的示例代码（类似走马灯效果） 在本示例代码中，我们将学习如何使用 Vue 实现图片滚动的效果，类似于走马灯的效果。该示例代码具有很好的参考价值，对大家有所帮助。 知识点 1: Vue 组件的使用 ...
基于javascript实现文字无缝滚动效果
10-22
在本示例中，我们将深入探讨如何使用JavaScript实现文字无缝滚动效果，这是一种常见的网页动态效果，常用于新闻滚动、公告显示等场景。 首先，我们需要理解基本的HTML和CSS结构。在提供的代码中，我们看到一个`...
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
最新发布
m0_74283290的博客
08-03 668
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 308
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 246
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 919
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
javascript实现图片循环滚动效果
05-27
可以使用以下代码实现图片循环滚动效果： HTML代码： ```html <div class="slider"> <div class="slider-container"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> <img src="img4.jpg"> </div> </div> ``` CSS代码： ```css .slider { overflow: hidden; } .slider-container { display: flex; width: 400%; animation: slide 10s infinite linear; } @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .slider-container img { width: 25%; } ``` JavaScript代码： ```javascript var slider = document.querySelector('.slider'); var container = document.querySelector('.slider-container'); var imgs = container.querySelectorAll('img'); var imgWidth = imgs[0].width; var containerWidth = imgWidth * imgs.length; container.style.width = containerWidth + 'px'; slider.addEventListener('mouseenter', function() { container.style.animationPlayState = 'paused'; }); slider.addEventListener('mouseleave', function() { container.style.animationPlayState = 'running'; }); ``` 这段代码使用了flex布局和CSS动画来实现图片循环滚动效果。JavaScript代码用来处理图片容器的宽度和鼠标悬停事件。当鼠标悬停在图片上时，动画会暂停，当鼠标移开时，动画会继续播放。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值