js以及jquery实现手风琴效果


Posted in Javascript onApril 17, 2020

最近又复习了jQuery的知识,既然jQuery是javascript的一个库。jQuery能做到的事情javascript也能做到。因此用这两种方法实现了图片手风琴效果。

按照惯例,还是上代码吧,因为代码里有我的注释也就相当于解释了!

先看一下javascript的代码吧:

div布局:注意哦,里面的图片我们用js代码生成

<div id="box">
 <ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
</div>

css样式:

<style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }
 ul{
 list-style: none;
 }
 #box{
 width: 1150px;
 height: 400px;
 margin: 50px auto;
 border: 1px solid red;
 overflow: hidden;
 }
 #box ul{
 width: 1300px;
 }
 #box ul li{
 width: 240px;
 height: 400px;
 float: left;

 }
 </style>

要写js代码了。这里封装了一个完整的运动框架(我个人 觉得哈,你可以继续完善,不过你要告诉我,我也学习一下!)

/*
 * 实现动画的步骤:
 1.怎样得到当前的样式 封装一个函数 getStyle()
 2.步长的计算 用(目标位置 - 当前的样式) / 10
 3. 缓动动画原理: 盒子本身的样式 + 步长(不断变化的)
 */
/*
 * css设置透明度,一般在ie中用的是filter:alpha(opacity=0);
而在firefox中,一般就是直接使用opacity:0
*/
// 多个属性的运动框架 以及添加回调函数
function animate(obj,json,fn){ // 目标obj json 属性:属性值 fn回调函数
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 var flag = true;// 用来判断是否停止定时器 
 // 遍历json
 for (var attr in json) { //attr 属性 json[attr]值
 var curStyle = 0;
 if (attr == "opacity") {
 curStyle = parseInt(getStyle(obj,attr)*100);
 } else{
 curStyle = parseInt(getStyle(obj,attr));// 获得数值
 }
 // 得到步长 目标位置就是json[attr]
 var step = (json[attr]-curStyle) / 10;
 step = step > 0 ? Math.ceil(step) :Math.floor(step);

 // 判断透明度
 if (attr == "opacity") { // 判断用户有没有输入opacity
 if ("opacity" in obj.style) { 
  obj.style.opacity = (curStyle + step) / 100;
 } else{
  obj.style.filter = "alpha(opacity="+(curStyle +step)+")";
 }

 } else if(attr == "zIndex"){
 obj.style.zIndex = json[attr];
 } else{
 obj.style[attr] = curStyle +step +"px";
 }
 // 判断是否已经都到了目标位置 只要其中一个不满足条件 就不应该停止定时器
 if (curStyle != json[attr]) {
 flag = false;
 }
 }
 // 判断定时器条件 是否该停止了
 if (flag) {
 clearInterval(obj.timer)
 // 当定时器停止后,动画也就结束了.如果有回调函数就执行回调函数
 if(fn){
 fn();
 }

 }
 },30);
}

// 封装函数 得到属性
function getStyle(obj,attr) { // 谁的 那个属性
 if(obj.currentStyle) // ie 等
 {
 return obj.currentStyle[attr]; // 返回传递过来的某个属性
 }
 else
 {
 return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器
 }
}

接着我们在js里面引入我们写的框架

<script src="animate.js"></script>

接下来,写js代码

<script>
 window.onload = function(){
 var box = document.getElementById("box");
 var lis = box.children[0].children;
 for (var i = 0; i < lis.length;i++) {
  lis[i].style.backgroundImage = "url(images/"+(i+1)+".jpg)";
  lis[i].onmouseover = function(){
  for (var j = 0; j < lis.length;j++) {
  animate(lis[j],{width:100});
  }
  animate(this,{width:800});
  }
  lis[i].onmouseout = function(){
  for (var k = 0; k < lis.length;k++) {
  animate(lis[k],{width:240});
  }
  }
 }
 }
</script>

好啦,这样就完成了,具体效果你自己动手看看吧。完整的下载地址为js版本的手风琴效果

写完了js,发现代码量好多啊,看看jquery代码,哦买嘎,切记一定要先引入jQuery的包,再写代码哈!

<script src="jquery-1.11.1.min.js"></script>
 <script>
 $(function(){
 $("#box li").each(function(index,ele){
  $(ele).css("background","url(images/"+(index+1)+".jpg)");
 }).mouseenter(function(){
  $(this).stop().animate({width:800},500).siblings("li").stop().animate({width:100},500);
 }).mouseleave(function(){
  $("#box li").stop().animate({width:240},500);
 });
 });

 </script>

精简了好多。
来吧,我们的jQuery版本手风琴效果下载地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript结合css实现网页换肤功能
Nov 02 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
JS根据生日算年龄的方法
May 05 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
写jQuery插件时的注意点
Feb 20 #Javascript
Node.js获取前端ajax提交的request信息
Feb 20 #Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 #Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 #Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 #Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 #Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 #Javascript
You might like
PHP判断指定时间段的2个方法
2014/03/14 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
PHP缓冲区用法总结
2016/02/14 PHP
自制PHP框架之设计模式
2017/05/07 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
JavaScript 基础篇(一)
2012/03/30 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
python发送邮件实例分享
2017/07/28 Python
python 中的int()函数怎么用
2017/10/17 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
python中字符串内置函数的用法总结
2018/09/13 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
Python简易版图书管理系统
2019/08/12 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
测绘工程个人的自我评价
2013/11/10 职场文书
培训心得体会
2013/12/29 职场文书
档案接收函范文
2014/01/10 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python