<!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. loadRunner手动关联，通过 web_reg_save_param()函数

    Action() { //<B>sign up now</B></A>      /*     web_reg_save_param_regexp(         ...

  2. 前端框架VUE----导入Bootstrap以及jQuery的两种方式

    Vue引入bootstrap主要有两种方法 方法一:在main.js中引入,此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无效. 一.引入jQuery 在当前项目的 ...

  3. GoldenGate 12.3 MA架构介绍系列(2) - 数据同步测试

    安装配置可参考上一篇:http://www.cnblogs.com/margiex/p/8071957.html 安装完成之后,会自动启动ServiceManager服务,此时,可以通过浏览器访问. ...

  4. 虚拟继承C++

    C++中虚拟继承的概念 为了解决从不同途径继承来的同名的数据成员在内存中有不同的拷贝造成数据不一致问题,将共同基类设置为虚基类.这时从不同的路径继承过来的同名数据成员在内存中就只有一个拷贝,同一个函数 ...

  5. 获取微信access_token

    /** * 获取微信access_token * @return mixed */function get_access_token() { $appId = C('APPID'); $secret ...

  6. JDK JRE JVM的区别

    Jdk[Java Development ToolKit]就是java开发工具箱, JDK是整个JAVA的核心,里边包含了jre,它除了包含jre之外还包含了一些javac的工具类,把java源文件编 ...

  7. JS传值中文乱码解决方案

    JS传值中文乱码解决方案 一.相关知识 1,Java相关类: (1)java.net.URLDecoder类 HTML格式解码的实用工具类,有一个静态方法:public static  String ...

  8. 关于__declspec(dllexport)

    windows下dll动态库函数的导入与导出. __declspec Microsoft Specific __declspec ( extended-attribute ) declarator l ...

  9. 写给大忙人的nginx核心配置详解

    由于当前很多应该都是前后端分离了,同时大量的基于http的分布式和微服务架构,使得很多时候应用和不同项目组之间的系统相互来回调用,关系复杂.如果使用传统的做法,都在应用中进行各种处理和判断,不仅维护复 ...

  10. poj 1275 Cashier Employment - 差分约束 - 二分答案

    A supermarket in Tehran is open 24 hours a day every day and needs a number of cashiers to fit its n ...