滚动图片

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量259 收藏
点赞数
分类专栏： IT 文章标签： function border table xhtml html ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bin6120/article/details/6567289
版权

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>向上下左右不间断无缝滚动图片的效果（兼容火狐和IE）-JS特效学院|JsWeb8.Cn</title>
</head>
<body><!--下面是向上滚动代码-->
<div id=jsweb8_cn_top style=overflow:hidden;height:100px;width:90px;>
<div id=jsweb8_cn_top1>
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
</div>
<div id=jsweb8_cn_top2></div>
</div>
<script>
var speed=30
jsweb8_cn_top2.innerHTML=jsweb8_cn_top1.innerHTML //克隆jsweb8_cn_top1为jsweb8_cn_top2
function Marquee1(){
//当滚动至jsweb8_cn_top1与jsweb8_cn_top2交界时
if(jsweb8_cn_top2.offsetTop-jsweb8_cn_top.scrollTop<=0)  
jsweb8_cn_top.scrollTop-=jsweb8_cn_top1.offsetHeight //jsweb8_cn_top跳到最顶端
else{
jsweb8_cn_top.scrollTop++;
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
jsweb8_cn_top.οnmοuseοver=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
jsweb8_cn_top.οnmοuseοut=function(){MyMar1=setInterval(Marquee1,speed)}
</script>

<!--向上滚动代码结束-->

<br>

<!--下面是向下滚动代码-->

<div id=jsweb8_cn_bottom style=overflow:hidden;height:100px;width:90px;>
<div id=jsweb8_cn_bottom1>
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
</div>
<div id=jsweb8_cn_bottom2></div>
</div>
<script>
var speed=30
jsweb8_cn_bottom2.innerHTML=jsweb8_cn_bottom1.innerHTML
jsweb8_cn_bottom.scrollTop=jsweb8_cn_bottom.scrollHeight
function Marquee2(){
if(jsweb8_cn_bottom1.offsetTop-jsweb8_cn_bottom.scrollTop>=0)
jsweb8_cn_bottom.scrollTop+=jsweb8_cn_bottom2.offsetHeight
else{
jsweb8_cn_bottom.scrollTop--
}
}
var MyMar2=setInterval(Marquee2,speed)
jsweb8_cn_bottom.οnmοuseοver=function() {clearInterval(MyMar2)}
jsweb8_cn_bottom.οnmοuseοut=function() {MyMar2=setInterval(Marquee2,speed)}
</script>

<!--向下滚动代码结束-->

<br>

<!--下面是向左滚动代码-->

<div id="jsweb8_cn_left" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="jsweb8_cn_left1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td><td><img src="http://jsweb8.cn/images/logo.gif" width="88"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
</tr>
</table>
</td>
<td id="jsweb8_cn_left2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
jsweb8_cn_left2.innerHTML=jsweb8_cn_left1.innerHTML
function Marquee3(){
if(jsweb8_cn_left2.offsetWidth-jsweb8_cn_left.scrollLeft<=0)
jsweb8_cn_left.scrollLeft-=jsweb8_cn_left1.offsetWidth
else{
jsweb8_cn_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
jsweb8_cn_left.οnmοuseοver=function() {clearInterval(MyMar3)}
jsweb8_cn_left.οnmοuseοut=function() {MyMar3=setInterval(Marquee3,speed)}
</script>

<!--向左滚动代码结束-->

<br>

<!--下面是向右滚动代码-->

<div id="jsweb8_cn_right" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="jsweb8_cn_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
</tr>
</table>
</td>
<td id="jsweb8_cn_right2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
jsweb8_cn_right2.innerHTML=jsweb8_cn_right1.innerHTML
function Marquee4(){
if(jsweb8_cn_right.scrollLeft<=0)
jsweb8_cn_right.scrollLeft+=jsweb8_cn_right2.offsetWidth
else{
jsweb8_cn_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
jsweb8_cn_right.οnmοuseοver=function() {clearInterval(MyMar4)}
jsweb8_cn_right.οnmοuseοut=function() {MyMar4=setInterval(Marquee4,speed)}
</script>

<!--向右滚动代码结束-->
<p></p>
更多精彩尽在JS特效学院|<a href="http://www.jsweb8.cn"

target="_blank">www.jsweb8.cn</a>,转载请注明出处（JS特效学院）
</body>
</html>

bin6120
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5无限循环滚动图片展示
10-31
在这个"HTML5无限循环滚动图片展示"项目中，我们聚焦于HTML5的一个应用场景——创建一种具有3D效果的图片展示效果，这种效果能够无限循环地滚动图片。 首先，实现这种效果的关键在于HTML5的Canvas元素，这是一个...
无缝滚动图片
10-27
在IT领域，"无缝滚动图片"是一种常见的网页设计技术，用于在网站上展示连续、平滑过渡的图像序列，给予用户一种无边界、连续浏览的视觉体验。这种效果通常是通过JavaScript或者CSS3来实现的，使得图片在滚动到页面...
水平滚动图片网页特效
11-13
水平滚动图片网页特效是一种常见的网页设计手法，它能够为用户带来独特的浏览体验，尤其是在展示大量图片或需要强调视觉流动感的网站中。这种特效通常利用JavaScript、CSS3或者专门的库如jQuery来实现，使图片在水平...
滚动框滚动图片源码-易语言
06-12
本文将详细解析"滚动框滚动图片源码"这一主题，结合"进阶教程源码"的标签，我们将深入探讨如何在易语言中实现图片在滚动框内的动态展示。 首先，滚动框（Scroll Box）是窗口程序中常见的一种控件，它允许用户通过...
asp.net制作横向滚动公告
bin6120的专栏
06-25 683
对于.net程序不支持的。这个应该用JS脚本来做。无间隙滚动innerHTML:    设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度。scrollLeft:   设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:    设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth: 获取对象的滚动宽
利用ajax实现多种注册角色的注册登录检测
bin6120的专栏
06-25 668
页面A.aspx://这里我将js写在一个js文件中，用的时候直接导入就可以了。js文件内容在下面：标签内的内容： 请问要注册以下哪种身份？                            //因为是在探索过程，所以就做了2个选择。具体大家可以自己增加。          用户名: A.cs  //默认；//--------------------------
px pt em
bin6120的专栏
06-25 654
先搞清基本概念：px就是表示pixel，像素，是屏幕上显示数据的最基本的点；而pt就是point，是印刷行业常用单位，等于1/72英寸。        这样很明白，px是一个点，它不是自然界的长度单位，谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，“点”的大小是会“变”的，也称为“相对长度”。   
按钮实现新闻的上移与下移
bin6120的专栏
06-25 451
实现软件：数据库SQL2005+visual studio2008.在网上搜索了一大堆关于与数据库相连实现上移一条记录，下移一条记录的网上都觉得不是很好。由于主键ID可能不连续（虽然插入新闻时是自增的ID号，但实现在进行删除操作后ID号可能不连续），因而涉及到边界问题，容易出现异常。好了以下是代码（由于是菜鸟学习Programming，代码质量、结构方面可能存在太多瑕疵，希望大家体谅或不吝
jquery 窗体变换
bin6120的专栏
06-25 424
!window.jQuery && document.write();   #tabs{ padding:.5em;}    #tabs:after    {      content:"."; visibility:hidden; display:block;       clear:both; height:0;         }    #ta
js 幻灯片
bin6120的专栏
06-25 304
var widths=300; //设置幻灯片宽度var heights=400; //设置幻灯片高度var counts=4; //设置幻灯片数量//设置图片路径img1=new Image ();img1.src=img/1.jpg;img2=new Image ();img2.src=img/2.jpg;img3=new Image ();img3.src=im
第二章-在HTML中使用JavaScript
2301_79858637的博客
07-07 1235
事实上，WEB的核心语言是HTML，如何做到让JavaScript既可以与HTML页面共存，又不影响页面在其他浏览器中的呈现效果呢？要为WEB浏览器提供核心的脚本支持.
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1156
title>充电效果
JS之防抖和节流
喵喵的博客
07-09 1019
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
HTML 学习指南：从入门到精通
英英的博客
07-09 404
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
html转markdown nodejs实现
学习使我快乐_玉祥
07-09 250
用到了jsdom库，直接现成处理html标签结构，只需要关心format格式化样式即可。比较简易，待后续优化，目前只是短时间批量转换html文件。
前端入门知识分享：如何在HTML或CSS文件中引用CSS文件。
uu0216的博客
07-09 776
行内样式：使用 HTML 标签的 style 属性定义 CSS 样式； 内嵌样式：使用 style 标签在 HTML 文档头部（ 通常在 head 之间）定义 CSS 样式； 链接式：使用 link 标签引入外部 CSS 样式表文件。 导入式：使用 @import 命令导入外部 CSS 样式表文件。
滚动标签滚动图片
05-27
要实现滚动标签滚动图片，可以使用一些现成的JavaScript插件，比如Owl Carousel或Slick Carousel。这些插件可以让你轻松地创建一个可定制的滚动标签和滚动图片的UI界面。你可以使用HTML和CSS创建标签和图片的基本...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值