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 相关文章推荐
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
jQuery 事件的命名空间简单了解
Nov 22 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
Vue异步加载about组件
Oct 31 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
微信小程序基础教程之echart的使用
Jun 01 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批量上传的实现代码
2013/06/09 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
python怎么判断模块安装完成
2020/06/19 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
编码实现字符串转整型的函数
2012/06/02 面试题
竞选演讲稿范文
2013/12/28 职场文书
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
运动会表扬稿大全
2014/01/16 职场文书
文明家庭先进事迹材
2014/01/27 职场文书
项目经理任命书
2014/06/04 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
质检员岗位职责
2015/02/03 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript