js实现网站首页分享滑块

Posted 人在钱途

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现网站首页分享滑块相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>
<style>
        #div1{
            width:150px;
            height: 200px;
            background-color: green;
            position: absolute;
            left:-150px;
            
        }
        #div1 span{
            position: absolute;
            width: 20px;
            height: 60px;
            line-h eight:20px ;
            background: blue;
            right:-20px;
            top:70px;
        }
</style>
<body> 
                <div id="div1" >
                    
                    <span>分享到</span>
                </div>
           
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
        window.onload=function(){
            var oDiv=document.getElementById(‘div1‘);
            oDiv.onmouseover=function(){
                startMove(0);
            }
            oDiv.onmouseout=function(){
                startMove(-150);
            }
        }
        var timer=null;
        function startMove(iTarget){
            var oDiv=document.getElementById(‘div1‘);
            clearInterval(timer);
            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>
</html>

 

以上是关于js实现网站首页分享滑块的主要内容，如果未能解决你的问题，请参考以下文章

外贸建站之网站导航栏菜单高亮JS实现代码分享

超级有用的9个PHP代码片段

关于js----------------分享前端开发常用代码片段

滑块菜单片段中的可交换选项卡

单击选项以选择颜色后更改滑块

简单的方法来分享/讨论/协作的代码片段？