分享代码格式的js书写

最新推荐文章于 2023-05-24 17:15:34 发布

含笑一过

最新推荐文章于 2023-05-24 17:15:34 发布

阅读量1k

点赞数

分类专栏：前端文章标签：分享代码

本文链接：https://blog.csdn.net/u013630488/article/details/50365071

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

                     分享代码格式的js书写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分享</title>
</head>
<style type="text/css">
    body{padding:0;margin:0;}
    #n_content{width:200px;background:red;position:relative;top:50px;height:300px;left:-200px;}
    #content{width:50px;background:green;position:absolute;top:100px;height:100px;left:200px;}
</style>
<body>
<div id="n_content">
    <span id="content">分享</span>
</div>
<script type="text/javascript">
    window.onload=function(){
        var odiv = document.getElementById("n_content");
        odiv.onmouseover = function(){
            startMove(0);
        }
        odiv.onmouseout = function(){
            startMove(-200);
        }

    }
    timer=null;
    function startMove(iTarget){
        clearInterval(timer);
        var odiv = document.getElementById("n_content");
        timer = setInterval(function(){
            var speed = 0;
            if(odiv.offsetLeft>iTarget){
                speed = -10;
            }else{
                speed = 10 ;
            }
            if(odiv.offsetLeft==iTarget){
                clearInterval(timer);
            }else{
                odiv.style.left = odiv.offsetLeft + speed +'px';
            }

        },30)
    }
</script>   
</body>
</html>

效果如图：
没有移入之前
这里写图片描述
移入鼠标之后

知识点：
1. 样式的定位
父级position用relative
自己position用absolute
2.js获取当前元素和两个事件
odiv = document.getElementById(“n_content”);

onmouseover和onmouseout事件

定时器格式
timer＝null;
timer=setInterval(function(){

},30);

清除计时器
clearInterval(timer);

获取当前元素的距左的距离
odiv.offsetLeft

含笑一过

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享代码格式的js书写

分享代码格式的js书写<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>分享</title></head><style type="text/css"> body{padding:0;margin:0;} #n_content{width:200px;background:
复制链接

扫一扫