<!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. php CI框架中URL特殊字符处理与SQL注入隐患

    php CI框架中URL特殊字符处理与SQL注入隐患 php CI框架中URL特殊字符有很多是不支持的,导致像c++,括号这些常用的分类,字符都无法正常显示很头痛,而在配置里增加单引号' 反斜杠\ 这 ...

  2. webpack系统配置

    简言之,webpack 是一个模块打包器 (module bundler),能够将任何资源如 JavaScript 文件.CSS 文件.图片等打包成一个或少数文件. 为什么要用Webpack? 首先, ...

  3. Web前端开发(基础学习+坑）

    0.基本说明 0.内容为课堂所学基本知识,加自己踩过的坑 1.web基本框架:html+css+JavaScript,html为网页骨架,css为网页美化,JavaScript负责页面动态交互,脚本等 ...

  4. C++ 开源库列表

    https://zh.cppreference.com/w/cpp/links/libs

  5. Centos7 安装 apache + php7.0 环境

    安装apache rpm -qa|grep httpd   查看是否安装 yum install httpd  安装 service httpd start  启动服务 测试是否 启动       I ...

  6. Python+selenium点击网页上指定坐标

    from selenium import webdriver from selenium.webdriver.common.action_chains import ActionChains dr = ...

  7. 第一个django项目-通过命令行和pycharm两种方式

    以本机环境为例,ip地址为172.20.16.148,windows平台,虚拟环境路径为d:\VirtualEnv,项目存放位置为d:\DjangoProject 命令行方式 1.进入虚拟环境创建项目 ...

  8. P1357 花园

    洛咕原题 题解 状压dp+矩乘 首先看到题目说M<=5,这么小的数据明显可以用状压保存相邻状态,于是可以得到一个80分的dp: 先筛出所有可用的状态,然后建立一个矩阵保存可转移的状态,再然后把每 ...

  9. linux下安装与部署redis

    一.Redis介绍 Redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcache类似,但很大程度补偿了Memcache的不足,它支持存储的value类型相对更多 ...

  10. PID算法控制简单理解

    1 传统的位式控制算法 用户期望值Sv(设定值)经控制算法输出一个输出信号OUT,输出信号加载到执行部件上(像MOS管等)对控制对象进行控制(步进电机.加热器等),控制对象的当前值(Pv)如速度通过传 ...