全国咨询热线:18720358503

秦皇岛小程序制作_js以及jquery完成手风琴效果

类别:行业新闻 发布时间:2021-01-12 浏览人次:

js以及jquery实现手风琴效果       这篇文章主要为大家详细介绍了js版本实现手风琴效果和jquery版本实现的手风琴效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

最近又复习了jQuery的知识,既然jQuery是javascript的一个库。jQuery能做到的事情javascript也能做到。因此用这两种方法实现了图片手风琴效果。

按照惯例,还是上代码吧,因为代码里有我的注释也就相当于解释了!

先看一下javascript的代码吧:

div布局:注意哦,里面的图片我们用js代码生成

 div id="box" 
 li /li 
 li /li 
 li /li 
 li /li 
 li /li 
 /ul 
 /div 

css样式:

 style type="text/css" 
 margin: 0;
 padding: 0;
 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,发现代码量好多啊,看看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版本手风琴效果

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


推荐阅读

秦皇岛小程序制作_js以及jquery完成手风琴效果

js及其jquery完成手风琴实际效果 本文关键为大伙儿详尽详细介绍了js版本号完成手风琴实际效果和jquery版本号完成的手风琴实际效果,原文中实例编码详细介绍的十分详尽,具备一...

2021-01-12
微信小程序挣钱方法_AngularJS完成页面定时改写

AngularJS完成网页页面定时执行更新 最先大家掌握到AngularJS中$interval能够用于解决间歇性解决一些事儿,那麼大家的间歇性更新就应用interval来完成。$interval应用方式: 1、起动一个...

2021-01-12
做好网站的用户体验排名才会有所上升

您的部位: > 新闻报道新闻资讯 > 企业网站建设 > 搞好网站的客户感受排行才会出现所升高说到客户感受,大家都应当了解,假如一个网站沒有一个好的客户感受,即便总流量非常大,...

2021-01-12
小程序的八点误区_JavaScript纯色二维码变成彩色二

JavaScript单色二维码变为五颜六色二维码 本文关键为大伙儿详尽详细介绍了JavaScript单色二维码变为五颜六色二维码的计划方案,原文中实例编码详细介绍的十分详尽,具备一定的参...

2021-01-12
重庆天禾仁生物科技有限公司

我国十二五重特大产业链化新项目;我国环境卫生部、我国中医学药管理方法局关键维护公司;国务院办公厅十二五整体规划重特大民生工程工程项目 一九九八年创...

2021-01-12
微信小程序游戏模板_JS完成简易的图片拖拽排序

JS完成简单的照片拖动排列案例编码 本文关键详细介绍了JS完成简单的照片拖动排列案例编码,网编感觉挺好的,如今共享给大伙儿,也给大伙儿做下参照。一起追随网编回来看一...

2021-01-12
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信