js 无缝滚动效果学习
<!DOCTYPE html>
<html>
<head>
<title>无缝滚动测试</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="../dist/zepto.js"></script>
</head>
<body>
<style type="text/css">
#ScrollContainer{
overflow: hidden;
width: 500px;
}
#Container{
float: left;
width: 800%;
}
#detail{
float: left;
}
#detailview{
float: left;
}
</style>
<div id="ScrollContainer">
<div id="Container">
<div id="detail">
<a href="#"><img src="http://www.codefans.net//jscss/demoimg/wall_s1.jpg" border="0" /></a>
<a href="#"><img src="http://www.codefans.net//jscss/demoimg/wall_s2.jpg" border="0" /></a>
<a href="#"><img src="http://www.codefans.net//jscss/demoimg/wall_s3.jpg" border="0" /></a>
<a href="#"><img src="http://www.codefans.net//jscss/demoimg/wall_s4.jpg" border="0" /></a>
<a href="#"><img src="http://www.codefans.net//jscss/demoimg/wall_s5.jpg" border="0" /></a>
<a href="#"><img src="http://www.codefans.net//jscss/demoimg/wall_s6.jpg" border="0" /></a>
</div>
<div id="detailview"></div>
</div>
</div>
<script>
(function(Scroll,Container,detail){ //nowmyMarquee.run(); })("ScrollContainer","Container","detail") function myMarquee(Scroll,Container,detail){
console.log(this);
var that=this;
this.speed=10;
this.tabScroll=document.getElementById(Scroll);
this.tabdetail=document.getElementById(detail);
this.tabdetailView=document.getElementById(detail+'view');
this.tabdetailView.innerHTML=this.tabdetail.innerHTML;
this.Marquee=function(){
if(this.tabdetailView.offsetWidth-this.tabScroll.scrollLeft<=0)
{
//一轮滚动结束需要充值
this.tabScroll.scrollLeft-=this.tabdetail.offsetWidth;
}
else
{
this.tabScroll.scrollLeft++;
}; };
this.tabdetail.onmouseover=function(){
clearInterval(that.MyMar)
};
this.tabdetail.onmouseout=function(){
that.MyMar=setInterval(
function(){ that.Marquee.apply(that)}
, that.speed); }
this.run=function(){
this.MyMar=setInterval(
function(){ that.Marquee.apply(that)}
, that.speed);
}
this.run(); }
var nowmyMarquee=new myMarquee("ScrollContainer","Container","detail") </script>
</body>
</html>
offsetWidth 和 scrollLeft 的应用 和子容器800%与父容器的使用
参考 http://blog.csdn.net/xuantian868/article/details/3116442
obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素。
3.scrollLeft,scrollTop:
如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.
对于不可以滚动的元素,这些值总是0.
scrollLeft 主要用来定位子容器在父容器中的定位,控制子容器的位置
js 无缝滚动效果学习的更多相关文章
- js实现简单易用的上下无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- liMarquee演示12种不同的无缝滚动效果
很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...
- 手写JS无缝滚动插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 信息无缝滚动效果marquee
横向滚动.纵向滚动 1. 解决滚动的空白 向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动 上下滚动实现无缝滚动1. innerHTML ...
- 应用JavaScript搭建一个简易页面图片无缝滚动效果
页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
- js无缝滚动原理及详解[转自刹那芳华]
刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后 ...
- 用js实现图片的无缝滚动效果
实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...
- javascript小例子:實現四方向文本无缝滚动效果
实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...
- jq封装-无缝滚动效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
- (转)Javascript本地存储小结
转自:https://i.cnblogs.com/EditPosts.aspx?opt=1 以下是原文: 1. 各种存储方案的简单对比 Cookies:浏览器均支持,容量为4KB UserData:仅 ...
- ecshop 后台时间调用
<script type="text/javascript" src="../js/calendar.php?lang={$cfg_lang}">& ...
- 程序代码中退出函数exit()与返回函数return ()的区别
程序代码中退出函数exit()与返回函数return ()的区别 exit(0):正常运行程序并退出程序: exit(1):非正常运行导致退出程序: return():返回函数,若在主函数 ...
- Yii2中如何将Jquery放在head中的方法
原文地址: https://my.oschina.net/kenblog/blog/547602 方法一(推荐):针对jquery进行components配置,指定Yii2自带jquery自带资源出现 ...
- Bootstrap学习------按钮
Bootstrap为我们提供了按钮组的样式,博主写了几个简单的例子,以后也许用的到. 效果如下 代码如下 <!DOCTYPE html> <html> <head> ...
- jQuery验证控件jquery.validate.js使用说明
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- MEF 根据配置注入Service
有这样的场景 : 现在一个接口有很多种实现类,需要根据配置,来确定确定调用哪个具体的实现类.这样使得软件扩展性大大提高 在MEF可以通过ExportMetadata 来实现这样的效果. 1.现在我们建 ...
- linux shell脚本查找重复行/查找非重复行/去除重复行/重复行统计
转自:http://blog.sina.com.cn/s/blog_6797a6700101pdm7.html 去除重复行 sort file |uniq 查找非重复行 sort file |uniq ...
- STM32F103之DMA
一.背景: 需要使用STM32的DAC,例程代码中用了DMA,对DMA之前没有实际操作过,也很早就想知道DMA到底是什么,因此,看了一下午手册,代码和网上的资料,便有了此篇文章,做个记录. 二.正文: ...
- window下安装zookeeper
本地zookeeper安装(win7)下载zookeeper-3.3.6.zip文件解压zookeeper-3.3.6.zip文件到d:盘在D:\zookeeper-3.3.6\conf下增添 zoo ...