手风琴特效 transition

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

*{ margin:0px; padding:0px;}

</style>

</head>

<body>

<div style=" width:700px; height:300px; background-color:#E7E7E7; overflow:hidden;position:relative;">

    <div id="d1" style="width:500px; height:300px; background-color:#FF8486;position:absolute; float:left; transition:0.7s;" onMouseOver="bian(1)"><img src="路易十三/logo.png" ></div>

    <div id="d2" style="width:500px; height:300px; background-color:#FFDE6D;position:absolute; float:left; left:50px; transition:0.7s;" onMouseOver="bian(2)"></div>

    <div id="d3" style="width:500px; height:300px; background-color:#83FF48;position:absolute; float:left; left:100px; transition:0.7s;" onMouseOver="bian(3)"></div>

    <div id="d4" style="width:500px; height:300px; background-color:#63EEF5;position:absolute; float:left; left:150px; transition:0.7s;" onMouseOver="bian(4)"></div>

    <div id="d5" style="width:500px; height:300px; background-color:#776CFF;position:absolute; float:left; left:200px; transition:0.7s;" onMouseOver="bian(5)"></div>

</div>

<br>

<div style=" width:700px; height:300px; background-color:#E7E7E7; overflow:hidden;position:relative;">

    <div id="dd1" style="width:500px; height:300px; background-color:#FF8486;position:absolute; float:left; transition:0.7s;" onClick="biann(1)"></div>

    <div id="dd2" style="width:500px; height:300px; background-color:#FFDE6D;position:absolute; float:left; left:50px; transition:0.7s;" onClick="biann(2)"></div>

    <div id="dd3" style="width:500px; height:300px; background-color:#83FF48;position:absolute; float:left; left:100px; transition:0.7s;" onClick="biann(3)"></div>

    <div id="dd4" style="width:500px; height:300px; background-color:#63EEF5;position:absolute; float:left; left:150px; transition:0.7s;" onClick="biann(4)"></div>

    <div id="dd5" style="width:500px; height:300px; background-color:#776CFF;position:absolute; float:left; left:200px; transition:0.7s;" onClick="biann(5)"></div>

</div><br>

<div style=" width:2500px; height:300px; background-color:#111111; position:relative;"></div>

</body>

</html>

<script language="javascript1.1">

function bian(n)

{

    if(n==1){

        document.getElementById("d1").style.left="";

        document.getElementById("d2").style.left="500px";

        document.getElementById("d3").style.left="550px";

        document.getElementById("d4").style.left="600px";

        document.getElementById("d5").style.left="650px";

    }

    else if(n==2){

        document.getElementById("d1").style.left="";

        document.getElementById("d2").style.left="50px";

        document.getElementById("d3").style.left="550px";

        document.getElementById("d4").style.left="600px";

        document.getElementById("d5").style.left="650px";

        }

    else if(n==3){

        document.getElementById("d1").style.left="";

        document.getElementById("d2").style.left="50px";

        document.getElementById("d3").style.left="100px";

        document.getElementById("d4").style.left="600px";

        document.getElementById("d5").style.left="650px";

        }

    else if(n==4){

        document.getElementById("d1").style.left="";

        document.getElementById("d2").style.left="50px";

        document.getElementById("d3").style.left="100px";

        document.getElementById("d4").style.left="150px";

        document.getElementById("d5").style.left="650px";

        }

    else if(n==5){

        document.getElementById("d1").style.left="";

        document.getElementById("d2").style.left="50px";

        document.getElementById("d3").style.left="100px";

        document.getElementById("d4").style.left="150px";

        document.getElementById("d5").style.left="200px";

        }

}

function biann(n)

{

    if(n==1){

        document.getElementById("dd1").style.left="";

        document.getElementById("dd2").style.left="500px";

        document.getElementById("dd3").style.left="550px";

        document.getElementById("dd4").style.left="600px";

        document.getElementById("dd5").style.left="650px";

    }

    else if(n==2){

        document.getElementById("dd1").style.left="";

        document.getElementById("dd2").style.left="50px";

        document.getElementById("dd3").style.left="550px";

        document.getElementById("dd4").style.left="600px";

        document.getElementById("dd5").style.left="650px";

        }

    else if(n==3){

        document.getElementById("dd1").style.left="";

        document.getElementById("dd2").style.left="50px";

        document.getElementById("dd3").style.left="100px";

        document.getElementById("dd4").style.left="600px";

        document.getElementById("dd5").style.left="650px";

        }

    else if(n==4){

        document.getElementById("dd1").style.left="";

        document.getElementById("dd2").style.left="50px";

        document.getElementById("dd3").style.left="100px";

        document.getElementById("dd4").style.left="150px";

        document.getElementById("dd5").style.left="650px";

        }

    else if(n==5){

        document.getElementById("dd1").style.left="";

        document.getElementById("dd2").style.left="50px";

        document.getElementById("dd3").style.left="100px";

        document.getElementById("dd4").style.left="150px";

        document.getElementById("dd5").style.left="200px";

        }

}

