jquery设计简洁自动切换蓝色滑动门特效

稿源：互联网 2022-04-02 21:40:44 点击： 5647 撤稿纠错

jquery滑动门特效，简洁设计，能自动切换显示，选中项与其他背景颜色不同。

以下讨论的是和jquery 自动切换滑动门相关的jquery设计简洁自动切换蓝色滑动门特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。全力打造一流网页特效站！" />
<title>网页特效 jquery设计简洁自动切换蓝色滑动门特效 站长特效网</title>
<script type="text/javascript" src="/img/jquery_zzjs.js"></script>
<script type="text/javascript">
    $(function() {
        var len = $(".zzjs_1 li").length;
        var index;
        var time;
        $(".zzjs_1 li").mousemove(function() {
            index = $(".zzjs_1 li").index(this);
            show(index);
        }).eq(0).mousemove();
        $(".zzjs_2").hover(function() {
            clearInterval(time);
        }, function() {
            time = setInterval(function() {
                show(index)
                index++;
                if (index == len) { index = 0; }
            }, 2000);
        }).trigger("mouseleave");
    })
    function show(index) {
        $(".zzjs_2 li").eq(index).show().siblings().hide();
        $(".zzjs_1 li").css("background", "url(/img/20110112zzjs_net_1.gif)").eq(index).css("background", "url(/img/20110112zzjs_net_2.gif)");
    }
//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
<style type="text/css">
body{ font-family:"宋体"; font-size:9pt; color:#ffffff}
#wwwzzjsnet{ width:510px; height:200px; border:4px #1025c0 solid; margin:0 auto}
#wwwzzjsnet ul li{ cursor:pointer}
#wwwzzjsnet .zzjs{ border:none}
#wwwzzjsnet .zzjs ul{ margin:0; padding:0}
#wwwzzjsnet .zzjs ul li{ cursor:pointer;float:left;list-style:none; width:100px; height:40px; line-height:40px; text-align:center; background:url(/img/20110112zzjs_net_1.gif) repeat-x; border:1px black solid}
#wwwzzjsnet .zzjs_net{ width:510px; height:160px; color:#000000; border:none;}
#wwwzzjsnet .zzjs_net ul{ margin:0; padding:0; width:510px; height:160px;}
#wwwzzjsnet .zzjs_net ul li{ list-style:none}
.hide{ display:none}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

<span style="color:#FF0000">需要加载js文件，请刷新页面后看效果。</span>
<div id="wwwzzjsnet">
<div class="zzjs">
<ul class="zzjs_1">
<li>站长特效一号</li><li>站长特效二号</li><li>站长特效三号</li><li>站长特效四号</li><li>站长特效五号</li>
</ul>
</div>
<div class="zzjs_net">
<ul class="zzjs_2">
<li>站长特效一号内容，站长特效网。<br /><a href="http://www.zzjs.net">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！</li><li class="hide">站长特效二号内容，站长特效网。<br /><a href="http://www.zzjs.net">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！</li><li class="hide">站长特效三号内容，站长特效网。<br /><a href="http://www.zzjs.net">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！</li><li class="hide">站长特效四号内容，站长特效网。<br /><a href="http://www.zzjs.net">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！</li><li class="hide">站长特效五号内容，站长特效网。<br /><a href="http://www.zzjs.net">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！</li>
</ul>
</div>
</div>
</body>
</html>

关于jquery设计简洁自动切换蓝色滑动门特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011011366879.shtml方便下次再访问哦。

·上一篇： jquery鼠标感应中英文双语导航菜单
·下一篇： css实现同一张背景图设计漂亮绿色导航菜单效果

jquery设计简洁自动切换蓝色滑动门特效

文章分类LIST >>返回首页

最新游戏

最新新闻