介绍几个在开发中常用的页面动态效果
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();//隐藏二维码图片
}
});