已阅读5页,还剩2页未读, 继续免费阅读
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
教你如何实现DIV的图片无缝滚动效果 在网站制作和站长进行网站维护的时候,经常会想使用滚动图片来达到某种效果,现在我们来教大家如何实现,下面由洛阳蓝点科技技术员整理发布:先了解一下对象的几个的属性:innerHTML:设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度。scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度图片上无缝滚动向上滚动!-var speed=10; /数字越大速度越慢var tab=document.getElementById(demo);var tab1=document.getElementById(demo1);var tab2=document.getElementById(demo2);tab2.innerHTML=tab1.innerHTML; /克隆demo1为demo2function Marquee()if(tab2.offsetTop-tab.scrollTop图片下无缝滚动向下滚动=0)/当滚动至demo1与demo2交界时tab.scrollTop+=tab2.offsetHeight /demo跳到最顶端elsetab.scrollTop-var MyMar=setInterval(Marquee,speed);tab.onmouseover=function() clearInterval(MyMar);/鼠标移上时清除定时器达到滚动停止的目的tab.onmouseout=function() MyMar=setInterval(Marquee,speed);/鼠标移开时重设定时器-图片左无缝滚动向左滚动!-var speed=10; /数字越大速度越慢var tab=document.getElementById(demo);var tab1=document.getElementById(demo1);var tab2=document.getElementById(demo2);tab2.innerHTML=tab1.innerHTML;function Marquee()if(tab2.offsetWidth-tab.scrollLeft图片右无缝滚动向右滚动!-var speed=10; /数字越大速度越慢var tab=document.getElementById(demo);var tab1=document.getElementById(demo1);var tab2=document.getElementById(demo2);tab2.innerHTML=tab1.innerHTML;function Marquee()if(tab.scrollLeft 本篇文章来源于 蓝点科
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- MATLABSimulink倒立摆模糊控制设计课程设计
- 程控交换课程设计狄卫国
- 高中信息技术必修一《体验计算机解决问题的过程》教学设计
- 高中二年级劳动技术《母亲之花-康乃馨的培育与艺术造型》教学设计
- 高中一年级化学“氧化还原反应的本质与规律”教学设计
- 小学四年级综合实践活动《我们十岁了》成长礼单元教学设计
- 高中信息技术三维创意作品赏析教学设计-人教中图版《三维设计与创意》第3章第2节
- 高三化学硫酸及硫的转化高考复习教案-以江苏新高考一轮复习为载体
- 冲击波课程设计
- 小学六年级综合实践活动“做个快乐的人”教学设计
- 2025年设备监理师职业资格考试(设备工程项目管理)历年参考题库含答案详解
- 水利水电工程脚手架搭设专项方案
- 2025年中小学生保健卫生知识竞赛试题(附答案)
- 2026年高级会计师实务考试真题及答案
- 2026年下半年中小学教师资格考试综合素质(中学)笔试真题及答案
- 2026秋新版历史九年级上册教学课件:第一单元文明的产生和古代亚非文明 单元小结复习
- 2026-2027第一学期四年级上册语文教学计划及教学进度安排
- IEC TR 62595-1-62025 显示器照明装置 第1-6部分用于背光装置的量子点薄膜和量子点扩散板标准立项发展报告
- 2026太仓市城市发展集团有限公司第一批公开招聘6人考试参考题库及答案详解
- 天津市河东区2025-2026学年九年级上学期12月月考英语试题(含答案)
- 2026年秋季开学小学收心归位习惯养成教育课件
评论
0/150
提交评论