图片无缝滚动上下左右方向
------------------------------------------------------------图片向上无缝滚动
<style>
<!--
#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="logo.gif" border="0" /></a>
<a href="#"><img src="logo.gif" border="0" /></a>
<a href="#"><img src="logo_logo.gif" border="0" /></a>
<a href="#"><img src="logologo.gif" border="0" /></a>
<a href="#"><img src="logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
<script>
<!--
var speed=5; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetTop-tab.scrollTop<=0)
tab.scrollTop-=tab1.offsetHeight
else{
tab.scrollTop++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
------------------------------------------------------------图片向下无缝滚动
<style>
<!--
#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="logo.gif" border="0" /></a>
<a href="#"><img src="logo.gif" border="0" /></a>
<a href="#"><img src="logo_logo.gif" border="0" /></a>
<a href="#"><img src="logologo.gif" border="0" /></a>
<a href="#"><img src="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>
<!--
#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="logo.gif" border="0" /></a>
<a href="#"><img src="logo.gif" border="0" /></a>
<a href="#"><img src="logo_logo.gif" border="0" /></a>
<a href="#"><img src="logologo.gif" border="0" /></a>
<a href="#"><img src="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>
<!--
#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="logo.gif" border="0" /></a>
<a href="#"><img src="logo.gif" border="0" /></a>
<a href="#"><img src="logo_logo.gif" border="0" /></a>
<a href="#"><img src="logologo.gif" border="0" /></a>
<a href="#"><img src="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>
- 浏览: 96616 次
- 性别:
- 来自: 北京
最新评论
-
_大大大雄:
关于这个应用, 有些东西想要请教下您行么?
jsp 权限过滤器的应用 -
jptiancai:
博主,看了博客,收获很多,这个例子运行的时候,会报下面的错误: ...
jsp 权限过滤器的应用
发表评论
-
AMD 和 CMD 的区别有哪些?
2013-12-25 11:37 684AMD 是 RequireJS 在推广过程中对模块定义的规范化 ... -
IE6 PNG背景透明解决方法(汇总)
2013-10-31 18:25 615IE6 PNG背景透明解决方法(汇总) 方法一: IE6 ... -
禁用上下文菜单事件 自定义显示上下文、事件委托、悬浮显示弹出层
2013-10-23 11:00 915<!DOCTYPE html ><html ... -
用uploadify 仿做微博多个图片上传
2013-09-16 19:01 839多个文件图片上传,上传后即可显示照片 -
级联省市区地下拉列表
2013-09-03 18:13 3671<html><head><mce ... -
级联下拉列表选择框日期
2013-09-03 14:37 2833<html><head><tit ... -
IE 浏览器和firefox 绑定事件的异同
2013-08-01 14:58 648IE 与火狐浏览器在事件的区别IE 支持绑定事件为attac ... -
数据分页显示,附带每个页面的选中状态
2013-07-12 16:42 879今天有人问我怎么在分页当中,附带数据列表中的复选框选择状态 ... -
CSS 图片水平垂直居中于DIV
2013-05-28 15:55 771对于前端工作人员,可 ... -
javascript 表达式函数、声明函数的区别,及其执行顺序
2013-05-21 15:47 670今天闲来之际,做了一 ... -
解决弹出层水平垂直居中 兼容问题
2013-05-16 15:58 932<!DOCTYPE html PUBLIC " ... -
三谈iframe 自适应高度
2013-05-13 14:14 726为什么是三谈为什么是 ... -
javascript 动态创建页面元素兼容问题
2013-04-01 16:57 1072为了提高网页的加载速度,减少服务器的压力。我们会采用java ... -
悬浮显示隐藏
2013-02-27 19:23 761<!DOCTYPE html PUBLIC " ... -
javascript 跨域
2013-02-26 18:32 742这里分两类情况:一 ... -
javascript 数组排序
2013-02-25 17:45 885<!DOCTYPE html PUBLIC " ... -
javascript 二交叉查找
2013-02-25 17:37 721<!DOCTYPE html PUBLIC " ... -
兼容各个浏览器的圆角插件
2013-02-22 15:05 1156看看如何调用:1、在你的网页加载 PIE.js 脚本。注意,用 ... -
窗口大小
2013-02-18 15:18 681<!DOCTYPE html PUBLIC " ... -
窗口位置
2013-02-18 15:17 797<!DOCTYPE html PUBLIC " ...
相关推荐
本源代码收集了一些常用的网页图片滚动,无缝滚动,效果很平滑,包括上下左右四个方向的滚动,或许你现在用不上这些代码,不过先收藏起来以备后用哦。
使用js实现对table表格的向上(可自定义方向)无缝滚动效果。
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 Marquee 标签,但比 ...它可以应用于任何 Web 元素,同时它可以设置不同的滚动方向(左右上下)、滚动速度、鼠标悬停暂停、鼠标拖动、加载 xml 文件等。
文字上下左右移动,可以任意控制方向,绝对好用
本源代码收集了一些常用的网页图片滚动,无缝滚动,效果很平滑,包括上下左右四个方向的滚动,或许你现在用不上这些代码,不过先收藏起来以备后用哦。
滚动大图(上下左右和对角线方向)
无缝横向滚动文字图片特效,无缝横向滚动图片,文字上下滚动的特效代码,可用左右键控制滚动方向.
jq实现图片滚动(平滑滚动)代码,让图片无缝循环滚动,可点击文字控制滚动方向,不限图片数量的上下图片滚动,支持IE8以下浏览器,IE9和火狐及Chrome下有问题,也希望JS达人可修正代码哦。
一个可以代替Marquee走马灯特效的图片滚动封装类,它可控制图片做无缝循环滚动,可以在上下左右四个方面滚动,而且具备丰富自定义设置功能。它的特点: 横向、纵向滚动格式调整 (解决横向滚动换行的问题,无需特殊...
js 图片文字滚动特效,文字左右上下无缝滚动。图片左右上下无缝滚动,可调节滚动速度,滚动方向。图片大小随意放缩
无缝横向滚动文字图片特效,无缝横向滚动图片,文字上下滚动的特效代码,可用左右键控制滚动方向.
本文整理汇总了JavaScript实现图片滚动的常见代码,可以实现向上下左右四个方向的无缝滚动的效果,这是前端设计开发时常用的一个图片特效,你可只用其中的一种滚动效果。 具体的实例代码如下: <!DOCTYPE ...
支持上下左右,淡入淡出,滚动时间设置,动画时间设置,鼠标经过是否停止设置 默认配置参数可修改 $(“.content”).easysroll({ //默认配置参数 direction: “left”, //滚动方向 left(向左)right(向右) top...
51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery...
51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery贴图...
51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery贴图...
51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery贴图...
51.jquery简单控制上下、左右四方向滚动的特效插件下载 52.jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53.jquery网站顶部滑动广告插件 54.jquery自动播放图片滚动漂浮式效果的示例 55.jquery贴图...
liMarquee 是一款基于 jQuery 的无缝滚动插件,...它可以应用于任何 Web 元素,包括文字、图像、表格、表单等元素,同时它可以设置不同的滚动方向(左右上下)、滚动速度、鼠标悬停暂停、鼠标拖动、加载 xml 文件等等。
14.1.1 文字向上不间断无缝滚动 14.1 12灼热的文字(IE) 14.1.3 标题栏文字循环向左移动 14.1.4 各种形式输出文字 14.1.5 跑马灯式说明文字 14.1.6 跳动的文字 14.2 图片特效 14.2.1 线性幻灯片 ...