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 相关文章推荐
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
jquery中ajax调用json数据的使用说明
Mar 17 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
Javascript复制实例详解
Jan 28 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
详解用webpack2搭建angular2的项目
Jun 22 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
支持oicq头像的留言簿(一)
2006/10/09 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
Python计算程序运行时间的方法
2014/12/13 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
Python实现文件复制删除
2016/04/19 Python
解读python logging模块的使用方法
2018/04/17 Python
python对日志进行处理的实例代码
2018/10/06 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
在python image 中实现安装中文字体
2020/05/16 Python
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
销售工作岗位职责
2013/12/24 职场文书
银行职员思想汇报
2013/12/31 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
小时代观后感
2015/06/10 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
Pandas数据结构之Series的使用
2022/03/31 Python