<!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. flask 对URL进行安全验证

    对URL进行安全验证 虽然我们已经实现了重定向会上一个页面的功能,但是安全问题不容忽视,鉴于referer和next容易被串篡改的特性,我们需要对这些值进行验证,否则会形成开放重定向漏洞   以URL ...

  2. JustOj 1910: 人见人爱A+B

    [提交][状态][讨论版] 题目描述 北大的acm上面已经有10来道A+B的题目了,相信这些题目曾经是大家的最爱,希望今天的这个A+B能给大家带来好运,也希望这个题目能唤起大家对ACM曾经的热爱.   ...

  3. Python+OpenCV图像处理（六）—— ROI与泛洪填充

    一.ROI ROI(region of interest),感兴趣区域.机器视觉.图像处理中,从被处理的图像以方框.圆.椭圆.不规则多边形等方式勾勒出需要处理的区域,称为感兴趣区域,ROI. 代码如下 ...

  4. java加载配置文件信息

    #基金数据存放根目录fund_save_root_path=E:/fundCrawling #龙虎榜数据存放根目录long_hu_root_path=E:/longHuCrawling #巨潮数据存放 ...

  5. vue -resource 文件提交提示process,或者拦截处理

    this.$http.post('url',fd||data,{emulateJSON:true}).then(fn(res){},fn(res){}) process成功案例 _self.$http ...

  6. 怎样从外网访问内网php-fpm？

    本地安装了一个php-fpm,只能在局域网内访问,怎样从外网也能访问到本地的php-fpm呢?本文将介绍具体的实现步骤. 准备工作 安装并启动php-fpm 默认安装的php-fpm端口是9000. ...

  7. MySQL PXC集群部署

    安装 Percona-XtraDB-Cluster 架构: 三个节点: pxc_node_0 30.0.0.196 pxc_node_1 30.0.0.198 pxc_node_2 30.0.0.19 ...

  8. mysql日志种类、二进制日志模式、mysqlbinlog解析二进制日志

    mysql日志的种类 二进制日志(binary log):记录数据更新的操作,mysqlbinlog 可查看二进制日志文件 错误日志(error log):记录mysql服务进程mysqld的启动.关 ...

  9. Spring Boot(十七)：使用Spring Boot上传文件

    Spring Boot(十七):使用Spring Boot上传文件 环境:Spring Boot最新版本1.5.9.jdk使用1.8.tomcat8.0 一.pom包配置 <parent> ...

  10. Jenkins实现SVN+Maven+Java项目的持续集成

    Jenkins 2.46.1 Centos 7.3 JDK 7 安装jdk/maven/svn 在Jenkins所在的Linux机器安装jdk和maven,步骤就不说了,下面是环境变量: export ...