手风琴特效 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演示

随机推荐

解决pydev报unsolved import的问题
安装Flask_RESTful-0.2.11包后, 并在pydev 对应的 interpreter 重新刷新了System PYTHONPATH, 看见Lib\site-packages\flask_ ...
[歪谈]拽一个贵人出来给你"当炮架子"
我们在古装神话剧中经常会听到某个“先知”对前来算命的人说:你会在某某时刻遇到你的贵人.而这个贵人会在事业上助你一臂之力. 这里有个问题:贵人到底是什么?我们怎样去寻找我们的贵人. 前几天有个网友来咨询 ...
poj 3744 Scout YYF I(概率dp，矩阵优化)
Scout YYF I Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 5020 Accepted: 1355 Descr ...
ElasticSearch 2 (6) - 插件安装Head、Kopf与Bigdesk
ElasticSearch 2 (6) - 插件安装Head.Kopf与Bigdesk 摘要安装Elasticsearch插件Head.Kopf与Bigdesk 版本 elasticsearch版本 ...
cocoapods pod install 安装报错 is not used in any concrete target
低版本的cocoa pods在编写Podfile文件时这样写就可以了 platform :ios, '8.0'pod 'AFNetworking' 高版本的cocoa pods在编写Podfile文件 ...
BZOJ1503——郁闷的出纳员
1.题目大意:一道treap题,支持插入,询问第K大,还有全体修改+上一个值,如果某个点值小于x,那么就删除这个点插入100000次,询问100000次,修改100次..最后输出删了多少个点 2.分 ...
剑指Offer 用两个栈实现队列
题目描述用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 思路: 入队:将元素进栈A 出队:判断栈B是否为空,如果为空,则将栈A中所有元素pop,并push进 ...
jQuery常用操作方法及常用函数总结
一篇 jQuery 常用方法及函数的文章留存备忘. jQuery 常见操作实现方式 $("标签名") //取html元素 document.getElementsByTagName ...
am等adb命令小总结
本文的am部分参考了:http://www.cnblogs.com/dyllove98/archive/2013/07/08/3178094.html 的博客今天研究adb的时候发现在pc端也可以启 ...
HDU 3999 二叉排序树
The order of a Tree Problem Description The shape of a binary search tree is greatly related to the ...

手风琴特效 transition

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

随机推荐

热门专题