<!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. Linux基础命令---arp

    arp arp指令用来管理系统的arp缓冲区,可以显示.删除.添加静态mac地址.ARP以各种方式操纵内核的ARP缓存.主要选项是清除地址映射项并手动设置.为了调试目的,ARP程序还允许对ARP缓存进 ...

  2. linux 查找locate find

    1.locate locate指令和find找寻档案的功能类似,但locate是透过update程序将硬盘中的所有档案和目录资料先建立一个索引数据库,在 执行loacte时直接找该索引,查询速度会较快 ...

  3. python的paramiko模块-远程登录linux主机并操作

    paramiko是一个用于做远程控制的模块,使用该模块可以对远程服务器进行命令或文件操作. 如果python服务器对被远程控制机器开启了免密验证,即在python服务器上可通过ssh 用户名@被控制机 ...

  4. P2763 试题库问题（dinic）

    P2763 试题库问题 dinic 搞个虚拟源点和汇点,瞎建建边就好辣. 偷张图↓↓ 如果没满流就是无解辣 输出方案咋办呢? 枚举每种类型,蓝后枚举它们的边 如果该边被使用了(通过判断反向边的流量), ...

  5. bzoj 2091 The Minima Game - 动态规划 - 博弈论

    题目传送门 需要验证权限的传送门 题目大意 Alice和Bob轮流取$n$个正整数,Alice先进行操作.每次每人可以取任意多的数,得分是这一次取的所有数中的最小值.Alice和Bob都足够聪明,他们 ...

  6. Codeforces 711D Directed Roads - 组合数学

    ZS the Coder and Chris the Baboon has explored Udayland for quite some time. They realize that it co ...

  7. Python3 tkinter基础 Entry validate validatecommand 失去焦点时，检查输入内容

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  8. Git rebase的使用

    rebase 在 Git 中整合来自不同分支的修改主要有两种方法:merge 以及 rebase. 在本节中我们将学习什么是“rebase”,怎样使用“rebase”,并将展示该操作的惊艳之处,以及指 ...

  9. [POI2011]Garbage 欧拉回路

    [POI2011]Garbage 链接 https://www.lydsy.com/JudgeOnline/problem.php?id=2278 https://loj.ac/problem/216 ...

  10. 【做题】hdu5514 Frogs——另类容斥

    题意是给出n个m的约数,问[0,m-1]中至少被其中一个约数整除的整数和.(n<=10000,m<=1000000000) 直接容斥的话,是2^n再拖个log的复杂度,加上当前的数大于m时 ...