其实主要注意几点细节就可以轻松实现这样的功能了,第一点就是设置一个div不显示并且位置设置好,第二点就是利用JQuery中监听鼠标的方法来监听鼠标的移动或者离开。
理论就这些,下就给出一个具体的例子详细的介绍一下该过程是如何实现的。
<footer>
<p class="ft-copyright">强仔仔 Design by Linzhiqaing 蜀ICP备11002373号-1</p>
<div id="tbox">
<div id="log_id" style="float:left;position: relative;margin-left: -400px;margin-bottom:-5px;display: none">
<img src="images/weixing-ma.jpg">
</div>
<div style="float:right;"><a id="togbook" href="#"></a></div>
<div style="float:left"><a id="gotop"></a></div>
</div>
</footer>
<script type="text/javascript">
$("#gotop").click(function () {
var speed=200;//滑动的速度
$('body,html').animate({ scrollTop: 0 }, speed);
return false;
});
$("#togbook").on('mouseover',function(){
$("#log_id").css("display","block");
});
$("#togbook").on('mouseout',function(){
$("#log_id").css("display","none");
});
</script>
先来解释一下上面的代码,mouseover指的是当鼠标移动到”#togbook”这个div的上方的时候就会触发该函数,然后执行div显示的代码。
mouseout指的是当鼠标从”#togbook”这个div的上方离开的时候就会触发该函数,然后执行div隐藏的代码。通过这两个简单函数就可以实现该过程了。
这里div显示位置,大家可以自己设置,我是将这个div设置在左上面。
运行截图:
如对内容有问题或有疑义,请及时提出,不甚感谢。本人QQ:208017534