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的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
js中小数转换整数的方法
Jan 26 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
解决Layui 表格自适应高度的问题
Nov 15 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
详解CocosCreator项目结构机制
Apr 14 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
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
WordPress JQuery处理沙发头像
2009/06/22 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
整理Python最基本的操作字典的方法
2015/04/24 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
如何查找网页漏洞
2016/06/22 面试题
教师申诉制度
2014/01/29 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
给学校的建议书
2014/03/12 职场文书
美术课外活动总结
2014/07/08 职场文书
公司委托书格式
2014/08/01 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书