利用CSS样式及JS控制,实现回到首页及QQ客服的按钮悬浮及动态效果。
图一
图二
主要属性如下:
position:fixed;//绝对定位
transition:all 1s;//实现动效
主要逻辑思路:先写出如图二的样式。
/* fixed back_to_top */
.fixed_back_to_top
{
display: block;
position: fixed;
left:90%;
bottom:30px;
-moz-opacity:0.6;
opacity:0.6;
z-index: 99;
cursor: pointer;
}
/* fixed back_to_top Ends */
/* fixed contact_us */
.fixed_contact_us
{
display: block;
position: fixed;
left:90%;
bottom:120px;
-moz-opacity:0.6;
opacity:0.6;
z-index: 99;
}
为得到图一样式只需给 QQ客服按钮增加一个moved的类。
.fixed_contact_us_moved
{
bottom:30px;
}
为实现移动中的渐变,使用transition属性
transition:all 1s;
-moz-transition:all 1s; /* Firefox 4 */
-webkit-transition:all 1s; /* Safari and Chrome */
-o-transition:all 1s; /* Opera */
上面这段代码的后面三个样式,实现了trasition属性在各游览器中的适应
动态控制的实现
判断什么时候是图一状态,什么时候是图二状态需要用到两个属性。1、窗口(页面)高度2、滚动条高度
var win_height=0;
var scr_top=0;
scr_top=$(window).scrollTop();
win_height=$(window).height();
使用上面的语句来获取页面高度和滚动条高度,当然用offsetHeight属性会更好一些。
简单来说判断两者值的关系就可以确定状态,让top按钮显示隐藏,让客服按钮变换位置。
$(function(){
<span style="white-space:pre"> </span>//TODO初始判断
$(window).scroll(
function(){
<pre name="code" class="javascript"> //TODO获取滚动条高度变化
//TODO执行判定函数
}); $(window).resize( function(){ //TODO获取窗口大小变化、滚动条高度变化
//TODO执行判定函数 }); });
填充语句之后
<!-- fixed contact_us -->
<div class="fixed_contact_us handpoint" id="fcu">
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=3229802753&site=qq&menu=yes">
<img src="assets/images/index/fcu.png" ></img>
</a>
</div>
<!-- fixed contact_us script -->
<script type="text/javascript">
var win_height=0;
var scr_top=0;
$(function(){
if(scr_top>win_height)
{
$("#fcu").removeClass("fixed_contact_us_moved");
}
else
{
$("#fcu").addClass("fixed_contact_us_moved");
}
$(window).scroll(
function(){
scr_top=$(window).scrollTop();
win_height=$(window).height();
if(scr_top>win_height)
{
$("#fcu").removeClass("fixed_contact_us_moved");
}
else
{
$("#fcu").addClass("fixed_contact_us_moved");
}
});
$(window).resize(
function(){
scr_top=$(window).scrollTop();
win_height=$(window).height();
if(scr_top>win_height)
{
$("#fcu").removeClass("fixed_contact_us_moved");
}
else
{
$("#fcu").addClass("fixed_contact_us_moved");
}
});
});
</script>
<!-- fixed contact_us script ends -->
<!-- fixed contact_us ends -->
<!-- fixed back_to_top -->
<div class="fixed_back_to_top handpoint" id="fbtt">
<img src="assets/images/index/fbtt.png"></img>
</div>
<!-- fixed back_to_top script -->
<script type="text/javascript">
var current_first_menu='<?php echo isset($current_first_menu)?$current_first_menu:'jjjjjj';?>';
var win_height=0;
var scr_top=0;
$(function(){
$("#fbtt").hide();
$(window).scroll(
function(){
scr_top=$(window).scrollTop();
win_height=$(window).height();
if(scr_top>win_height)
{
$("#fbtt").fadeIn(1000,function(){});
}
else
{
$("#fbtt").fadeOut(1000,function(){});
}
});
$(window).resize(
function(){
scr_top=$(window).scrollTop();
win_height=$(window).height();
if(scr_top>win_height)
{
$("#fbtt").fadeIn(1000,function(){});
}
else
{
$("#fbtt").fadeOut(1000,function(){});
}
});
$("#fbtt").click(function(){
// $(window).scrollTop(0);
$('html,body').animate({scrollTop: '0px'}, 800)
});
$('#nav_header').find('a').css({"color":"#ffffff","font-size":"14px"});
if((document.location.href.split('?').length>1)&&(document.location.href.split('?')[1]=='pro')){
$("#menu_2").find('a').css({"color":"#d25e43","font-size":"16px"});
}
else{
$("#"+current_first_menu).find('a').css({"color":"#d25e43","font-size":"16px"});
}
});
</script>
<!-- fixed back_to_top script ends -->
<!-- fixed back_to_top ends -->
这里因为笔者是先实现了一个按钮后,被更改的需求,所以将两个按钮分开写了,其实可以放在一个函数中来处理。
以上就是 回到首页及QQ客服 按钮动态悬浮实现 的过程