首页 > 其他 > 详细

文字自动下拉隐藏显示

时间:2017-02-13 21:39:51      阅读:237      评论:0      收藏:0      [点我收藏+]

css代码:

<style>
        #s2 {
        width:200px;
        margin:0px auto;
        }
        #s1 {
        overflow:hidden;
        height:18px;
        }

    </style>

body中的代码:

<div id="s1">
        <div id="s2">少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所</div>

    </div>

jQuery代码:

<script>
    $("#s2").hover(function () {         
        var t = $("#s2").get(0).offsetHeight;
        $("#s1").stop().animate({ height: t }, 500, function () {

        });
       
    }, function () {
        
        $("#s1").stop().animate({ height: "18" }, 500, function () {
            $("s1").css("overflow", "hidden");
        });
    });


</script>

实现效果:鼠标移入触发拉开;鼠标移除重新收起。
改为点击,可以设置一个公共变量,记录次数,除二取余,判断余数,分别写上面两个方法,则第一次点击拉开,再点击收起。

文字自动下拉隐藏显示

原文:http://www.cnblogs.com/wy1992/p/6395352.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!