javascript实例学习之八——无缝切换效果
无缝切换在网站的很多地方都有涉及，比如轮播图等。
基本思路：
1）将可视窗当前的元素复制，依次添加为ul中的子元素
2）改变ul整体的left取值（负的窗口值），动画缓动至想要的位置
3）将原视窗（已被复制）的各个li删除
4）将ul的left取值重新调整为0
实现的html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style>
*{margin:;padding: ;box-sizing:border-box;}
div{width:480px;height:150px;border:5px solid #; margin-left:300px; position: relative;}
ul{ overflow: hidden; position: absolute; left: ;}
ul li{width:150px; height:150px; background:blue;float:left;margin-right:10px;list-style: none; color:white; font-size: 34px;text-align: center;}
</style>
</head>
<body>
<div id="div1">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<button id="btn">切换</button>
<script src="./commonJs/tool.js"></script>
<script src="./commonJs/base.js"></script>
<script src="./usualEffects/js/mySwitch.js"></script>
</body>
</html>
无缝切换html代码
js代码：
$(function() {
];
var aLis = document.getElementsByTagName('li');
].offsetWidth + ;
;
var showWidth = showNum * oneSize;
var btn = document.getElementById('btn');
var flag = true;
function setUlWidth() {
var sumWidth = aLis.length * oneSize;
console.log('sumWidth:' + sumWidth);
oUl.style.width = sumWidth + 'px';
}
setUlWidth();
btn.addEventListener('click', function() {
//为了防止动画累加，设置flag参数，只有当上次动画结束之后，才可能开始下一次动画
if (flag) {
flag=false;
; i < showNum; i++) {
//将前面showNum个元素复制，粘贴到列表后面
var cloneNode = aLis[i].cloneNode(true);
oUl.appendChild(cloneNode);
setUlWidth();
}
$(oUl).animate({ 'left': -showWidth + 'px' }, function() {
//动画结束之后的回调
//删除添加的元素
; k < showNum; k++) {
]);
}
//将ul的left值复原
;
flag=true;
});
}
}, false);
});
无缝切换js代码
javascript实例学习之八——无缝切换效果的更多相关文章
- JavaScript实现多栏目切换效果
效果: 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" ...
- JavaScript 实现 标签页 切换效果
JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...
- javascript马赛克遮罩图片切换效果:XMosaic.js(转)
新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼 ...
- javascript 多图无缝切换
思路只要是ul移动前,首先将当前显示的li克隆岛ul最后,当每次运动执行完毕后,再将前面的li删除,如此循环. <!DOCTYPE html> <html> <head& ...
- 使用javascript实现图片上下切换效果并且实现顺序循环播放
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- 无JavaScript实现选项卡轮转切换效果
CSS: .box{width:200px; height:100px; border:1px solid #ddd; overflow:hidden;}.list{width:200px; he ...
- javascript小例子：實現四方向文本无缝滚动效果
实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...
- [前端] html+css+javascript 实现选项卡切换效果
用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...
随机推荐
- Twitter Storm中Bolt消息传递路径之源码解读
本文初次发表于storm-cn的google groups中,现以blog的方式再次发表,表明本人徽沪一郎确实读过这些代码,:). Bolt作为task被executor执行,而executor是一个 ...
- MySQL binlog-do-db选项是危险的
很多人通过 binlog-do-db, binlog-ignore-db, replicate-do-db 和 replicate-ignore-db 来过滤复制(某些数据库), 尽管有些使用, ...
- Java中的匿名对象
匿名对象就是没有明确给出名字的对象.一般匿名对象只使用一次,而且匿名对象只在堆内存中开辟空间,而不存在栈内存的引用. 一个普通的常量字符串就可以表示一个匿名String对象. 比如可以 int len ...
- html5之canvas初解
<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 必须使用脚本来完成实际的绘图任务. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属 ...
- extjs MVC模式的个人看法
针对一个后台管理页面是mvc模式,后台也是mvc模式下的项目,要怎么去熟悉呢? 首先以我个人的认解,先从后台的管理界面来看,会有control,model,store,view:其中先看view的代码 ...
- postgressql安装
参考文章 FreeBSD10.0下ports安装postgresql9.4-server: http://download.csdn.net/detail/machen_smiling/8425613 ...
- HBase的架构以及各个模块的功能
一:整体架构 1.体系结构 2.物理模型 3.存储体系 regionserver->region->多个store(列簇)->一个memstore和多个storefile 4.HDF ...
- ArcGIS API for JavaScript开发环境搭建及第一个实例demo
原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...
- ArcGIS API for Silverlight 当DataGrid选中项时，地图聚焦弹出窗口，并可以播放音频文件
原文:ArcGIS API for Silverlight 当DataGrid选中项时,地图聚焦弹出窗口,并可以播放音频文件 先看效果图,然后上代码: <UserControl x:Class= ...
- linux 多个ssh key 登录远程主机
登录A主机使用分配的sshkey需要指定特定的key,ssh -i ~/.ssh/xxx_id_rsa_privatekey username@host , 指定key后登录提示: Agent ...