javascript+css3简单的手风琴效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>javascript+css3简单的手风琴效果</title>
<style>
#imageMenu{width:500px;height:200px;overflow:hidden;}
#imageMenu ul *{transition:all linear 0.2s;}
#imageMenu ul{width:800px;height:200px;padding: 0; margin: 0; list-style: none}
#imageMenu li{float:left;}
#imageMenu ul li a{width: 73px;height:110px;overflow:hidden;}
#imageMenu ul .big a {width:200px;}
#imageMenu
li
a{width:98px;height:200px;display:block;text-indent:9999px;border-right:2px
solid #fff;cursor:pointer;overflow:hidden;}
#imageMenu .landscapes a{background:url(http://img.funshion.com/pictures/media/list/109/251/109251_200_110.jpg?1405409131) no-repeat;}
#imageMenu .people a{background:url(http://img.funshion.com/pictures/media/list/109/562/109562_200_110.jpg?1386039195) no-repeat;}
#imageMenu .nature a{background:url(http://img.funshion.com/pictures/media/list/101/158/101158_200_110.jpg?1405677722) no-repeat;}
#imageMenu .urban a{background:url(http://img.funshion.com/pictures/media/list/103/960/103960_200_110.jpg?1395209765) no-repeat;}
#imageMenu .abstract a{background:url(http://img.funshion.com/pictures/media/list/106/935/106935_200_280.jpg?1405186860) no-repeat;}
</style>
</head>
<body>
<div id="imageMenu">
    <ul>
        <li class="landscapes">
            <a href="#link1">Landscapes</a>
        </li>
        <li class="people big">
            <a href="#link1">People</a>
        </li>
        <li class="nature">
            <a href="#link1">Nature</a>
        </li>
        <li class="urban">
            <a href="#link1">Urban</a>
        </li>
        <li class="abstract">
            <a href="#link1">Abstract</a>
        </li>
    </ul>
</div>
<script type="text/javascript">
function bind(ele, evType, callback){
    if(typeof ele.addEventListener === ‘function‘){
        ele.addEventListener(evType, callback, false);
    }else if(typeof ele.attechEvent === ‘function‘){
        ele.attechEvent(‘on‘+evType, callback);
    }
}

function mouseOverHander(ev, lists){
    // var imageMenu = document.getElementById(‘imageMenu‘);
    // var lists = imageMenu.getElementsByTagName(‘li‘);
    lists = lists || [];
    var target = ev.target || ev.srcElement;

for(var i = 0; i < lists.length; i++){
        //简单的正则表达式 有‘ big‘(这里匹配空格和big)这个class 替换成‘‘
        lists[i].className = lists[i].className.replace(/ ?big/g, ‘‘);
    }

//如果当前的元素不是li找他的父节点,当冒泡到body时候退出
    while(target.tagName.toLowerCase() != ‘li‘ && target.tagName.toLowerCase() != ‘body‘){
        target = target.parentNode;
    }

target.className += ‘ big‘;
}

window.onload = function(){
    var imageMenu = document.getElementById(‘imageMenu‘);
    var lists = imageMenu.getElementsByTagName(‘li‘);

for(var i = 0, l = lists.length; i < l; i++){
        bind(lists[i], ‘mouseover‘, function(e){
            mouseOverHander(e, lists);
        });
    }
}
</script>
</body>
</html>

时间: 2024-09-30 03:08:59

javascript+css3简单的手风琴效果的相关文章

分享一款jquery+css3实现的手风琴效果代码【js插件】

代码适用于大部分浏览器 演示Demo地址:请猛戳 效果图片 程序吧下载地址 分享一款jquery+css3实现的手风琴效果代码[js插件],布布扣,bubuko.com

jquery实现简单的手风琴效果

最近看到我看的教学视频有不少手风琴效果,我也试着写一下,当做练习. 明天我放假,就要去找工作,不知道,我的前端之路,能不能正式开始. 菜鸟起飞的机会都没有,那就尴尬了. 纯属练习: 效果如图: html: <ul class="wrap"> <li class="checked"> <span>选项1</span> <div>1</div> </li> <li> <

jQuery效果 - 简单的手风琴效果

实现效果如图所示: html结构: <div class="item_box box10"> <div class="item_box_wp"> <div class="voice_2"> <ul> <li class="li1" id="li1"> <div class="fold" style="displa

用javascript实现简单的动画效果的一个小实例

一.主要功能介绍:打开页面时文字会动态的从上面滑下来.下面的箭头链接会自动闪烁. 二.实时视图如下: 三.原代码如下 <!DOCTyPE html> <head> <script src="js/jquery-2.1.4.min.js"></script> <script> setInterval("changeImage()",2000);//定时函数 /*下面的为一个自定意函数*/   function

jquery 实现简单的手风琴效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="./js/jquery.min.js"></script> <style> body,html,ul,li,h3{ margin: 0; padding: 0

炫酷的手风琴效果

你一定用过书签,也一定给你的书本加过书签,那么你见过书签式的导航吗? 你一定见过手风琴,也一定知道弹奏手风琴时的它的外形变化,那么你见过手风琴式的导航吗? 如果没有,请往下看: 前面的话: 这篇博文先通过Javascript做一个简单的手风琴效果,让大家对手风琴效果有一定的了解:紧接着,我们换jquery做类似的手风琴效果.前面的两个例子都很简单,接下来要放大招了,我想用JQ或是原生的JS去做类似淘宝网中用到的手风琴效果.继续回到书签问题,既然JQ和JS都能实现那么炫酷的效果,我们用CSS3能不

CSS3——过渡模块——手风琴案例

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3过渡模块-手风琴效果</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 ul{ 9 width: 960px; 10 height: 300px; 11 border: 1p

CSS3实现手风琴效果-------Day88

所谓的手风琴效果,就是像手风琴一样拉开关上,至于手风琴啥样,貌似那是我好久之前的回忆了. 不扯那些没用的,说说这个坑人的手风琴效果,先来看下效果图: 这个效果不错吧,也比较常用吧,可怜的我最开始的时候以为自己可以做到这个效果,就用display:none/block写了一排的div,你别说,还真出来那个感觉啦,哈哈,这里当然不会这么做,但是在我看明白之后,发现是一样简单到要吐血,这样的应用当初自己怎么就想不到. 实现过程中的第一个让我没想到,却感觉确实这样才对的地方: <div id="h

基于css3实现手风琴效果

终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这类的java框架实在太过笨重和繁琐,也许是真的好用,但也觉得真心不适合我.然后么,也许有点俗,前端真的能做很多华丽花哨的东西出来.到现在也工作一个月了,工资不高,老板不好,但社会毕竟不会总让人满意,没人有手把手教你成大神的话,只能自己努力了.也许会有很多弯路,但做技术的嘛,有磨练总是好事. 对于我个