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万安 ...
随机推荐
- NBOJv2 Problem 1009 蛤玮的魔法(二分)
Problem 1009: 蛤玮的魔法 Time Limits: 1000 MS Memory Limits: 65536 KB 64-bit interger IO format: %ll ...
- POJ 3321 Apple Tree(DFS序+线段树单点修改区间查询)
Apple Tree Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 25904 Accepted: 7682 Descr ...
- WEB项目web.xml文件中classpath: 跟classpath*:使用的区别
引用一篇很不错的文章:http://blog.csdn.net/wxwzy738/article/details/16983935 首先 classpath是指 WEB-INF文件夹下的classes ...
- PHP 设计模式 笔记与总结(7)适配器模式
① 适配器模式可以将截然不同的函数接口封装成统一的 API ② 实际应用举例:PHP 的数据库操作有 mysql,mysqli,pdo 三种,可以用适配器模式统一成一致.类似的场景还有 cache 适 ...
- PHP函数库(other)
PHP函数库(other) Session函数: session_abort — Discard session array changes and finish session session_ab ...
- 撑起大规模PHP网站的开源工具
撑起大规模PHP网站的开源工具 百万级PHP站点Poppen.de的架构 在 2011年11月27日 那天写的 已经有 3957 次阅读了 感谢 参考或原文 服务器君一共花费了54.510 ...
- QQ群笔记
uuid就好比你的名字,类似到了班级里,你的名字会被学号替代.同样的连接之后,uuid会被handle句柄替代. 问下CC2541串口用DMA接收的时候,调试程序时候发现,串口发一帧数据,进入两 ...
- endsWith和startsWith同样效果其他形式的写法(2016.1.12)
//判断以什么开始startWith str = "abcdef"; //用其他的形式写的startsWith if(str.indexOf("abc")==0 ...
- Supesite 参数说明
supesite有人看到的是强大的功能,我看到的是坑爷的一些用法,第一次看到block,我晕了.对于参数一头雾水,下面收集了一些,备用吧. supesite标签调用参数详解 参数: blocktype ...
- a read only variable
SHOW VARIABLES LIKE '%FORMAT%' SET DATE_FORMAT ='%Y-%m-%d' [SQL]SET DATE_FORMAT ='%Y-%m-%d' [Err] 12 ...