js以及jquery实现手风琴效果

最近又复习了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版本手风琴效果下载地址

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

(0)

相关推荐

  • js实现可折叠展开的手风琴菜单效果

    本文实例讲述了js实现可折叠展开的手风琴菜单效果.分享给大家供大家参考.具体如下: 这是一款可折叠展开的菜单,手风琴菜单,运用CSS与JavaScript技术实现的合拢与伸展的网页菜单,代码简洁,来自老外的代码作品,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hidden-show-sfq-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH

  • JS实现的另类手风琴效果网页内容切换代码

    本文实例讲述了JS实现的另类手风琴效果网页内容切换代码.分享给大家供大家参考.具体如下: 这是一款以海贼王为题材的另类手风琴效果,用到三张背景图片,请顺着代码自已下载吧,多看看类似特效的编写思路,对于提高你的Js编程水平有不少帮助的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-sfq-web-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

  • js实现简单的手风琴效果

    效果图: 图(1)初始图 图(2)点击展开效果 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;font-size:12px;list-s

  • Html5 js实现手风琴效果

    使用H5实现横向的手风琴功能 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } div { width: 522px; height: 222px; margin: 50px auto; border:

  • 炫酷的js手风琴效果

    你一定用过书签,也一定给你的书本加过书签,那么你见过书签式的导航吗? 你一定见过手风琴,也一定知道弹奏手风琴时的它的外形变化,那么你见过手风琴式的导航吗? 如果没有,请往下看: 前面的话: 这篇博文先通过Javascript做一个简单的手风琴效果,让大家对手风琴效果有一定的了解:紧接着,我们换jquery做类似的手风琴效果.前面的两个例子都很简单,接下来要放大招了,我想用JQ或是原生的JS去做类似淘宝网中用到的手风琴效果.继续回到书签问题,既然JQ和JS都能实现那么炫酷的效果,我们用CSS3能不

  • 原生JS实现垂直手风琴效果

    效果如下: 图 (1) 展开前 图 (2) 展开后 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0; } .panel { width: 555px; height: auto; background-color: #333333; margin: 50

  • 原生js做的手风琴效果的导航菜单

    做好的手风琴效果如下,具体看代码:  html代码 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Accordion</title> <style> #accordion{ width:200px; } #accordion ul{ list-style: none; display:none; } .fir

  • 纯js+html和纯css+html制作手风琴效果

    本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下 一.纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> <head> <style> body{background: url('bg.gif') repeat;} ul,li,p{margin: 0px;padding: 0px;lis

  • JS实现仿QQ面板的手风琴效果折叠菜单代码

    本文实例讲述了JS实现仿QQ面板的手风琴效果折叠菜单代码.分享给大家供大家参考.具体如下: 这是一款简单实用的垂直导航菜单,有人把这种风格称为"手风琴"菜单,类似仿QQ面板的折叠菜单,鼠标放在任意一个菜单上,它会展开所属的二级菜单,很不错的选择,以前就分享过此类菜单,这次经过了代码优化升级,更人性化了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-qq-sfq-style-menu-codes/ 具体代码如下: <!

  • 纯js实现手风琴效果代码

    我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型项目中就会显现出来,下面我用原生js实现一个简单的手风琴效果效果. HTML代码如下 结构非常简单就5个li盒子,js代码会渲染图片上去 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&

随机推荐