前端

前端基础相关介绍

鼠标移入移出效果的回到顶部和回到底部







回到顶部/底部实现


**需求:**

站点比较长所以需要回到顶部和底部功能

上下按钮鼠标移入移出替换图片


**第一步:写个绝对定位的div用来放两张按钮的图片,并在页面顶部和底部分别创建锚点**

<style>
.top-nav{
width: 55px; 
height: 105px;
display: block; 
position: fixed;
right: 10px; 
bottom: 10%; 
z-index: 9999999999999
}
</style>
<div class="top-nav">
    <div class="top">
        <a href="#top">
            <img  id="imgtop" src="__STATIC__/home/defaults/img/top.png" />
        </a>
    </div>
    <div class="btn">
        <a href="#btn">
            <img id="imgbtn" src="__STATIC__/home/defaults/img/btn.png" />
        </a>
    </div>
</div>


**第二步:jq获取元素并更改img元素的src属性的值**

<script>
    $("#imgtop").mouseenter(function(){
        $("#imgtop").attr('src','__STATIC__/home/defaults/img/topz.png');
    }).mouseleave(function(){
        $("#imgtop").attr('src','__STATIC__/home/defaults/img/top.png');
    });
    $("#imgbtn").mouseenter(function(){
        $("#imgbtn").attr('src','__STATIC__/home/defaults/img/btnz.png');
    }).mouseleave(function(){
        $("#imgbtn").attr('src','__STATIC__/home/defaults/img/btn.png');
    });
    //写绑定点击事件
    $("#imgtop,#imgbtn").click(function(){
        location.reload();
    });
</script>


**第三步:就是上面最后一段,让按钮点击过后页面重置刷新,(依据个人情况谨慎使用);**


**总结一下:**

最开始想到的是mouseover和mouseout方法,但是我的js能力有限,期间各种不生效,然后就百度、Google了很久终于找到了上面的这种方法来做。

语法:

$(obj).mouseenter(function(){

    //鼠标移入

}).mouseleave(function(){

    //鼠标移出

});





相关信息
上一篇: Vuejs
captcha