Js+CSS3实现手风琴效果
效果截图:
HTML代码:
- <div id="container">
- <img src="data:images/photo01.jpg" alt="">
- <img src="data:images/photo02.jpg" alt="">
- <img src="data:images/photo03.jpg" alt="">
- <img src="data:images/photo04.jpg" alt="">
- </div>
CSS样式:
- *{
- margin:; padding:;
- }
- #container{
- margin: 30px auto; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; height: 420px; overflow: hidden;
- font-size:; position: relative;
- }
- #container img{
- display: block;width: 420px; height: 420px; position: absolute; left:; top:; border-top: 1px solid #ccc;
- border-left: 1px solid #ccc;
- -webkit-transition: all 1s;
- -moz-transition: all 1s;
- -ms-transition: all 1s;
- -o-transition: all 1s;
- }
JS代码:
- window.onload=function(){
- //获取图片容器
- var oBox=document.getElementById('container');
- //获取图片
- var aImgs=document.getElementsByTagName('img');
- //获取单张图片宽度
- var oImgWidth=aImgs[0].offsetWidth;
- //定义显露宽度
- var oInitWidth=160;
- //设置图片容器宽度
- oBox.style.width=oImgWidth + oInitWidth*(aImgs.length-1)+'px';
- //初始化图片位置
- function initImgPos(){
- for(var i = 1; i < aImgs.length; i++){ //由于第一张图片不需要设置,i从1开始
- aImgs[i].style.left=oImgWidth + oInitWidth*(i-1) + 'px';
- }
- }
- //初始化执行一次
- initImgPos()
- //定义鼠标滑过每个图片应移动的距离
- var translate=oImgWidth - oInitWidth;
- //鼠标滑动效果
- for (var i = 0; i < aImgs.length; i++) {
- // 使用立即执行函数,获得不同i的值
- (function(i){
- aImgs[i].onmouseover=function(){
- // 复位
- initImgPos();
- //重新计算位置
- for(var j = 1; j <= i; j++){
- aImgs[j].style.left=parseInt(aImgs[j].style.left,10) - translate + 'px';
- }
- }
- })(i)
- }
- }
笔记来源:慕课网:DOM探索之基础详解篇
Js+CSS3实现手风琴效果的更多相关文章
- 基于css3实现手风琴效果
终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...
- 史上最简单的js+css3实现时钟效果
今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...
- js css3实现钟表效果
原理: 利用transform-origin改变旋转的圆心,实现秒数和分钟数的刻度线,利用transfrom translate实现钟表小时刻度的显示 html: <div class=&quo ...
- js的轮播效果
图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); <!DOCTYPE html> <html> <head lang="en ...
- 一步步教你css3手风琴效果的实现
什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...
- tiltShift.js - CSS3 滤镜实现移轴镜头效果
tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果.使用非常简单,使用 data 属性配置参数.温馨提示:为保证最佳的效果,请在 IE10+. ...
- 使用 jQuery & CSS3 实现优雅的手风琴效果
手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...
- JS+JQ手风琴效果
最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...
- 使用JS实现手风琴效果
想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
随机推荐
- 如何在WIN7_64环境下安装Oracle10g_64位版本
转载请注明出处http://www.cnblogs.com/SharpL/p/4338638.html 1.如果之前安装过Oracle软件,建议完全卸载(究竟有没有必要_不知道_我是这么做的) 2.清 ...
- python2.7练习小例子(二十一)
21):1.题目:两个乒乓球队进行比赛,各出三人.甲队为a,b,c三人,乙队为x,y,z三人.已抽签决定比赛名单.有人向队员打听比赛的名单.a说他不和x比,c说他不和x,z比,请编程序找出三队 ...
- stm32--USB(作为U盘)+FatFs的实现
一.USB功能的添加(作为U盘) 添加文件 将官方库中的Library文件夹中的所有有效文件添加到工程中,分为4个文件夹: usb class为硬件相关(Library\Class): usb dri ...
- 解决上传app store卡在正在通过iTunes Store鉴定
打开终端输入代码即可 cd ~ mv .itmstransporter/ .old_itmstransporter/ "/Applications/Xcode.app/Contents/Ap ...
- 从一个线上服务器警告谈谈backlog
缘起 双十一如期而至,此时的我因为在处理客户的一个问题已经陷入了忙碌.突然,不断接到驻场实施发来的反馈,都是相同的反馈--"客户端操作缓慢". 我现在负责的服务器是一台接口服务器, ...
- 【IOI 2002/FJOI2019】任务安排(超级计算机)
题目 \(N\) 个任务排成一个序列在一台机器上等待完成(顺序不得改变),这 \(N\) 个任务被分成若干批,每批包含相邻的若干任务.从时刻 \(0\) 开始,这些任务被分批加工,第 \(i\) 个任 ...
- jmeter的基本使用过程
jmeter的基本使用过程 接下来几周,我将通过视频的方式,录制下来jmeter的基本用法,方便大家参考学习 可能导图会随时调整
- Google无法离线安装扩展程序
Google无法离线安装扩展程序 Chrome插件伴侣 按照里面的使用说明使用 网盘地址: 链接: https://pan.baidu.com/s/1eXoLXyPNl2pfoPnArHq2Lg 提取 ...
- TF-IDF与主题模型 - NLP学习(3-2)
分词(Tokenization) - NLP学习(1) N-grams模型.停顿词(stopwords)和标准化处理 - NLP学习(2) 文本向量化及词袋模型 - NLP学习(3-1) 在上一篇博文 ...
- BZOJ 3670 NOI2014 动物园 KMP+dp
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3670 题意概述:令num[i]表示字符串由1~i的字符形成的前缀中不相重叠的相同前后缀的数 ...