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


Posted in Javascript onSeptember 08, 2015

本文实例讲述了JS实现的另类手风琴效果网页内容切换代码。分享给大家供大家参考。具体如下:

这是一款以海贼王为题材的另类手风琴效果,用到三张背景图片,请顺着代码自已下载吧,多看看类似特效的编写思路,对于提高你的Js编程水平有不少帮助的。

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>海贼王</title>
<style type="text/css">
body{margin:0px;padding:0px;overflow:hidden;background:#151515;}
#box{width:710px;height:350px;padding:2px 0 2px 2px;margin:210px auto;background:#111;}
#box ul{margin:0px;padding:0px;float:left;}
#box li{width:75px;height:350px;float:left;display:inline;margin-right:2px;overflow:hidden;list-style-type:none;position:relative;}
.pos1, .pos2, .pos3, .pos4, .pos5{width:75px;height:350px;float:left;text-decoration:none;}
.pos1 span, .pos2 span, .pos3 span, .pos4 span, .pos5 span{width:75px;height:350px;float:left;top:0px;left:0px;filter:alpha(opacity=10);opacity:0.1;overflow:hidden;position:absolute; text-decoration:none;}
.pos1 span.preview{background:url(images/bw.jpg) no-repeat;}
.pos1 span.img_pre{left:75px;background:url(images/color.jpg) no-repeat;}
.pos2 span.preview{background:url(images/bw.jpg) no-repeat -75px 0;}
.pos2 span.img_pre{left:75px;background:url(images/color.jpg) no-repeat -75px 0;}
.pos3 span.preview{background:url(images/bw.jpg) no-repeat -152px 0;}
.pos3 span.img_pre{left:75px;filter:alpha(opacity=100);opacity:1;background:url(images/color.jpg) no-repeat -152px 0;}
.pos4 span.preview{background:url(images/bw.jpg) no-repeat -228px 0;}
.pos4 span.img_pre{left:75px;background:url(images/color.jpg) no-repeat -228px 0;}
.pos5 span.preview{background:url(images/bw.jpg) no-repeat -303px 0;}
.pos5 span.img_pre{left:75px;background:url(images/color.jpg) no-repeat -303px 0;}
.inner {width:280px;height:310px;float:left;padding:20px;background:#fff;overflow:hidden;border-right:5px solid #f0f0f0; position:absolute;top:0px;left:75px;}
.inner h2{width:280px;height:60px;float:left;color:#555555;font-family:"微软雅黑";line-height:60px;font-size:18px;text-indent:10px;margin:0px;padding:0px;background:url(images/stripe_light.gif);}
.inner h3{width:280px;height:40px;float:left;color:#fff;font-family:"微软雅黑";line-height:40px;font-size:14px;text-indent:10px;margin:0px;padding:0px;background:url(images/stripe.gif);}
.inner p{width:260px;height:200px;float:left;color:#000;font-family:"微软雅黑";line-height:25px;font-size:12px;margin:0px;padding:0px 10px;}
</style>
<script type="text/javascript">
window.onload = function(){
 var oBox = document.getElementById('box');
 var aLi = oBox.getElementsByTagName('li');
 var aA = oBox.getElementsByTagName('a');
 var aPrev = getClass(oBox, 'preview');
 var aImg = getClass(oBox, 'img_pre');
 var i = 0;
 for(i=0;i<aA.length;i++){
  aA[i].index = i;
  aA[i].onclick = function(){
   for(i=0;i<aLi.length;i++){
    if(aLi[this.index].style.width != '400px')startMove(aLi[i], {width:75}, 5);
    startMove(aPrev[i], {opacity:10}, 5);
    startMove(aImg[i], {opacity:0, left:75}, 5);
   }
   if(aLi[this.index].style.width != '400px'){
    startMove(oBox, {width:710}, 5);
    startMove(aImg[this.index], {opacity:100, left:0}, 5);
    startMove(aLi[this.index], {width:400}, 5);
   }else{
    startMove(aLi[this.index], {width:75}, 5);
    for(i=0;i<aLi.length;i++){
     startMove(aPrev[i], {opacity:100}, 5);
    }
    startMove(oBox, {width:385}, 5);
   }
  };
 }
};
function getClass(oParent, sClass){
 var aElem = oParent.getElementsByTagName('*');
 var aClass = [];
 var i = 0;
 for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
 return aClass;
}
function startMove(obj, json, iT, fnEnd){
 if(obj.timer)clearInterval(obj.timer);
 obj.timer = setInterval(function (){
  doMove(obj, json, iT, fnEnd);
 }, 30);
}
function getStyle(obj, attr){
 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
function doMove(obj, json, iT, fnEnd){
 var iCur = 0;
 var attr = '';
 var bStop = true;
 for(attr in json){
  attr == 'opacity' ? iCur = parseInt(100*parseFloat(getStyle(obj, 'opacity'))) : iCur = parseInt(getStyle(obj, attr));
  if(isNaN(iCur))iCur = 0;
  var iSpeed = (json[attr]-iCur) / iT;
  iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  if(parseInt(json[attr])!=iCur)bStop = false;
  if(attr=='opacity'){
   obj.style.filter = "alpha(opacity:"+(iCur+iSpeed)+")";
   obj.style.opacity = (iCur + iSpeed) / 100;
  }else{
   attr == 'zIndex' ? obj.style[attr] = iCur + iSpeed : obj.style[attr] = iCur + iSpeed +'px';
  }
 }
 if(bStop){
  clearInterval(obj.timer);
  obj.timer = null;  
  if(fnEnd)fnEnd();
 }
}
</script>
</head>
<body>
<div id="box">
 <li>
  <a href="javascript:;" class="pos1">
  <span class="preview"></span>
  <span class="img_pre"></span>
 </a>
 <div class="inner">
  <h2>乌索普</h2>
  <h3>草帽海贼团【狙击手】</h3>
  <p>悬赏:3000万(司法岛事件)</p>
 </div>
 </li>
 <li>
  <a href="javascript:;" class="pos2">
  <span class="preview"></span>
  <span class="img_pre"></span>
 </a>
 <div class="inner">
  <h2>罗罗诺亚·索隆</h2>
  <h3>草帽海贼团【剑士】</h3>
  <p>悬赏:6千万(阿拉巴斯坦事件)→1亿2000万(司法岛事件)</p>
 </div>
 </li>
 <li style="width:400px;">
  <a href="javascript:;" class="pos3">
  <span class="preview"></span>
  <span class="img_pre" style="left:0px;"></span>
 </a>
 <div class="inner">
  <h2>蒙其·D·路飞</h2>
  <h3>草帽海贼团【船长】</h3>
  <p>恶魔果实:橡胶果实<br />悬赏:3千万(可可亚西村事件)→1亿(阿拉巴斯坦事件)→3亿(司法岛事件)→4亿(顶上战争后)</p>
 </div>
 </li>
 <li>
  <a href="javascript:;" class="pos4">
  <span class="preview"></span>
  <span class="img_pre"></span>
 </a>
 <div class="inner">
  <h2>娜美</h2>
  <h3>草帽海贼团【航海士】</h3>
  <p>悬赏:1600万(司法岛事件)</p>
 </div>
 </li>
 <li>
  <a href="javascript:;" class="pos5">
  <span class="preview"></span>
  <span class="img_pre"></span>
 </a>
 <div class="inner">
  <h2>香吉士</h2>
  <h3>草帽海贼团【厨师】</h3>
  <p>悬赏:7700万(司法岛事件)</p>
 </div>
 </li>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
Vue实现背景更换颜色操作
Jul 17 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 #Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 #Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 #Javascript
js图片轮播特效代码分享
Sep 07 #Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 #Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 #Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 #Javascript
You might like
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
python连接数据库的方法
2017/10/19 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
python如何从键盘获取输入实例
2020/06/18 Python
详解Flask前后端分离项目案例
2020/07/24 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
如何用python写个模板引擎
2021/01/14 Python
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
办公室内勤岗位职责范本
2013/12/09 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
生活部的活动方案
2014/08/19 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
小学教师个人总结
2015/02/05 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python