</script>

手风琴特效 transition的更多相关文章

图片每天换及纯css3手风琴特效
<a target="_blank" id="a"><img id="img" /></a> <s ...
一款点击图片进行无限循环的jquery手风琴特效
一款点击图片进行无限循环的jquery手风琴特效,点击手风琴折合点,可以无限循环的点击下去,很炫酷的手风琴哟! 还有每张图片的文字介绍,因为兼容IE6所以找来分享给大家这个jquery特效. 适用浏览 ...
动漫网站基于jquery的横向手风琴特效
今天给大家分享一款动漫网站基于jquery的横向手风琴特效.这款手风琴特效适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...
CSS实现的手风琴特效
CSS样式: //图像个数 @imageN:5; //图像hover之前的总宽度 @w:800px; //图像hover之后的宽度 @imageL:640px; //图像hover之前的宽度 @ima ...
纯js代码实现手风琴特效
我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型 ...
场景切换特效Transition——Cocos2d-x学习历程(十二)
Transition 场景切换在游戏中通常会用到一些场景的切换,比如从加载界面切换到欢迎界面.游戏中的所有场景存放在一个栈中,有且只有一个场景可以处于激活状态.直接replaceScene(即不适用 ...
jQuery特效手风琴特效手写手风琴网页特效
今天写一个简单的手风琴效果,不用插件,利用强大的jQuery,写一个手风琴效果. 页面预览,请点击这里预览: 手风琴预览案例分析: html结构就是一个大盒子里面放着5个li,每个li的小小是2 ...
JS手风琴特效
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
推荐一款优雅的jquery手风琴特效
推荐一款基于 jQuery和 CSS3实现的手风琴效果. 查看demo演示

随机推荐

"当前方法的代码已经过优化，无法计算表达式的值"的这个错误的解决方案！！！
http://blog.useasp.net/archive/2012/09/12/how-to-debug-dotnet-framework-source-when-throw-the-code-o ...
WP8.1下 Cortana语音命令 VCD文件设计
Windows Phone8.1下的Cortana,可以通过语音的方式,打开.设置应用,进行页面跳转.执行任务. 我们先要创建VCD(VoiceCommand.xml)文件 <?xml vers ...
MySQL Cluster 配置文件(config.ini)详解
MySQL Cluster 配置文件(config.ini)详解 ################################################################### ...
解决访问ajax.googleapis.com链接失败方法
参考文章:http://www.jianshu.com/p/690e28f7fde6 主要思路:修改hosts文件,将其网址ajax.googleapis.com指向本地服务器:本地服务器将通过aja ...
iOS中AOP与Method Swizzling 项目中的应用
引子:项目中需要对按钮点击事件进行统计分析,现在项目中就是在按钮的响应代码中添加点击事件,非常繁琐.所以使用了AOP(面向切面编程),将统计的业务逻辑统一抽离出来. 项目中添加的开源库:https:/ ...
校友聊NABCD
特点之一界面简洁 N:软件的界面是软件成功的必要条件,界面简洁,用户使用方便,就会吸引用户. A:界面可用多种做法做,暂定用C# B:简洁的界面,用户易于理解各项功能,方便使用. C:没有其 ...
【转】MySQL数据类型和常用字段属性总结
来源:http://www.jb51.net/article/55853.htm 这里先总结数据类型.MySQL中的数据类型大的方面来分,可以分为:日期和时间.数值,以及字符串.下面就分开来进行总结. ...
淘宝(阿里百川)手机客户端开发日记第十五篇 JSON解析(四)
解析一个从淘宝传递的JSON (大家如有兴趣可以测试下):{ "tae_item_detail_get_response": { "data": { " ...
加载状态为complete时移除loading效果
一.JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = docum ...
Linux之匹配符
shell常见通配符: 字符含义实例 * 匹配 0 或多个字符 a*b a与b之间可以有任意长度的任意字符, 也可以一个也没有, 如aabcb, axyzb, a012b, ab. ? 匹配任意 ...

手风琴特效 transition

手风琴特效 transition的更多相关文章

随机推荐

热门专题