- 浏览: 121767 次
- 性别:
- 来自: 南宁
文章分类
最新评论
DIV的图片无缝滚动,DIV 图片上无缝滚动,DIV 图片下无缝滚动,DIV 图片左无缝滚动,DIV 图片右无缝滚动
先了解一下对象的几个的属性:
innerHTML:设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度 DIV + JS 图片上无缝滚动 <style type="text/css"> <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; height: 100px; text-align: center; float: left; } #demo img { border: 3px solid #F2F2F2; display: block; } --> </style> 向上滚动 <div id="demo"> <div id="demo1"> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> </div> <div id="demo2"></div> </div> <script> <!-- var speed=10; //数字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2 function Marquee(){ if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时 tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端 else{ tab.scrollTop++ } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 --> </script> DIV + CSS + JS图片下无缝滚动 <style type="text/css"> <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; height: 100px; text-align: center; float: left; } #demo img { border: 3px solid #F2F2F2; display: block; } --> </style> 向下滚动 <div id="demo"> <div id="demo1"> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> </div> <div id="demo2"></div> </div> <script> <!-- var speed=10; //数字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2 tab.scrollTop=tab.scrollHeight function Marquee(){ if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时 tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端 else{ tab.scrollTop-- } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 --> </script> DIV + CSS + JS图片左无缝滚动 <style type="text/css"> <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 { float: left; } --> </style> 向左滚动 <div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> </div> <div id="demo2"></div> </div> </div> <script> <!-- 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<=0) tab.scrollLeft-=tab1.offsetWidth else{ tab.scrollLeft++; } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)}; tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; --> </script> DIV + JS图片右无缝滚动 <style type="text/css"> <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 { float: left; } --> </style> 向右滚动 <div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> </div> <div id="demo2"></div> </div> </div> <script> <!-- 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<=0) tab.scrollLeft+=tab2.offsetWidth else{ tab.scrollLeft-- } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)}; tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; --> </script> |
DIV+CSS+JS图片无缝滚动代码终于被我找到了。找了好久DIV的图片无缝滚动,一直都没有一个好的DIV+JS的图片无缝滚动代码,这个是很好的,推荐给新人。图片上无缝滚动,图片下无缝滚动,图片左无缝滚动,图片右无缝滚动代码下载。德曼SEO团队专业从事DIV+CSS网站建设服务!
本文关键词:DIV的图片无缝滚动,图片上无缝滚动,图片下无缝滚动,图片左无缝滚动,图片右无缝滚动
发表评论
-
jQuery操作Table学习总结
2012-11-08 13:35 677jQuery在客户端操作Table学习:不过有很多很多的不足, ... -
模仿AJAX上传文件
2011-07-27 11:08 0首先要说的就是 ajax 是无法实现上传文件的,可以想一下aj ... -
模仿AJAX上传文件
2011-07-27 11:08 664首先要说的就是 ajax 是无法实现上传文件的,可以想一下aj ... -
模仿AJAX上传文件
2011-07-27 11:07 707首先要说的就是 ajax 是无法实现上传文件的,可以想一下aj ... -
模仿AJAX上传文件
2011-07-27 11:07 902首先要说的就是 ajax 是无法实现上传文件的,可以想一下aj ... -
KindEditor-编辑器配置参数属性
2011-03-31 17:09 1843在《KindEditor-KindEditor简介》中提到了K ... -
js首页图片轮播
2011-01-12 17:05 1884<HTML><HEAD><TIT ... -
js 滚动菜单
2011-01-10 22:51 677<html> <head> <m ... -
javascript跳转
2010-12-29 16:39 749js跳转页面方法大全<s ... -
新的右下脚消息
2010-12-25 00:42 419<SCRIPT language=JavaScript& ... -
右下角弹窗
2010-12-25 00:30 1570<html><body><sty ... -
js 操作 cookie
2010-12-20 14:57 711//设置cookies function setCookie( ... -
js全选单选集合
2010-10-30 09:05 1032<!DOCTYPE html PUBLIC " ... -
JS特效代码大全(四)js弹出对话框
2010-09-19 09:56 3588js弹出对话框在某些情况下是一个很好的工具,通过半透明的设置 ... -
js模式对话框控制
2010-09-19 09:45 1937Javascript有许多内建的方法来产生对话框,如:wind ... -
滑门技术
2010-09-08 14:45 609<!DOCTYPE HTML PUBLIC ... -
如何局部刷新js函数
2010-09-08 11:06 1213<script type="text/java ... -
js滑动门
2010-08-31 17:41 1005<!DOCTYPE html PUBLIC " ... -
自己写的js加密
2010-08-10 18:50 679<script>function changeTe ...
相关推荐
接下来,我们可能还需要一个JavaScript(或jQuery)脚本来实现无缝滚动。主要步骤包括: 1. **获取图片列表**:找到所有的图片元素,并记录其宽度。 2. **计算总宽度**:将所有图片宽度相加,再加上适当的间隙,...
原创DIV+CSS+JS无缝滚动代码(从右向左)
在这个主题中,我们将深入探讨如何利用 `DIV+CSS` 创建纵向横向下拉菜单以及如何用 `JavaScript` 实现图片文字的横向滚动。 首先,我们来关注 `DIV+CSS` 纵向横向下拉菜单。`DIV` 是HTML中的一个布局容器元素,通过...
根据给定的文件信息,我们可以深入探讨网页图片无缝循环滚动的HTML及JavaScript实现技术。这一技术在网页设计中被广泛运用,特别是在展示产品、广告或背景图像时,它能够为用户带来连续且平滑的视觉体验,提升网站的...
文章提到的“div+css+js实现无缝滚动”正是为了寻找一个兼容性更好的替代方案。`div`元素作为HTML文档中的一个块级元素,可以用来承载滚动内容;`css`用于设置`div`元素的样式,使其表现得像一个连续滚动的容器;`js...
"jQuery图片无缝滚动代码左右上下无缝滚动图片"是利用jQuery库实现的一种图片滚动技术,它使得图片能够在页面上以平滑、连续的方式移动,既可以从左到右,也可以从上到下,为用户带来流畅的视觉体验。 jQuery是一个...
下面我们将详细介绍如何用JS来制作图片的向上无缝滚动效果: 1. **HTML结构**: 首先,我们需要在HTML中设置一个包含所有图片的容器,例如`<div>`,并给每个图片设置相应的样式,确保它们在同一行排列。容器通常...
根据给定的文件信息,我们可以总结出以下关于“JS+DIV无缝滚动代码”的知识点: ### 一、基础知识 #### 1.1 DIV容器与CSS样式 - **`<div>`**:HTML文档中最常见的标签之一,用于组合其他HTML元素,没有特定的格式...
本文将深入讲解如何使用JS实现产品图片的向左和向上无缝滚动效果。 首先,我们需要理解无缝滚动的基本原理。它通过调整图片的显示顺序,让最后一张图片紧跟在第一张图片之后,从而在视觉上创造出无中断的滚动效果。...
在现代网页设计中,无限循环的无缝滚动是一种常见的动画效果,尤其是在列表或者新闻滚动模块中。使用CSS3实现这一效果,不仅可以提升用户体验,而且可以减少JavaScript的使用,简化前端代码。CSS3中提供的一些关键...
### JavaScript + div 图片无缝滚动知识点解析 #### 一、技术背景与应用场景 在Web开发领域,使用JavaScript结合HTML和CSS实现动态效果是常见的做法。其中,“图片无缝滚动”是一种非常实用的技术,常用于网站轮播...
在"无缝滚动-顶部.htm"和"无缝滚动-四向区域.html"中,可能包含了上下、左右甚至四向的滚动效果实现,这涉及到CSS动画和JavaScript的配合使用。 4. **CSS层居中** 居中对齐是网页设计中常见的需求,"精品css层居中...
"不间断滚动(无缝滚动)修正版js+css"是一个网页特效技术,主要应用于网站中,使得文本、图片或任何元素能够像跑马灯一样不间断地滚动展示,为页面增添动态效果,提高用户关注度。这种技术通常被称为marquee效果,...
91. 又一款非常不错的jQuery+div大气新闻图片切换插件代码(AnythingSlider)下载 92. 基于jQuery带时间轴宽屏图片切换源码 93. 基于jQuery的横向无缝图片滚动插件jcarousel 94. 实用jquery焦点图源码2 95. 常用...
根据给定的文件信息,我们可以深入探讨“js图片无缝滚动代码”的实现原理和技术要点。这段代码展示了一种利用JavaScript实现图片在网页上无缝滚动的方法,适用于创建动态且视觉上连贯的图片滚动效果。 ### 无缝滚动...
### JS 无缝滚动,鼠标放上去暂停代码 在前端开发中,实现文本或图片的无缝滚动效果是非常常见的需求之一,特别是在新闻网站、广告横幅等场景下。这种效果不仅可以提升用户体验,还能增加页面的吸引力。本文将详细...
在提供的压缩包文件中,可能包含了一个名为“无缝滚动”的示例项目,该项目可能包括HTML文件(如index.html)、CSS文件(如style.css)和JavaScript文件(如script.js)。通过分析和学习这些文件,你可以更深入地...
在探讨“javascript无缝滚动代码”的知识点时,我们主要聚焦于如何通过JavaScript和HTML结合,实现图片的无缝滚动效果。此技术常用于网站设计中的轮播图、广告位或信息流等场景,能够提升用户体验,使页面更加生动...
兼容各浏览器JS+CSS水平和垂直无缝图片滚动效果代码 12.漂亮暖色调js+flash平滑过渡大屏图片切换的广告代码 13.实用国外JS内容选项卡DEMO下载 14.推荐通用文字图片JS不间断滚动封装类 代替Marquee 15.站长...