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 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 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 inc文件使用的风险和注意事项
2013/11/12 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
原生js制作简单的数字键盘
2015/04/24 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
Python实现网站文件的全备份和差异备份
2014/11/30 Python
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
pytest中文文档之编写断言
2019/09/12 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
如何通过python实现人脸识别验证
2020/01/17 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
python实现自动打卡的示例代码
2020/10/10 Python
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
2014年预备党员学习两会心得体会
2014/03/17 职场文书
横店影视城导游词
2015/02/06 职场文书
《角的度量》教学反思
2016/02/18 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL