当前位置：首页 > 网页特效 > 导航菜单 >

js菜单图片翻转效果

时间：2013-08-20 08:52 来源：互联网作者：源码搜藏收藏推荐

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript图片翻动菜单效果</title>
<style>
*{margin:0;padding:0}html{overflow-y:scroll}
body{text-align:center;color:#000;font:12px/24px"宋体",Arial,Verdana,Geneva,Helvetica,sans-serif}body,div,dl,dt,dd,ul,ol,li,p,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,table,td,img{margin:0;padding:0;border:0}ul,ol{list-style-type:none}select,input,img,select{vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}button{cursor:pointer}a,a:visited,a:hover,a:active{text-decoration:none}div{margin:0 auto}
.l{float:left}.r{float:right}.cl{clear:both}.head_rmenu{width:520px;height:38px;margin:12px 0px 0 0px}
.head_rmenu li{width:120px;height:38px;float:left;margin-left:8px;overflow:hidden;display:inline}
</style>        
<body>
            <ul id="head_rmenu" class="head_rmenu">
                <li>
                    <A HREF="">
                        <IMG SRC="http://www.codesocang.com/images/logo.png" WIDTH="120" HEIGHT="76" BORDER="0" ALT="">
                    </A>
                </li>
                <li>
                    <A HREF="">
                        <IMG SRC="http://www.codesocang.com/images/logo.png" WIDTH="120" HEIGHT="76" BORDER="0" ALT="">
                    </A>
                </li>
                <li>
                    <A HREF="">
                        <IMG SRC="http://www.codesocang.com/images/logo.png" WIDTH="120" HEIGHT="76" BORDER="0" ALT="">
                    </A>
                </li>
                <li>
                    <A HREF="">
                        <IMG SRC="http://www.codesocang.com/images/logo.png" WIDTH="120" HEIGHT="76" BORDER="0" ALT="">
                    </A>
                </li>
            </ul>
        </body>
        <script>
            window.onload = function() {
                var Rmenu = document.getElementById("head_rmenu");
                var Rimg = Rmenu.getElementsByTagName("img");
                var Rspeed = 19;
                for (var i = 0; i < Rimg.length; i++) {
                    Rimg[i].style.marginTop = "-38px";
                    Rimg[i].index = i;
                    Rimg[i].onmouseover = function() {
                        MoveImg(this, 0)
                    }
                    Rimg[i].onmouseout = function() {
                        MoveImg(this, -38)
                    }
                }
                function MoveImg(obj, iTarget) {
                    clearInterval(obj.Rtimer);
                    obj.Rtimer = setInterval(function() {
                        Move(obj, iTarget)
                    },
                    100)
                }
                function Move(obj, iTarget) {
                    var Ispeed = parseInt(obj.style.marginTop);
                    if (Ispeed == iTarget) {
                        clearInterval(obj.Rtimer);
                        obj.style.marginTop = iTarget + "px"
                    } else if (iTarget < Ispeed) {
                        obj.style.marginTop = Ispeed - Rspeed + "px"
                    } else if (iTarget > Ispeed) {
                        obj.style.marginTop = Ispeed + Rspeed + "px"
                    }
                }
            }
        </script>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

JS代码结合HTML实现图片翻转的网页菜单特效，事先需要制作好两个文字一样但颜色不一样的图片供调用，在前几年这种菜单很流行，不过因为使用了图片，为了网站优化考虑，现在用的都很少了，发上来是为了学习一个JavaScript与网页编程的结合，一些技巧还是值得学习的。由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-daohang/5448.html

网页特效

js菜单图片翻转效果

导航菜单下载排行

最新文章