- 浏览: 521175 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (104)
- ssh (6)
- 前台 (15)
- apache 工具 (7)
- 软件 (1)
- msyql (3)
- msyql,存储过程,java (1)
- jstree (1)
- java (9)
- sqlserver,排序规则 (1)
- jqgrid (2)
- JS word 编辑在线 (1)
- SVN (2)
- openkm (4)
- webservice (2)
- jquery插件 (2)
- jqm (4)
- Mobiscroll (1)
- 前台 html5 (1)
- sql (1)
- linux (2)
- MyEclipse 优化技巧 (1)
- druid Spring (1)
- log4j2 (1)
- idea spring (1)
- spring (2)
- Jackson (2)
- idea maven (1)
- Mybatis-Generator (1)
- idea Spring-boot-devTools (1)
- spring boot (1)
最新评论
-
贝塔ZQ:
js打开word文件在线编辑,直接编辑在线文档,插件PageO ...
使用JS打开word在线编辑,直接编辑在线doc文件 -
lujin608:
谢谢了 问题解决了 但是 我有个疑问 为什么会出现了.lock ...
Workspace in use or cannot be created, choose a different one.--错误解决办法 -
yyf2008up:
学习了,原来是自己没有关闭eclipse
Workspace in use or cannot be created, choose a different one.--错误解决办法 -
三尺之尚:
u012732154 写道你好,$("input[t ...
jqm小组件的使用 -
u012732154:
你好,$("input[type='checkbox ...
jqm小组件的使用
nnerHTML: 设置或获取位于对象起始和结束标签内的 HTML
scrollHeight: 获取对象的滚动高度。
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth: 获取对象的滚动宽度
offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度
-----------------------------------------------------------------------
图片向上无缝滚动
<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>
------------------------------------------------------------
图片向下无缝滚动
<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>
--------------------------------------------------------
图片向左无缝滚动
<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>
------------------------------------------------------
图片向右无缝滚动
<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>
scrollHeight: 获取对象的滚动高度。
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth: 获取对象的滚动宽度
offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度
-----------------------------------------------------------------------
图片向上无缝滚动
<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>
------------------------------------------------------------
图片向下无缝滚动
<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>
--------------------------------------------------------
图片向左无缝滚动
<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>
------------------------------------------------------
图片向右无缝滚动
<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>
发表评论
-
exif图片方向处理
2016-04-09 13:38 830iphone对拍摄的照片有自动处理 //修复ios ... -
jquery.layout.js 常用属性说明
2014-03-04 15:03 3903jQuery UI.Layout Plug-in 官方站点 ... -
用jquery1.9版本判断ie浏览器及ie6浏览器
2014-03-04 13:35 5032jQuery 从 1.9 版开始,移除了 $.browser ... -
jQuery选择器总结
2013-12-13 09:53 526jQuery 的选择器可谓之强大无比,这里简单地总结一下常用 ... -
jQuery选择器总结
2013-12-13 09:51 0jQuery 的选择器可谓之强大无比,这里简单地总结一下常用 ... -
JS判断访问设备是移动设备还是pc
2013-10-23 14:51 1331<script type="text/ja ... -
Uploadify-中文帮助手册
2013-04-19 10:52 16607帮助文档 Uploadify是一个易集成的多文件上传解 ... -
SEO必须知道的IIS 错误代码大全
2011-04-08 11:38 9901.1 消息1xx(Informational 1xx)该类状 ... -
JS调用Struts中的Action
2010-08-05 10:32 3801方法一: 用js函数让网页重定向,window.locati ... -
把JSP放到WEB-INF后以保护JSP源代码
2010-07-22 14:24 1221本人在看《J2EE核心模式 ... -
jpa遇到的 org.hibernate.PersistentObjectException: detached entity passed to persi
2010-07-22 09:44 1719再用hibernate3+spring+struts2开发的是 ... -
Html事件列表
2010-06-23 10:09 1007一般事件: onClick HTML: 鼠标点击事件,多用在某 ... -
HTML中加载FLASH
2010-06-12 10:45 1167<object type="applicati ... -
最后一行文字重复
2010-06-09 17:27 1099在用div设计框架的时候 <div> < ... -
图片滚动代码--1
2010-06-05 18:23 1302图片滚动代码 (从右向左滚动) <marquee s ...
相关推荐
"图片无限连续滚动的js代码"就是一种实现这种效果的技术,它基于JavaScript语言,类似于HTML中的`<marquee>`标签,但提供了更为灵活和可控的滚动体验。下面我们将详细探讨这个主题。 1. **JavaScript基础**: ...
其中,“网页表格中图片连续滚动”这一技术点,不仅能够增强页面的视觉吸引力,还能有效地利用空间展示更多的信息。本文将详细解析如何在HTML表格中实现图片的连续滚动效果,包括其实现原理、代码详解以及注意事项。...
总的来说,创建广告图片连续滚动的效果需要HTML构建基本结构,CSS进行样式控制,JavaScript处理动态交互。通过合理组合这三种技术,我们可以创建出具有吸引力的广告轮播组件。当然,实际开发中可能还需要考虑兼容性...
标题中的“图片滚动代码,图片无缝滚动代码,图片自动滚动且可控制滚动方向”涉及到的是网页设计中的一个常见功能——图片滚动效果。这种效果通常用于展示多张图片,以滚动的方式呈现,使得用户无需手动翻页就能浏览到...
### 一、网页图片无缝循环滚动的基本原理 网页图片的无缝循环滚动主要通过HTML结构布局与JavaScript控制相结合来实现。其核心思想是创建两个并行的元素,其中一个作为实际显示区域(如`demo1`),另一个作为复制...
总的来说,C#和JavaScript结合实现图片连续滚动代码,需要理解前后端的协作,掌握JavaScript的DOM操作、事件处理以及CSS的布局和动画技巧,同时对C#的Web服务开发有深入理解。通过这样的实践,不仅可以提升编程技能...
无缝滚动的核心是通过改变图片的位置,模拟出连续滚动的效果。这通常涉及到定时器(如`setInterval`)和CSS定位(如`position: absolute`或`position: relative`)来实现。当图片到达边界时,会立即切换到下一组图片...
"图片左右滚动代码"就是一种实现这一效果的技术,主要通过JavaScript(JS)来控制图片的滚动动画,使得图片能够按照设定的方向连续、平滑地移动,通常应用于轮播图或跑马灯效果。这种技术对于网页设计师和前端开发者...
图片无缝滚动插件是一种网页设计中的重要元素,它主要用于展示多张图片,通过平滑过渡效果使得用户在浏览时感觉图片是连续不断的。这个压缩包文件"图片无缝滚动插件上下左右图片无缝滚动代码.zip"显然包含了一套实现...
HTML中的图片无缝滚动是一种常见的网页动态效果,常用于展示产品图集或背景滑动等场景。这个技术结合了HTML、CSS和JavaScript的力量,为用户提供流畅且连续的视觉体验。下面我们将详细探讨这些知识点。 首先,HTML...
在这个"Js图片连续左右滚动"的项目中,我们关注的是如何利用JavaScript实现图片在网页上连续、平滑地左右滚动,这是一种常见的网页动态效果,常用于展示产品图片或新闻轮播。 首先,我们需要一个HTML结构来放置图片...
本案例将详细介绍如何使用JavaScript实现图片连续滚动,特别地,我们将关注“MarqueeScrollLeft”这个实现方法,它代表了向左滚动的效果。 首先,我们需要理解基本的HTML结构,用于放置要滚动的图片。通常,我们会...
标题提到的"图片滚动,文字滚动,图片横竖滚动,超好的横竖同时无缝隙滚动代码,js,滚动特效"是网页设计中的常见技术,主要用于创建引人注目的交互式内容。这种技术主要依赖于JavaScript,一种广泛用于客户端网页...
标题与描述中的“图片连续滚动无前后空白脚本”指的是一个网页设计中常见的技术实现,即利用HTML、CSS和JavaScript创建一个无限循环滚动的图片展示效果,并且在滚动过程中不会出现空白区域,确保视觉上的连贯性和...
在本主题"JavaScript图片连续滚动效果"中,我们将探讨如何使用JavaScript来创建四种不同的图片滚动效果:向下滚动、向上滚动、向左滚动和向右滚动。这些效果可以提升网站的视觉吸引力,增加用户体验,常用于新闻轮播...
【标题】:“不间断图片左右滚动代码演示”是一个关于JavaScript(JS)实现的动态图片滚动效果的实例。在网页设计中,这种效果常用于展示产品、新闻或者广告,以吸引用户的注意力并提供良好的用户体验。 【描述】:...
在实现图片左右无缝滚动的JS代码中,通常会涉及以下几个关键技术点: 1. **DOM操作**:JavaScript通过Document Object Model(DOM)来操作网页元素,例如获取图片容器、添加或删除图片等。在本例中,可能需要创建一...
本教程将重点讲解如何利用JavaScript实现一个平滑向上滚动的图片展示效果,让网页更加生动吸引人。 首先,我们从HTML开始。在`index.html`文件中,我们需要创建一个容器来放置滚动的图片。这个容器通常是一个`div`...