<!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();

            }

            oDiv.onmouseout=function(){

                startMove(-);

            }

        }

        var timer=null;

        function startMove(iTarget){

            var oDiv=document.getElementById('div1');

            clearInterval(timer);

            timer=setInterval(function(){

                var speed=;

                if(oDiv.offsetLeft>iTarget){

                    speed=-;

                }else{

                    speed=;

                }

                if(oDiv.offsetLeft==iTarget){

                    clearInterval(timer);

                }else{

                    oDiv.style.left=oDiv.offsetLeft+speed+'px';

                }

            },);

        }

</script>

</html>

js实现网站首页分享滑块的更多相关文章

  1. Sequence.js - 适合电子商务网站的图片滑块

    Sequence.js 是一个非常现代的图片滑动效果,特别适合电子商务网站或者企业产品展示功能.带有图片缩率图,能够呈现全屏图片浏览效果.结合 CSS3 Transition 实现响应式的滑块效果. ...

  2. 基于jQuery的网站首页宽屏焦点图幻灯片

    今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...

  3. 抓取Bing每日图片作为网站首页背景

    把Bing搜索的背景图片设置为自己网站的背景,实现背景及资讯的每日更新 效果图如下: 理一下思路,首先我们要抓取Bing的每日图片及最新资讯,然后保存图片及信息到本地,最后显示图片及资讯到网站首页. ...

  4. 织梦DEDECMS网站首页如何实现分页翻页

    织梦DEDECMS模板网站首页如何实现首页分页和翻页 方法如下:(三种方法,自己选择一种来实现分页吧) 第一种:调用ajax和参数的(不推荐)1.必须在DEDE首页模板中的<head>&l ...

  5. 保持url唯一性 解决多个网站首页问题

    原文地址:http://www.seowhy.com/bbs/thread-2694339-1-1.html 在网站SEO优化过程中,经常会遇到这样或者那样的常见技术型问题,达闻现将此类常见技术问题总 ...

  6. Vue 网站首页加载优化

    Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用, 其他就是对接口优化等  1. v ...

  7. 对石家庄铁道大学网站首页进行UI分析

    对石家庄铁道大学网站首页进行UI界面分析首先,铁道大学的网页首页分为图文热点,学校新闻,校内公告,媒体看铁大,学术咨询等等模块.通过分析这些模块,可以看出,学校网站首页针对的使用对象有很多,包括学校领 ...

  8. dedecms如何随机调用指定分类下的文章到网站首页

    dedecms是全静态的,有时会因为其他事情好几天没写文章推荐到首页,那样对se不是很友好.原本ytkah是想在网站首页上半部分调用几篇id从200到500的文章随机展示的,这样每次更新首页给se的赶 ...

  9. js获取网站根目录

    //js获取网站根路径(站点及虚拟目录),获得网站的根目录或虚拟目录的根地址         function getRootPath(){        var strFullPath=window ...

随机推荐

  1. strace跟踪多进程与内核的交互

    1.ptrace的说明 ptrace原型: #include <sys/ptrace.h> long ptrace(enum __ptrace_request request, pid_t ...

  2. 自学Java第四周的总结

    在这一周里我主要把以前学的知识复习了一遍,加深了自己对那些知识点的熟悉程度.另外我还学习了有关于Java中的异常处理.继承.抽象类等相关知识.了解了其基本意义,即继承是java面向对象编程技术的一块基 ...

  3. （2018干货系列四）最新Python学习路线整合

    怎么学Python Python是一种面向对象的解释型计算机程序设计语言,纯粹的自由软件,常被昵称为胶水语言,能够把用其他语言制作的各种模块(尤其是C/C++)很轻松地联结在一起. Python初级开 ...

  4. 柳暗花明又一村的———for循环

    学习过了do while循环和while循环后,我们终于剩下了循环结构重的最后一个-------for循环 本人认为for循环相比于do while ,while而言.好学一点下面就是我对for循环的 ...

  5. Git 常用命令列表

    1 常用 $ git remote add origin git@github.com:yeszao/dofiler.git # 配置远程git版本库 $ git pull origin master ...

  6. 2019/3/26 wen 数组

  7. 安装PHP扩展32位与64位的误区(x86与x64的查看)

    在安装PHP扩展(DLL,SO),除了需要对应的PHP版本外,在WINDOWS还需要区分(TS线程,NTS非线程),如何判断呢? 1.如何判断是NTS还是TS(WINDOWS用户) 看PHP所在目录中 ...

  8. 《论vue在前后端分离项目中的实践之年终总结》

    我是2014年的时候开始了解知道的vue,当时vue还不太成熟,想用但是又怕自己hold不住,况且那时候vue还没有成熟的(路由.验证.ui组件)插件,社区也是不温不火的,再说也没有合适的机遇让我去项 ...

  9. 初识 GitHub

    初识 GitHub 一.注册账号 GitHub 官网:https://github.com/ 点击右上角sign up,进行注册,注册界面如下: 填写用户名,邮箱地址,密码,下滑点击绿色按钮:Crea ...

  10. k8s (kubernetes) 代码分析

    简易入门 结构图: debug 先了解 etcd API源码分析 API server 是中心． https://www.jianshu.com/p/88c6ed78b668 $ git ls-fil ...