JSP页面动态效果总结

介绍几个在开发中常用的页面动态效果

1.数字滚动加载显示
jsp代码：<span id="tzje"></span>元
js代码：需要加载时调用numberR()方法。

//数值滚动加载方法
       function numberR(){
            $("#tzje").numberRoll({
                speed:10,
                count:tzje
            });
       } 

2.页面刷新，横向进度条动态加载
jsp代码：

<div id="progress1">         
    <div class="pbar" style="width:60%;"></div>
</div>

js代码：

$('#progress1').anim_progressbar({start: fast, finish: fastend, interval: 10});

3.圆形进度条
jsp代码：

<div class="circle"> 
    <div class="pie_left">
        <div class="left"></div>
    </div> 
    <div class="pie_right">
        <div class="right"></div>
    </div> 
    <div class="mask">
         <span>16.20</span>%
    </div> 
</div>

js代码：

//圆形进度条
    $('.circle').each(function(index, el){ 
        var num = $(this).find('span').text() * 3.6; 
        if(num<=180){ 
            $(this).find('.right').css('transform', "rotate(" + num + "deg)"); 
        }else{
            $(this).find('.right').css('transform', "rotate(180deg)"); 
            $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)"); 
        }; 
    });

4.页面上右侧导航栏鼠标悬浮效果
jsp代码：

<!-- 锚链接，用于返回顶部功能 -->
<a name="re_top"></a>
<div class="right_nav">
    <ul>
        <li class="li1"><div class="qq"></div><a href="" target="_blank">在线客服</a></li>
        <li class="li1"><div class="wx"></div><a>手机关注</a></li>
        <li class="li1"><div class="js"></div><a href="" target="_blank">在线计算</a></li>
        <li class="li1"><div class="db"></div><a href="#re_top">返回顶部</a></li>
    </ul>
    <div class="right_wx_ewm">
        <img src="可以是微信的二维码"/>
    </div>
</div>

js代码：

//右侧固定导航鼠标悬浮效果
    $('.right_nav ul li').mouseenter(function(){
        $(this).children("div").slideUp(100);
        $(this).children("a").slideDown(100);
        if($(this).children("div").hasClass("wx")){
            $('.right_wx_ewm').show();//显示二维码图片
        }
    });
    $('.right_nav ul li').mouseleave(function(){
        $(this).children("a").slideUp(100);
        $(this).children("div").slideDown(100);
        if($(this).children("div").hasClass("wx")){
            $('.right_wx_ewm').hide();//隐藏二维码图片
        }
    });