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中null与undefined分析
Jul 25 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
jQuery插件 selectToSelect使用方法
Oct 02 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
JS封装cavans多种滤镜组件
Feb 15 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
一个显示天气预报的程序
2006/10/09 PHP
PHP parse_url 一个好用的函数
2009/10/03 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
openPNE常用方法分享
2011/11/29 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
php中的静态变量的基本用法
2014/03/20 PHP
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
python读取excel表格生成erlang数据
2017/08/26 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
python十进制转二进制的详解
2020/02/07 Python
从python读取sql的实例方法
2020/07/21 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
python pymysql库的常用操作
2020/10/16 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
见习期自我鉴定
2014/01/31 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
先进个人评语大全
2015/01/04 职场文书
大连导游词
2015/02/12 职场文书
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers