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 相关文章推荐
浮动的div自适应居中显示的js代码
Dec 23 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 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+MYSQL的文章管理系统(一)
2006/10/09 PHP
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
php session应用实例 登录验证
2009/03/16 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
Javascript变量函数浅析
2011/09/02 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
在Django中使用Sitemap的方法讲解
2015/07/22 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
python生成带有表格的图片实例
2019/02/03 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
Python如何实现机器人聊天
2020/09/10 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
家长对孩子评语
2014/01/30 职场文书
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
加薪申请报告范本
2015/05/15 职场文书
民间借贷被告代理词
2015/05/23 职场文书
致运动员的广播稿
2015/08/19 职场文书
2016教师节问候语
2015/11/10 职场文书
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android