js设置图片或文字自动左右滚动控制,鼠标经过停留

最新推荐文章于 2022-08-09 16:50:26 发布
最新推荐文章于 2022-08-09 16:50:26 发布
阅读量874 收藏
点赞数
分类专栏： 功能代码片段集锦 文章标签： function div border table

<BODY leftMargin=0 topMargin=2 marginheight="0" marginwidth="0">
<CENTER>
<p>
<h1>JS不间断循环滚动</h1><p>
  <TABLE 
style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid" 
cellSpacing=0 cellPadding=0 width=750 align=center border=0>
  <TBODY>
  <TR><td width="30"><a href="#" onClick="clickdiv()" id="aa">向左</a></td>
    <TD>
      <DIV id=demo style="OVERFLOW: hidden; WIDTH: 750px; COLOR: #ffffff">
      <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
        <TBODY>
        <TR>
          <TD id=demo1 vAlign=top><table width="1710" height="116"  border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="171" background="pic_bg.jpg"><div align="center">内容一</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容二</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容三</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容四</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容五</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容六</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容七</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容八</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容九</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">内容十</div></td>
            </tr>
          </table></TD>
          <TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV>
     
    </TD><td width="30"><a href="#" onClick="Rclickdiv()" id="mcc">向右</a></td></TR></TBODY></TABLE></TD></TR></TABLE>
</CENTER><SCRIPT>
var speed3=25//速度数值越大速度越慢
var t=false;
var id="aa";
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
function Marquee(){
if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
else{
document.getElementById("demo").scrollLeft++
}
t=false;
}
function RMarquee(){ 
if(document.getElementById("demo").scrollLeft<=0)
  document.getElementById("demo").scrollLeft+=document.getElementById("demo2").offsetWidth
  else{
  document.getElementById("demo").scrollLeft--
  }
  t=true;

}
function clickdiv(){
clearInterval(MyMar)
Marquee();
}
function Rclickdiv(){
clearInterval(MyMar)
RMarquee();
}
var MyMar=setInterval(Marquee,speed3)
document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)}
document.getElementById("demo").onmouseout=function() {if(t){MyMar=setInterval(RMarquee,speed3)}else{MyMar=setInterval(Marquee,speed3)}}
document.getElementById('mcc').onmouseout=function(){clearInterval(MyMar);MyMar=setInterval(RMarquee,speed3);}
document.getElementById('aa').onmouseout=function(){clearInterval(MyMar);MyMar=setInterval(Marquee,speed3);}
</SCRIPT>
</BODY>

