效果截图:

HTML代码:

  1. <div id="container">
  2. <img src="data:images/photo01.jpg" alt="">
  3. <img src="data:images/photo02.jpg" alt="">
  4. <img src="data:images/photo03.jpg" alt="">
  5. <img src="data:images/photo04.jpg" alt="">
  6. </div>

CSS样式:

  1. *{
  2. margin:; padding:;
  3. }
  4. #container{
  5. margin: 30px auto; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; height: 420px; overflow: hidden;
  6. font-size:; position: relative;
  7. }
  8. #container img{
  9. display: block;width: 420px; height: 420px; position: absolute; left:; top:; border-top: 1px solid #ccc;
  10. border-left: 1px solid #ccc;
  11. -webkit-transition: all 1s;
  12. -moz-transition: all 1s;
  13. -ms-transition: all 1s;
  14. -o-transition: all 1s;
  15. }

JS代码:

  1. window.onload=function(){
  2. //获取图片容器
  3. var oBox=document.getElementById('container');
  4.  
  5. //获取图片
  6. var aImgs=document.getElementsByTagName('img');
  7.  
  8. //获取单张图片宽度
  9. var oImgWidth=aImgs[0].offsetWidth;
  10.  
  11. //定义显露宽度
  12. var oInitWidth=160;
  13.  
  14. //设置图片容器宽度
  15. oBox.style.width=oImgWidth + oInitWidth*(aImgs.length-1)+'px';
  16.  
  17. //初始化图片位置
  18. function initImgPos(){
  19. for(var i = 1; i < aImgs.length; i++){ //由于第一张图片不需要设置,i从1开始
  20. aImgs[i].style.left=oImgWidth + oInitWidth*(i-1) + 'px';
  21. }
  22. }
  23. //初始化执行一次
  24. initImgPos()
  25.  
  26. //定义鼠标滑过每个图片应移动的距离
  27. var translate=oImgWidth - oInitWidth;
  28.  
  29. //鼠标滑动效果
  30. for (var i = 0; i < aImgs.length; i++) {
  31. // 使用立即执行函数,获得不同i的值
  32. (function(i){
  33. aImgs[i].onmouseover=function(){
  34. // 复位
  35. initImgPos();
  36.  
  37. //重新计算位置
  38. for(var j = 1; j <= i; j++){
  39. aImgs[j].style.left=parseInt(aImgs[j].style.left,10) - translate + 'px';
  40. }
  41. }
  42. })(i)
  43. }
  44.  
  45. }

笔记来源:慕课网:DOM探索之基础详解篇

Js+CSS3实现手风琴效果的更多相关文章

  1. 基于css3实现手风琴效果

    终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...

  2. 史上最简单的js+css3实现时钟效果

    今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...

  3. js css3实现钟表效果

    原理: 利用transform-origin改变旋转的圆心,实现秒数和分钟数的刻度线,利用transfrom translate实现钟表小时刻度的显示 html: <div class=&quo ...

  4. js的轮播效果

    图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); <!DOCTYPE html> <html> <head lang="en ...

  5. 一步步教你css3手风琴效果的实现

    什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...

  6. tiltShift.js - CSS3 滤镜实现移轴镜头效果

    tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果.使用非常简单,使用 data 属性配置参数.温馨提示:为保证最佳的效果,请在 IE10+. ...

  7. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  8. JS+JQ手风琴效果

    最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...

  9. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

随机推荐

  1. 如何在WIN7_64环境下安装Oracle10g_64位版本

    转载请注明出处http://www.cnblogs.com/SharpL/p/4338638.html 1.如果之前安装过Oracle软件,建议完全卸载(究竟有没有必要_不知道_我是这么做的) 2.清 ...

  2. python2.7练习小例子(二十一)

        21):1.题目:两个乒乓球队进行比赛,各出三人.甲队为a,b,c三人,乙队为x,y,z三人.已抽签决定比赛名单.有人向队员打听比赛的名单.a说他不和x比,c说他不和x,z比,请编程序找出三队 ...

  3. stm32--USB(作为U盘)+FatFs的实现

    一.USB功能的添加(作为U盘) 添加文件 将官方库中的Library文件夹中的所有有效文件添加到工程中,分为4个文件夹: usb class为硬件相关(Library\Class): usb dri ...

  4. 解决上传app store卡在正在通过iTunes Store鉴定

    打开终端输入代码即可 cd ~ mv .itmstransporter/ .old_itmstransporter/ "/Applications/Xcode.app/Contents/Ap ...

  5. 从一个线上服务器警告谈谈backlog

    缘起 双十一如期而至,此时的我因为在处理客户的一个问题已经陷入了忙碌.突然,不断接到驻场实施发来的反馈,都是相同的反馈--"客户端操作缓慢". 我现在负责的服务器是一台接口服务器, ...

  6. 【IOI 2002/FJOI2019】任务安排(超级计算机)

    题目 \(N\) 个任务排成一个序列在一台机器上等待完成(顺序不得改变),这 \(N\) 个任务被分成若干批,每批包含相邻的若干任务.从时刻 \(0\) 开始,这些任务被分批加工,第 \(i\) 个任 ...

  7. jmeter的基本使用过程

    jmeter的基本使用过程 接下来几周,我将通过视频的方式,录制下来jmeter的基本用法,方便大家参考学习 可能导图会随时调整

  8. Google无法离线安装扩展程序

    Google无法离线安装扩展程序 Chrome插件伴侣 按照里面的使用说明使用 网盘地址: 链接: https://pan.baidu.com/s/1eXoLXyPNl2pfoPnArHq2Lg 提取 ...

  9. TF-IDF与主题模型 - NLP学习(3-2)

    分词(Tokenization) - NLP学习(1) N-grams模型.停顿词(stopwords)和标准化处理 - NLP学习(2) 文本向量化及词袋模型 - NLP学习(3-1) 在上一篇博文 ...

  10. BZOJ 3670 NOI2014 动物园 KMP+dp

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3670 题意概述:令num[i]表示字符串由1~i的字符形成的前缀中不相重叠的相同前后缀的数 ...