zisetoufa
- 浏览: 318383 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
如果这就是爱情：
有相应的CSS和JS代码吗?
div+css js按钮特效 鼠标移上去显示子菜单 -
awaterway：
正好要用。哈哈哈哈。。
java调用window的cmd的ping指令 -
一江山：
...
Eclipse 项目有红感叹号 -
autorun：
...
Eclipse 项目有红感叹号 -
本色是本色：
试了 好像不行哦
form表单中enctype="multipart/form-data"的意思
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>
先了解一下对象的几个的属性：
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>
分享到：
发表评论
-
js将json数组对象属性的date显示出来
2016-06-28 11:39 745java里面时间类型转换成json数据就成这样了 " ... -
select 由左边框移动到右边示例
2015-05-05 15:46 746<script type="text/java ... -
jQuery ajax级联二级菜单(转)
2014-10-15 16:33 848默认查出一级分类的第一条数据，和一级分类第一条对应的二级分类条 ... -
js 操作select的option
2014-04-09 14:21 1057注意:Option中的O是要大写的，不然语法报错 1. ... -
js 操作select的option
2014-04-09 14:20 1011注意:Option中的O是要大写的，不然语法报错 1.动态 ... -
在jsp页面获取后台json数据
2014-01-03 17:57 9476后台传过来的是一个JsonArray数组 var a = [ ... -
用js动态改变css样式表
2013-08-13 10:36 3739用setAttribute方法实现一个页面两份样式表的效果，具 ... -
＜meta http-equiv=名称 content=值＞
2013-04-27 16:36 1130meta是html语言head区的一个辅助性标签。几乎所有的网 ... -
java读取配置文件的几种方法
2013-04-15 12:15 877一.读取xml配置文件 package chb.demo.vo ... -
java如何做到判断一个字符串是否是数字
2013-04-12 11:25 1085public class NumberDemo { pub ... -
ajax提交并根据返回的值重写标签
2013-04-12 11:09 1538Jsp: function saveCalendar(id) ... -
EL表达式截取字符串
2013-04-12 11:06 969<%@ taglib prefix="fn&q ... -
网页JS弹出广告代码
2013-04-08 11:45 4137借鉴：网页JS弹出广告代码，头部，右下角，网页中漂浮，对联广告 ... -
HTML页面宽度自适应
2013-03-28 10:36 6441<meta name="viewport&qu ... -
js document.createElement 浏览器兼容处理
2013-03-22 11:36 51081：innerText IE支持，FIREFO ... -
jsp中js实现点击按钮更改背景图片
2013-03-04 13:46 6073<script> function myc ... -
Javascript 获取某个a标签的href并进行分解
2013-03-04 12:43 2311问题背景： 原网页中已经有如下代码，且不能更改，class标签 ... -
在网页中嵌入百度搜索条
2013-02-27 15:09 1504<html> <head> ... -
网页上显示天气预报信息的代码
2013-02-27 11:48 1886（将代码拷贝到你的网页上即可，当然，天气预报只能在联网的情况下 ... -
js操作时间（年-月-日 时-分-秒 星期几）
2013-02-27 11:46 1053<script type="text/java ...
相关推荐
接下来，我们可能还需要一个JavaScript（或jQuery）脚本来实现无缝滚动。主要步骤包括： 1. **获取图片列表**：找到所有的图片元素，并记录其宽度。 2. **计算总宽度**：将所有图片宽度相加，再加上适当的间隙，...
原创DIV+CSS+JS无缝滚动代码(从右向左)
在这个主题中，我们将深入探讨如何利用 `DIV+CSS` 创建纵向横向下拉菜单以及如何用 `JavaScript` 实现图片文字的横向滚动。 首先，我们来关注 `DIV+CSS` 纵向横向下拉菜单。`DIV` 是HTML中的一个布局容器元素，通过...
文章提到的“div+css+js实现无缝滚动”正是为了寻找一个兼容性更好的替代方案。`div`元素作为HTML文档中的一个块级元素，可以用来承载滚动内容；`css`用于设置`div`元素的样式，使其表现得像一个连续滚动的容器；`js...
在"无缝滚动-顶部.htm"和"无缝滚动-四向区域.html"中，可能包含了上下、左右甚至四向的滚动效果实现，这涉及到CSS动画和JavaScript的配合使用。 4. **CSS层居中** 居中对齐是网页设计中常见的需求，"精品css层居中...
通过以上分析，我们可以看到，网页图片无缝循环滚动的设计不仅需要对HTML和CSS有深入理解，还需要掌握JavaScript编程技巧，包括DOM操作、事件处理以及定时器的使用。这种技术在现代网页开发中非常实用，对于提升网站...
### JavaScript + div 图片无缝滚动知识点解析 #### 一、技术背景与应用场景 在Web开发领域，使用JavaScript结合HTML和CSS实现动态效果是常见的做法。其中，“图片无缝滚动”是一种非常实用的技术，常用于网站轮播...
下面我们将详细介绍如何用JS来制作图片的向上无缝滚动效果： 1. **HTML结构**： 首先，我们需要在HTML中设置一个包含所有图片的容器，例如`<div>`，并给每个图片设置相应的样式，确保它们在同一行排列。容器通常...
通过上述方法，我们可以用纯CSS实现无限循环的无缝滚动动画。这一技术不仅适用于简单的滚动显示，还可以扩展到更复杂的动画效果中。对于开发者而言，掌握CSS3中关于动画的这些高级用法，将有助于提升开发效率，并让...
"不间断滚动（无缝滚动）修正版js+css"是一个网页特效技术，主要应用于网站中，使得文本、图片或任何元素能够像跑马灯一样不间断地滚动展示，为页面增添动态效果，提高用户关注度。这种技术通常被称为marquee效果，...
根据给定的文件信息，我们可以总结出以下关于“JS+DIV无缝滚动代码”的知识点： ### 一、基础知识 #### 1.1 DIV容器与CSS样式 - **`<div>`**：HTML文档中最常见的标签之一，用于组合其他HTML元素，没有特定的格式...
本文将深入讲解如何使用JS实现产品图片的向左和向上无缝滚动效果。 首先，我们需要理解无缝滚动的基本原理。它通过调整图片的显示顺序，让最后一张图片紧跟在第一张图片之后，从而在视觉上创造出无中断的滚动效果。...
"jQuery图片无缝滚动代码左右上下无缝滚动图片"是利用jQuery库实现的一种图片滚动技术，它使得图片能够在页面上以平滑、连续的方式移动，既可以从左到右，也可以从上到下，为用户带来流畅的视觉体验。 jQuery是一个...
93. 基于jQuery的横向无缝图片滚动插件jcarousel 94. 实用jquery焦点图源码2 95. 常用jQuery新闻焦点图片切换效果插件 96. 强大jQuery实现3D文字三维旋转效果代码下载 97. 很帅的jquery焦点图切换源码可用于产品...
在提供的压缩包文件中，可能包含了一个名为“无缝滚动”的示例项目，该项目可能包括HTML文件（如index.html）、CSS文件（如style.css）和JavaScript文件（如script.js）。通过分析和学习这些文件，你可以更深入地...
### JS 无缝滚动，鼠标放上去暂停代码 在前端开发中，实现文本或图片的无缝滚动效果是非常常见的需求之一，特别是在新闻网站、广告横幅等场景下。这种效果不仅可以提升用户体验，还能增加页面的吸引力。本文将详细...
根据给定的文件信息，我们可以深入探讨“js图片无缝滚动代码”的实现原理和技术要点。这段代码展示了一种利用JavaScript实现图片在网页上无缝滚动的方法，适用于创建动态且视觉上连贯的图片滚动效果。 ### 无缝滚动...
综上所述，JavaScript无缝滚动效果是通过JavaScript和CSS的结合实现的一种动态展示技术，它可以增强网页的视觉吸引力和用户体验。通过理解其工作原理和实践，开发者可以创造出更多富有创意的滚动效果。
本文将深入探讨这种支持单排图片上下滚动和无缝滚动的js图片滚动插件。 首先，单排图片上下滚动是指在网页的一行（或一列）内展示图片，并允许用户通过点击按钮或自动播放来上下滚动这些图片。这种方式使得有限的...