纯js代码实现手风琴特效
我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢?
但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型项目中就会显现出来,下面我用原生js实现一个简单的手风琴效果效果。
HTML代码如下
结构非常简单就5个li盒子,js代码会渲染图片上去
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html> CSS代码如下:
宽高请自行设置,我之前做的这个项目图片是1226*446的图片,所以宽度和高度是按照当时做项目的时候设置的,如果你想放置其他尺寸的图片请按照实际情况设施...
ul {
list-style: none
} * {
margin: 0;
padding: 0;
} div {
width: 1150px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
} div li {
width: 240px;
height: 400px;
float: left;
/*background-image: url(images/1.jpg);*/
} div ul {
width: 1300px; } 下面是重头戏啦,请欣赏原生js(相信很多人都快忘了原生js吧)
//找人
var box = document.getElementById("box");
var ul = box.children[0];
var lis = ul.children;
//循环遍历 lis 绑定背景图
for (var i = 0; i < lis.length; i++) {
lis[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
//给每一个li注册鼠标经过事件 鼠标经过后要排他
lis[i].onmouseover = function () {
//干掉所有人 让所有人的宽度 渐渐地 变为100
for (var j = 0; j < lis.length; j++) {
animate(lis[j], {"width": 100});
}
//留下我自己 让我的宽度 渐渐地 变为800
animate(this, {"width": 800});
};
} //鼠标离开box 所有的li宽度 渐渐地 变为240
box.onmouseout = function () {
for (var i = 0; i < lis.length; i++) {
animate(lis[i], {"width": 240});
}
}; //jQuery中有animate动画函数,下面是实现的原理,虽然没有jQ的强大,但是基本的效果实现还是没有问题的
function animate(obj, json) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//先假设 这一次执行完 所有的属性都到达目标了
var flag = true;
for (var k in json) {
var leader = parseInt(getStyle(obj, k)) || 0;
var target = json[k];
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader + "px";
//if (leader === target) {
// clearInterval(obj.timer);
//}
console.log("代码还在运行");
if (leader != target) {
flag = false;//告诉标记 当前这个属性还没到达
}
}
//如果此时仍然为true 就说明真的都到达了
if (flag) {
clearInterval(obj.timer);
}
}, 15);
}
//全部属性都到达目标值才能清空
function getStyle(obj, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj, null)[attr];
} else {
return obj.currentStyle[attr];
}
} 上面就是所有的代码,你可以找五张图片试一试。 实际开发中效率还是最重要的,因为现在浏览器的性能已经非常好了,所以jQ的有些缺点完全可以忽略不计啦,并且jQ的兼容性真的是不错的,能节省开发人员很多的时间和精力,我也很支持在工作项目
中用jQ来开发,可是作为一个真正的前端技术人员,你要时刻了解底层代码的实现,这样随着科技的发展,你也不会落于人后。 希望对你有帮助。 --不青春
纯js代码实现手风琴特效的更多相关文章
- 城市连动纯js代码DEMO
前台代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...
- 可重复使用Tab切换代码和纯js代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 纯js和纯css+html制作的手风琴的效果
一:纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> ...
- 纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
- JavaScript--动态添加元素(纯js书写table并删除数据)
本文是对上一篇博文的扩展,用js书写表格,并添加和删除数据,详细代码解释见代码页. 对于文中使用的script脚本函数,下载地址如下:https://pan.baidu.com/s/13OFnj7nc ...
- EazyUI主页框架搭建纯JS样例
採用Jfinal+EazyUI 执行起来就好能够了 眼下还未增加后台代码 纯JS代码搭建的一个二级菜单+主页 客户换肤, 给使用EazyUI的新人一个高速可用的JS 搭建界面 也给自己保存下 界面 ...
- 纯js分页代码(简洁实用)
纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...
- 纯JS焦点图特效(可一个页面多用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...
随机推荐
- java 中 return 的两种常见的用法
一:return语句总是用在方法中,有两个作用: 一个是返回方法指定类型的值(这个值总是确定的), 一个是结束方法的执行(仅仅一个return语句). 二:实例1 -- 返回一个String priv ...
- Android Launcher 3 简单分析
最近在学习Android Launcher的相关知识,在github上找到可以在Android studio上编译的Launcher 3代码,地址:https://github.com/rydanli ...
- Android pull解析xml文件
本文介绍android中使用pull来解析xml文件 先自己写一个xml文件,存一些天气信息 <?xml version="1.0" encoding="UTF-8 ...
- 在SQL中使用CLR提供基本函数对二进制数据进行解析与构造
二进制数据包的解析一般是借助C#等语言,在通讯程序中解析后形成字段,再统一单笔或者批量(表类型参数)提交至数据库,在通讯程序中,存在BINARY到struct再到table的转换. 现借助CLR提 ...
- IntelliJ IDEA 使用Git怎样记住密码和忘记密码的方法
IntelliJ IDEA 使用Git怎样记住密码的方法 1.当使用Ctrl+T进行更新时,弹出密码框(此时不要输入任何字符),直接点"Cancel" 2.略等二三秒,会弹出新的密 ...
- [20140117]疑似checkpoint堵塞数据库连接
注:这个说法是不成立的,问题已经解决,但是无法正确的定位到具体什么原因:[20140702]奇怪的应用程序超时 背景: 开发通过应用程序的日志发现间歇性的出现,数据库连接超时 原因: 只能大概猜测,没 ...
- 学C#你应该熟练使用ILDasm和Reflector【带视频教程】
我们在学习C#的时候通常都会多多少少接触ILDasm和Reflector,这两样工具让我们对C#的理解不会只停留在编译器这个层面 上,而是让我们更深入的穿透编译器.这篇也是希望对IL和Reflecto ...
- Servlet/JSP-04 JSP基础
一. JSP概述 Servlet 是 Java 程序,可以在 Java 程序内部返回一段 HTML 代码(字符串形式)到浏览器,供浏览器解释展示. JSP 是一种脚本语言,在 HTML 内部通过嵌入 ...
- Tomcat源码分析之—组件启动实现分析
Tomcat由多个组件组成,那么Tomcat是怎么对他们的生命周期进行管理的么,这里将从Tomcat源码去分析其生命周期的实现: Bootstrape类为Tomcat的入口,所有的组件够通过实现Lif ...
- wc
$wc [-lwc] filename统计的文件的信息,缺省参数会按照lwc的顺序输出全部三种信息 -l统计文件的行数 -w统计文件的字数,字以空格和换行符分隔 -c统计文件的字符数,包括换行等 例子 ...