marquee图片无缝拼接滚动
marquee图片无缝滚动
先了解一下对象的几个的属性：
innerHTML: 设置或获取位于对象起始和结束标签内的 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.ο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.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.ο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.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.ο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.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.οnmοuseοver=function() {clearInterval(MyMar)};
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
marquee图片无缝拼接滚动相关推荐
- html的动画效果实现无限轮播,jQuery动画效果实现图片无缝连续滚动
本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下 效果图如下: 一.HTML代码 1. id为container的div是最外层的包装,用来控制滚动 ...
- 产品图片无缝水平滚动效果代码
产品图片无缝水平滚动效果代码: 在众多的网站都有这样的效果,那就是产品图片可以不间断的无缝滚动,效果挺美观的,也给静态的页面增加了几分动感,也便利了浏览者查看产品,算是比较好的效果吧,下面就介绍一下如 ...
- 网页图片无缝循环滚动html代码
图片循环滚动代码 图片无缝滚动代码 先介绍一下它的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通 ...
- ae图片无缝循环滚动_HTML图片滚动
HTML图片无缝滚动鼠标悬停 <!DOCTYPE html> <html> <head><title>无缝滚动</title> </h ...
- 图片无缝拼接 html,snapseed如何无缝拼接图片
snapseed这款软件许多小伙伴都在使用,里面有许多的功能相信许多小伙伴还不知道如何使用吧,今天小编给大家带来的是如何使用snapseed无缝拼接图片. snapseed无缝拼接图片教程 1.首先我 ...
- 关于图片无缝拼接的学习(PTGui)
一.简介 在用到单反.无人机.手机等拍照工具,需要无缝拼接. 二.下载 官网:http://www.ptgui.com/download.html 其他:http://pan.baidu.com/sh ...
- js基础练习---图片无缝左右滚动效果（主要以复制删除为主）
昨天闲来没事 看了下图片效果 发现这个方法j 就自己模仿下 上代码 当中有很多的纰漏 请大神们多多指教一二? <script type="text/javascript" ...
- 图片如何无缝拼接？这四个功能让你自由拼图，别错过
分享4个好用的图片拼接工具,支持图片无缝拼接.宫格拼图等功能,日常的拼图需求几乎都可以满足! 1.图片拼接 一个在线工具箱网站,它里面包含了很多小工具可以使用,在图形图像中就有图片拼接的功能可以使用, ...
- vue-seamless-scroll无缝循环滚动时二轮图片不渲染
关于使用vue-seamless-scroll实现图片无缝循环滚动时出现第二轮图片需要第一轮图片滚动结束后才能渲染出来的问题. 1.我遇到的问题很清楚,就是图片应该无缝循环滚动,但是必须得等前一轮图片 ...
最新文章
- 机器学习笔记：向量自回归模型VAR
- Unity shader图集Atlas下的UV坐标归一化转换
- 现代软件工程 作业汇总
- AOP Aspect Oriented Programming 面向切面编程 Spring
- oracle字段枚举值,E.1.9 结构、联合、枚举和位字段 (G.3.9)
- ubuntu下jmxtrans 安装
- C++ concurrent_queue::try_pop 方法
- java 16进制_JAVA 十六进制与字符串的转换
- html reset 无效,HTML中的input type=reset标签失效(不起作用)的可能原因。
- 麦氏细菌浊度分析仪的校准物质选择
- 我国期货市场发展潜力和方向
- 徐耀赐：道路安全——交通安全会议整理稿（1）
- 转载：16种鲜鱼的做法
- 计算机基础教学能力比赛教案,全国“XX杯”说课大赛计算机应用基础类优秀作品：Word图文混排教案...
- BOM物料清单及生产计划的分解
- 避坑：twilio+python+电话现在不可以使用（大陆）
- e4a数据库mysql中间件_[e4a同步内陆数据库至mysql]？确立一个中间件毗邻数据库
- python爬虫——爬取拉勾上的职位信息
- GeForce MX150相对应的NVIDIA CUDA版本_性能放心了：NVIDIA公版RTX 30系显卡设计频率可达2.2GHz...
- linux口令长度,Linux 的口令时效机制
热门文章
- 程序员的1024|我学开发这一年|长路漫谈
- 文献阅读：DeepLigand: accurate prediction of MHC class I ligands using peptide embedding
- Nginx/PHP安装
- 【转载】华为荣耀V9手机如何设置WiFi热点共享
- 7Z命令在linux下的使用
- Apollo 客户端日志抛异常 c.c.f.a.i.RemoteConfigLongPollService : Long polling failed, will retry ...
- SP91 未知唤醒源日志
- 前端开发如何获取视频第一帧作为封面
- android 8.0预装APK为可卸载
- QSFP-DD封装有何优势？800G光模块是否会沿用QSFP-DD封装？