Js 手风琴效果
<!DOCTYPE html>
<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">
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="width: 750px; height: 400px; position: relative; margin: 50px auto; overflow: hidden;">
<div id="dd1" style="background-image: url(img/1.jpg); background-size: contain; width: 600px; height: 100%; position:absolute; float: left; left: 0%;transition:1s;" onmouseover="bian(1)"></div>
<div id="dd2" style="background-image: url(img/2.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 30px;transition:1s;" onmouseover="bian(2)"></div>
<div id="dd3" style="background-image: url(img/3.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 60px;transition:1s;" onmouseover="bian(3)"></div>
<div id="dd4" style="background-image: url(img/4.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 90px;transition:1s;" onmouseover="bian(4)"></div>
<div id="dd5" style="background-image: url(img/5.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 120px;transition:1s;" onmouseover="bian(5)"></div>
<div id="dd6" style="background-image: url(img/6.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 150px;transition:1s;" onmouseover="bian(6)"></div>
</div> </body>
</html>
<script type="text/javascript">
dd1 = document.getElementById("dd1");
dd2 = document.getElementById("dd2");
dd3 = document.getElementById("dd3");
dd4 = document.getElementById("dd4");
dd5 = document.getElementById("dd5");
dd6 = document.getElementById("dd6");
function bian(n) {
if (n == )
{
dd1.style.left = "0px";
dd2.style.left = "600px";
dd3.style.left = "630px";
dd4.style.left = "660px";
dd5.style.left = "690px";
dd6.style.left = "720px";
}
if (n == ) {
dd1.style.left = "0px";
dd2.style.left = "30px";
dd3.style.left = "630px";
dd4.style.left = "660px";
dd5.style.left = "690px";
dd6.style.left = "720px";
}
if (n == ) {
dd1.style.left = "0px";
dd2.style.left = "30px";
dd3.style.left = "60px";
dd4.style.left = "660px";
dd5.style.left = "690px";
dd6.style.left = "720px";
}
if (n == ) {
dd1.style.left = "0px";
dd2.style.left = "30px";
dd3.style.left = "60px";
dd4.style.left = "90px";
dd5.style.left = "690px";
dd6.style.left = "720px";
}
if (n == ) {
dd1.style.left = "0px";
dd2.style.left = "30px";
dd3.style.left = "60px";
dd4.style.left = "90px";
dd5.style.left = "120px";
dd6.style.left = "720px";
}
if (n == ) {
dd1.style.left = "0px";
dd2.style.left = "30px";
dd3.style.left = "60px";
dd4.style.left = "90px";
dd5.style.left = "120px";
dd6.style.left = "150px";
}
}
</script>
Js 手风琴效果的更多相关文章
- 原生js手风琴效果
//js代码 //获取li var list = document.getElementsByTagName("li")[0]; //遍历 排他 for( var i=0;i&l ...
- JS+JQ手风琴效果
最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...
- 使用JS实现手风琴效果
想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
- js实现手风琴效果
之前在慕课网上有练习手风琴效果,但是老师使用jquery简简单单的两三行实现了,今天自己用js练习一下效果 <div id="divbox"> <ul> & ...
- js手风琴图片切换实现原理及函数分析
关键词: js手风琴 js百叶窗 js百页窗 实现原理解读 使用两层for循环实现, 第一层有三个功能,分别给第个li: 添加索引 预设位置 添加事件 第二层有两个功能,整理图片位置: 鼠标的li,以 ...
- jquery 图片手风琴效果
这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...
- 一步步教你css3手风琴效果的实现
什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...
- 超简单jQuary链式操作代码实现手风琴效果
超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...
- jQuery效果之简单的手风琴效果
实现效果如图所示: html结构: <div class="item_box box10"> <div class="item_box_wp" ...
随机推荐
- B树、B+树、二叉树、红黑树
B树下面来具体介绍一下B-树(Balance Tree),一个m阶的B树具有如下几个特征:1.根结点至少有两个子女.2.每个中间节点都包含k-1个元素和k个孩子,其中 m/2 <= k < ...
- Codeforces Round #522 (Div. 2, based on Technocup 2019 Elimination Round 3) Solution
A. Kitchen Utensils Water. #include <bits/stdc++.h> using namespace std; #define N 110 int n, ...
- G.Finding the Radius for an Inserted Circle 2017 ACM-ICPC 亚洲区（南宁赛区）网络赛
地址:https://nanti.jisuanke.com/t/17314 题目: Three circles C_{a}Ca, C_{b}Cb, and C_{c}Cc, all ...
- Kernel space是啥？
今天因为查一个Java zero copy的问题,遇到了kernel space.之前是耳闻过内核空间的,但是看到kernel space不知道是啥.知道的太少,除了学习,我也做不了啥.因为自己认知有 ...
- Kali视频学习16-20
Kali视频学习16-20 (16)Kali漏洞分析之数据库评估(一) 一. BBQSql BBQSql 是Python编写的盲注工具(blind SQL injection framework),当 ...
- 《Java程序设计》第三章-基础语法
20145221<Java程序设计>第三章-基础语法 总结 教材学习内容总结 类型.变量与运算符 类型 Java可区分为基本类型(Primitive Type)和类类型(Class Typ ...
- Git-远程仓库【转】
本文转载自:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 远程仓库 到目前为止, ...
- SpringMVC整个执行流程
在SSM (或SSH) 框架整合使用后,基本骨架看上去还是MVC的结构. MyBatis整合一些数据封装方法节省了DAO层的代码量, Spring提供了AOP,IoC( DI 具体实现 ). 而Spr ...
- BloomFilter–大规模数据处理利器
转自: http://www.dbafree.net/?p=36 BloomFilter–大规模数据处理利器 Bloom Filter是由Bloom在1970年提出的一种多哈希函数映射的快速查找算法. ...
- js二进制转换十进制
var a = 1010;alert(a.toString(2)); //转成二进制 alert(parseInt( "101110100 ",2)) ;//转成十进制 null