onepointred
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
javascript实现的图片滚动效果，鼠标放上可停止
tgw2000的专栏
01-20 1144
style="OVERFLOW: hidden; WIDTH: 729px; HEIGHT: 180px"                               align=center>                                                            cellspace="0">                          
js导航条鼠标悬停上下文字滑动
timeless的博客
11-17 1302
js导航条鼠标悬停上下文字滑动                                   $(document).ready(function() {         $("#menu2 li a").wrapInner( '' );                  $("#menu2 li a").each(function() {           
js实现鼠标悬停图片上时滚动文字说明的方法
10-24
主要介绍了js实现鼠标悬停图片上时滚动文字说明的方法,涉及js操作鼠标事件的使用技巧,需要的朋友可以参考下
html鼠标悬停图片显示文字,原生JS实现鼠标悬停图片显示文字的简单示例
weixin_42504279的博客
06-04 4387
这篇文章主要为大家详细介绍了原生JS实现鼠标悬停图片显示文字的简单示例，具有一定的参考价值，可以用来参考一下。感兴趣原生JS实现鼠标悬停图片显示文字的简单示例的小伙伴，下面一起跟随512笔记的小编罗X来看看吧。无标题文档*{ margin:0; padding:0}.box{ height:260px; width:400px; position:relative}.mask{ position:...
JS效果 - 无缝滚动/滚动加停顿
06-11 3132
JS效果 - 无缝滚动/滚动加停顿        js效果中的滚动效果应该也是我们在浏览页面中比较常见的一个效果，其中不乏有文字滚动、图片滚动等。在这里我将以循序渐进的方式向大家讲解其滚动方法和原理。         首先请看效果图： ‍       其实做此效果是不需要添加滚动轴的，但是这样却更方便于我们了解方法原理。在叙述方法之前先介绍下此效果所用的一些属性。
JS轮播图，鼠标放上暂停，自动播放
LiHang1234567777的博客
08-09 3687
难点：点击第一张图片，我们想要的效果是鼠标移出后，图片轮播到第二张图片，到事实是轮播到第三张图片。2、鼠标移入事件：onmouseenter/onmouseover；鼠标移出事件：onmouseleave/onmouseout；知识点：1、定时器：setInterval()；2、鼠标移入，轮播停止；1、图片能够自动轮播，...
js 无缝滚动，鼠标放上去暂停代码
12-02
js 无缝滚动，鼠标放上去暂停代码，供大家学习和程序中使用
图片水平滚动，当鼠标悬停的时候暂停滚动
sinat_36841379的博客
03-04 4163
图片会水平移动，但是当图片在鼠标悬停的时候在任意一幅画的时候，暂停水平移动，当鼠标从图片上移动的时候再继续移动。 无标题文档 $(document).ready(function(){     var $wrapper=$("#scroller a img");/*这里我们获得的引用是单独图片的引用，而不是整个图片整体的引用，                    
文字滚动效果鼠标经过停留.zip
07-03
文字滚动效果鼠标经过停留是一款鼠标经过停下，鼠标移走继续滚动，兼容ie6及主流浏览器。
图片循环滚动带停顿
06-05
两组图片滚动，一组为图片下面是文字描述 循环滚动 带停顿，一组为图片文字不间断循环滚动
echarts实现自定义工具栏图标方法，通过点击自定义图标实现datazoom的滚动与停止,代替鼠标移入停止移出恢复滚动 实例
09-03
在网上查看了很多的代码，本来想通过鼠标移入移出来控制滚动，但是发现即使在echarts图范围内进行鼠标移动也会触发到鼠标移入移出，所以自行通过增加工具栏的自定义图标方法来实现功能。为了方便理解，通过echarts...
js页面向下滚动浮动层
04-08
js页面向下滚动浮动层 当页面到一定高度时，浮动层不随滚动条往下滚动， 一直停留在页面头部。
纯JS打造循环间隔滚动公告栏
02-27
鼠标经过并且停留在公告区时，公告不进行切换，待鼠标离开后再次进行切换！ 点击公告区可查看当前点击公告内容 如果内容DIV当前未被打开，创建一个DIV，滑动路径分为两步，第一步滑动的宽度、高度、左...
JavaScript网页特效范例宝典源码
09-04
实例229 图片左右晃动 354 实例230 飘舞的变形图片 356 8.4 图片的动画效果 358 实例231 图片翻转效果 359 实例232 水波倒影特效 360 实例233 图片渐隐渐现 361 实例234 图片的探照灯效果 362 实例235 雷达扫描图片...
ASP.NET教务信息管理系统的设计与实现(源代码+论文).rar
04-17
计算机毕业设计，含源码
清新大气时尚简约论文答辩，通用模版(静态）691012.pptx.zip
04-17
清新大气时尚简约论文答辩，通用模版(静态）691012.pptx
清爽简约论文答辩模板.ppt.zip
最新发布
04-17
清爽简约论文答辩模板.ppt
内蒙古自治区各地级市市辖区数据1999-2022人均GDP建成区居住用地道路面积供用水燃气财政收支就业参保人数医院床位等.xls
04-17
数据来源：中经数据库 主要指标110多个（全部都是纯粹的 市辖区 指标），大致是： GDP GDP增速 第一产业增加值占GDP比重 第二产业增加值占GDP比重 第三产业增加值占GDP比重 人均GDP 社会消费品零售总额 固定资产投资(不含农户) 新设外商投资企业数_外商直接投资 实际利用外资金额(美元) 一般公共预算收入 一般公共预算支出 一般公共预算支出_教育 一般公共预算支出_科学技术 金融机构人民币各项存款余额_个人储蓄存款 金融机构人民币各项存款余额 金融机构人民币各项贷款余额 规模以上工业企业单位数 规模以上工业企业单位数_内资企业 规模以上工业企业单位数_港澳台商投资企业 规模以上工业企业单位数_外商投资企业 规模以上工业总产值 规模以上工业总产值_内资企业 规模以上工业总产值_港澳台商投资企业 规模以上工业总产值_外商投资企业 规模以上工业企业流动资产合计 规模以上工业企业固定资产合计 规模以上工业企业利润总额 规模以上工业企业应交增值税 规模以上工业企业主营业务税金及附加 户籍人口数 年均户籍人口数 户籍人口自然增长率 第一产业就业人员占全部城镇单位就业人员比重 第二产业就业人员占全部城镇单位就业人员比重 第三产业就业人员占全部城镇单位就业人员比重 城镇非私营单位就业人员数 城镇非私营单位就业人员数_第一产业 城镇非私营单位就业人员数_第二产业 城镇非私营单位就业人员数_第三产业 城镇非私营单位就业人员数_农、林、牧、渔业 城镇非私营单位就业人员数_采矿业 城镇非私营单位就业人员数_制造业 城镇非私营单位就业人员数_电力、热力、燃气及水生产和供应业 城镇非私营单位就业人员数_建筑业 城镇非私营单位就业人员数_批发和零售业 城镇非私营单位就业人员数_交通运输、仓储和邮政业 城镇非私营单位就业人员数_住宿和餐饮业 城镇非私营单位就业人员数_信息传输、软件和信息技术服务业 城镇非私营单位就业人员数_金融业 城镇非私营单位就业人员数_房地产业 城镇非私营单位就业人员数_租赁和商务服务业 城镇非私营单位就业人员数_科学研究和技术服务业 城镇非私营单位就业人员数_水利、环境和公共设施管理业 城镇非私营单位就业人员数_居民服务、修理和其他服务业 城镇非私营单位就业人员数_教育 城镇非私营单位就业人员数_卫生和社会工作 城镇非私营单位就业人员数_文化、体育和娱乐业 城镇非私营单位就业人员数_公共管理、社会保障和社会组织 城镇非私营单位在岗职工平均人数 城镇就业人员数_私营企业和个体 城镇非私营单位在岗职工工资总额 城镇非私营单位在岗职工平均工资 城镇登记失业人员数 建成区面积 建设用地面积 建设用地面积_居住用地 液化石油气供气总量 液化石油气供气总量_居民家庭 人工煤气、天然气供气总量 人工煤气、天然气供气总量_居民家庭 液化石油气用气人口 人工煤气、天然气用气人口 城市公共汽电车运营车辆数 城市出租汽车运营车辆数 城市公共汽电车客运总量 道路面积 排水管道长度 建成区绿化覆盖面积 建成区绿化覆盖率 绿地面积 公园绿地面积 维护建设资金支出 土地面积 生活用水供水量 供水总量 全社会用电量 城乡居民生活用电量 工业生产用电量 房地产开发投资 房地产开发投资_住宅 限额以上批发和零售业法人单位数 限额以上批发和零售业商品销售总额 普通中学学校数 中等职业教育学校数 普通小学学校数 普通高等学校专任教师数 普通中学专任教师数 中等职业教育专任教师数 普通小学专任教师数 普通高等学校在校生数 普通中学在校生数 中等职业教育在校生数 普通小学在校生数 电视节目综合人口覆盖率 公共图书馆总藏量_图书 医疗卫生机构数_医院和卫生院 卫生人员数_执业(助理)医师 医疗卫生机构床位数_医院和卫生院 城镇职工基本养老保险参保人数 职工基本医疗保险参保人数 失业保险参保人数
js写静态校园网页有文字滚动图片滚动导航菜单左右小窗
06-12
对于文字滚动和图片滚动，可以使用JavaScript中的定时器和CSS中的动画实现。对于导航菜单，可以使用HTML和CSS中的列表结构和浮动布局实现。对于左右小窗，可以使用HTML和CSS中的盒模型和绝对定位实现。以下是一个简单的示例代码： HTML： ``` <div class="wrapper"> <ul class="nav"> <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li> <li><a href="#">菜单3</a></li> </ul> <div class="slider"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div> <div class="marquee"> <p>这是一段滚动的文字</p> </div> </div> ``` CSS: ``` .wrapper { position: relative; width: 800px; height: 600px; margin: 0 auto; } .nav { list-style: none; margin: 0; padding: 0; float: left; } .nav li { float: left; margin-right: 20px; } .nav li a { display: block; padding: 10px; background-color: #ccc; } .slider { position: absolute; top: 0; left: 200px; width: 400px; height: 300px; overflow: hidden; } .slide { width: 400px; height: 300px; background-image: url('slide1.jpg'); background-size: cover; transition: transform 0.5s ease; } .slide:nth-child(2) { background-image: url('slide2.jpg'); } .slide:nth-child(3) { background-image: url('slide3.jpg'); } .marquee { position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; overflow: hidden; } .marquee p { white-space: nowrap; animation: marquee 10s linear infinite; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } ``` JavaScript: ``` let slides = document.querySelectorAll('.slide'); let currentSlide = 0; setInterval(() => { slides[currentSlide].style.transform = 'translateX(-100%)'; currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].style.transform = 'translateX(0)'; }, 5000); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值