图片无缝上下滚动、无缝左右滚动
------------------------------------------------------------图片向上无缝滚动
<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.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_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.οnmοuseοver=function() {clearInterval(MyMar)};
tab.οnmοuseοut=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.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_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.οnmοuseοver=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.οnmοuseοut=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.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_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.οnmοuseοver=function() {clearInterval(MyMar)};
tab.οnmοuseοut=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.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.baidu.com/img/baidu_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.οnmοuseοver=function() {clearInterval(MyMar)};
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
转载于:https://www.cnblogs.com/cnzz84/archive/2011/04/19/4098826.html
图片无缝上下滚动、无缝左右滚动相关推荐
- html使用javascript实现图片滚动无缝拼接
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js图片滚动无缝衔接
js图片滚动无缝衔接 <style>*{margin:0;padding:0;}div{width:600px;height:200px;position:relative;border: ...
- 常用JS图片滚动(无缝、平滑、上下左右滚动)
常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 <head> <-----> </head> <body> <!--向下滚动代码开始--&g ...
- vue列表滚动(无缝衔接)插件分享--超好用
vue列表滚动(无缝衔接)插件分享–超好用 地址案例演示 1,下载 cnpm i vue-seamless-scroll 2,查看版本号(package.json)文件 3,在要用的组件页面引入 // ...
- uniapp 文字无缝从右到左滚动
uniapp 文字无缝从右到左滚动 欢迎使用ay-goLeft_r插件(正研究优化中) 最近有需求为:文字无缝左滚,整理插件代码如下: 1.ay-goLeft_r插件 可去uniapp插件市场的操作组 ...
- vue 轮播组件 vue-seamless-scroll简单用法/上下左右无缝滚动,单步滚动,以及支持水平方向的手动切换功能
一.vue-seamless-scroll是什么? vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样 ...
- jQuery新闻列表滚动(上下滚动、横向滚动、无缝滚动、停顿滚动)
自己搜的代码,亲测好使,可以根据自己的需要进行样式及js修改 <!doctype html> <html> <head><meta charset=" ...
- [css] 如何设置背景图片不随着文本内容的滚动而滚动?
[css] 如何设置背景图片不随着文本内容的滚动而滚动? 直接对div设置background:url不就好了嘛?上代码.<!DOCTYPE html> <html lang=&qu ...
- 图片轮播c语言,IOS开发之UIScrollView实现图片轮播器的无限滚动
IOS开发之UIScrollView实现图片轮播器的无限滚动 简介 在现在的一些App中常常见到图片轮播器,一般用于展示广告.新闻等数据,在iOS内并没有现成的控件直接实现这种功能,但是通过UIScr ...
- msclass 文字滚动_MSClass 图片/文字不间断滚动\间歇滚动\翻屏滚动类
/*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.65*\ 制作时间:2006-08-29 (Ver 0.5) 发布时间:2006-08-31 ...
最新文章
- unescape解密 php,php 版 模仿 js ,unescape函数解码,escape函数编码的方法
- 在BackTrack下基于MS08-067漏洞的渗透
- vlan之间互相访问_VLAN的划分和网络的配置实例
- Qt Creator测验Testing
- 《看聊天记录都学不会C语言?太菜了吧》(12)循环有多容易?你看一眼就怀...
- 大数据 ---(4)大数据驱动的金融业务创新(用户画像-数据架构-标签建模)
- python 批量网址 网页截图_python实现网页截图
- 原来这就是公文写作领导讲话稿模板(3)
- 解决“warning #188-D enumerated type mixed with another type”告警
- 2021年9款优秀的大数据可视化BI软件
- MySQL 支持表情字符
- 【API调用】人脸检测+人脸属性(旷视 / 百度)
- 使用mac电脑生成 icns图标
- 第一篇——胡咧咧之动漫素材如何最有效最快的查找下载,动漫网站有哪些?
- WeUI实现登录页面
- L0/L1/L2/无穷范数
- MAC下遨游经典版Adobe Flash过期处理方法
- 他山之石 | 知识图谱在美团推荐场景中的应用实践
- 网页播放视频没有进度条怎么可以实现倍速播放
- windows7开机壁纸_如何在Windows 7上修复黑色墙纸错误
热门文章
- Java多态案例分析
- 贝叶斯定理决策规则及Bayes思想总结
- VisualBox 克隆CentOS 7.6 后,ip,源,禁止root远程登录,主机,防火墙,ssh密钥登录
- iOS底层探索之dyld(上):动态链接器流程分析
- mysql inet_aton 与 inet_ntoa 方法
- 通过FD耗尽实验谈谈使用HttpClient的正确姿势 1
- C# 使用Log4Net记录程序日志
- 关于Apache与Nginx的优势比较
- Max Points on a Line@LeetCode
- vc ++ 如何做界面开发?