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基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 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
怎样在UNIX系统下安装php3
2006/10/09 PHP
SMARTY学习手记
2007/01/04 PHP
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
jquery.validate分组验证代码
2011/03/17 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
js动态切换图片的方法
2015/01/20 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
Python中元组,列表,字典的区别
2017/05/21 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
应届毕业生应聘自荐信
2013/12/07 职场文书
员工培训心得体会
2013/12/30 职场文书
关于工资低的辞职信
2014/01/14 职场文书
旷课检讨书2000字
2014/01/14 职场文书
房地产财务管理制度
2014/02/02 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
通报表扬范文
2015/01/17 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers