saber酱的抱枕

努力变强

08/6
17:09
学习

jq的导航下拉菜单一例

效果如图(不要点,这真的是图←_←):

我是在A5站长网找到的这个特效,喜欢它的原因是它够简洁实用,添加几句代码就行了,不像有的例子,为了一个小小的下拉菜单竟然引入了2个外部js文件(带上jq就3个了),何苦来哉?

首先引入jq,然后说一下html代码(CSS部分省略)

<ul class="mainnav">
                <li><a href="index.html">首页</a></li>
                <li class="subnav">
                    <a href="">配资中心</a>
                    <dl>
                        <dd><a href="">免费操盘</a></dd>
                        <dd><a href="">日操盘</a></dd>
                        <dd><a href="">月操盘</a></dd>
                    </dl>
                </li>
                <li><a href="cpyy.html">任务大厅</a></li>
                <li><a href="#">合伙人模式</a></li>
                <li><a href="#">股宝盆</a></li>
                <li><a href="#">互助基金</a></li>
                <li><a href="#">金融商学院</a></li>
            </ul>

这里边重要的部分就是结构和class名:
结构是在li标签内的a标签后放入下拉菜单,这个示例使用dl写的下拉菜单。
然后给每个有下拉菜单的li设置同样的class,没有下拉菜单的li的class不要和有下拉菜单的一样。至于ul的class什么的没有关系。

然后就是在头部插入js代码:

<script type="text/javascript">
$(function(){
    $("dl").hide();
    $("li.subnav").hover(function(){
        $(this).find("dl").stop(true,true);
        $(this).find("dl").slideDown();
    },function(){
        $(this).find("dl").stop(true,true);
        $(this).find("dl").slideUp();
    });
})
</script>

注意把第四行的li.classname换成自己的class名。

保存之后查看网页,鼠标经过li的时候下拉菜单就会出现。但是有时候鼠标一离开li下拉菜单就隐藏了,导致点不到,这时候需要给下拉菜单添加定位,添加一个确保它在上层的z-index值(如果不想这样可以对li如此设置,多数情况下也有效)。

jq的导航下拉菜单一例

08/2
16:14
学习

jq 文字逐行向上滚动

http://www.51xuediannao.com/js/jquery/jquery_scroll_sx.html
这个代码用起来比较简单,也不需要去js文件里面进行修改(当然js里面的注释还是要删的)。演示中还附带了方向控制按钮。

使用方法:
首先在要滚动的部分(ul标签)外嵌套一层div,设置id。div需要设置overflow:hidden;
然后引入jq,再引入这个演示中下载的js,最后添加下面的js代码:

注意id替换一下,line是一次滚动几行,speed是滚动的快慢,timer是滚动的间隔,按钮没有的话不用管。鼠标经过会暂停。

但是它有一个问题:这个js不是通过复制内容来循环的。它滚动时先把ul的margin-top设为负值,这一行滚动上来之后再归零。所以我们准备的li要多放一行,以免ul完成整个滚动过程之后,最后一行字才显示出来(即滚动过程中,这行li里面的文字没有显示出来,滚动完才忽然显示)。

jq 文字逐行向上滚动

08/1
22:45
学习

Jq显示隐藏div

多个选项卡的切换(隐藏显示)是网页常见的特效,用jq来做很省事。

首先引入jq,然后封装一个事件,在div中写入onclick="showdome1()"

下面是两个tab切换的:

function showfuwutab2 () {
$("#dome2").show();
$("#dome1").hide();
$("#dome2").css('color','#cd4726');
$("#dome1").css('color','#fff');
}[/code]
下面是单个按钮切换一个div显示隐藏的:

function showdome1() {
if($('#dome1').is(':hidden')){
$("#dome1").show();
}else{
$("#dome1").hide();
}
}[/code]
如果封装的js太长的话可以保存到外部文件。

参考:http://www.phpvar.com/archives/183.html

Jq显示隐藏div