<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#div1{

    height:200px;

    width:100px;

    background:red;

    position:absolute;

    left:-100px;

    top:100px;

    }

#div2{

    height:60px;

    width:30px;

    background:#000;

    position:absolute;

    right:-30px;

    top:70px;

    color:#FFF;

    text-align:center;

    line-height:30px;

    }

</style>

<script type="text/javascript">

window.onload = function ()

{

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

    odiv.onmouseover = function ()

    {

        odiv.style.left = '0px';

    };

    odiv.onmouseout = function ()

    {

        odiv.style.left = '-100px';

    }

};

</script>

</head>

<body>

<div id="div1">

    <div id="div2">分享</div>

</div>

</body>

</html>

dom 侧栏分享的更多相关文章

  1. 简单的JS运动封装实例---侧栏分享到

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 多种css3时尚侧栏菜单展开显示效果Off-Canvas Menu Effects

    今天我们想分享多种css3时尚侧栏菜单展开显示效果.侧边栏应用广泛,我们之前已经产生了一些效果灵感.风格演变,今天我们要展示一套新的灵感的现代效果.不同的布局和菜单的同步转换和页面可以让一切看起来更有 ...

  3. 使用django开发博客过程记录3——博客侧栏实现

    说起这个侧栏真是苦恼我很长时间,一开始以为和之前的一样传递额外参数就可以了就像下面这样: class IndexView(ListView): template_name = 'apps/index. ...

  4. 仿酒仙网的一款jQuery侧栏弹出导航栏特效

    仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...

  5. 原生javascript写的侧栏跟随效果

    浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...

  6. 玩转Firefox侧栏

    偶然看到煎蛋网的"玩转firefox侧栏",才注意到它. Firefox侧栏有啥不一样? Firefox可以在侧栏中打开网页. 于是,一系列玩法就出来了... 侧栏打开在线应用 G ...

  7. Centos7下建立rubymine快捷方式到侧栏或桌面

    gnome桌面的所有菜单项都存储如下位置: /usr/share/applications/ 新建一个菜单项,直接在该目录下新建一个后缀名为.desktop的文件即可. $ vi /usr/share ...

  8. ionic 侧栏菜单用法

    第一步: 引入js和css文件我这里是直接引入的cdn,ionic是基于angular的,bundle.min.js把常用angular的js已经压缩到一起,可以直接引入.bundle.min.js, ...

  9. Ionic Js十七：侧栏菜单

    一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示:   用法 要使用侧栏菜单,添加一个父元素,一个中间内容 ,和一个或更 ...

随机推荐

  1. Hosting Your Own NuGet Feeds

    Hosting Your Own NuGet Feeds Hosting the NuGet Gallery Locally in IIS https://github.com/NuGet/NuGet ...

  2. [Golang]使用自建代理访问指定网站

    由于爬虫过于频繁访问某一个网站而被禁ip,只因为贪恋一时爽快而忘记了使用代理,这大概是大多数爬虫初学者遇到的问题吧.但是有一些网站不只是爬虫需要访问,人也是需要访问的.这时候就需要使用代理服务器来访问 ...

  3. source idea of Unit

    After the construction of Global environment setting code, there is a convenient way for us in the f ...

  4. [ionic开源项目教程] - 第9讲 新闻详情页的实现

    目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...

  5. CSS3与页面布局学习总结（三）——BFC、定位、浮动、垂直居中

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  6. spring mvc出现 Failed to convert property value of type 'java.lang.String' to required type 'java.util.Date' for property 'endtime'

    在使用spring mvc中,绑定页面传递时间字符串数据给Date类型是出错: Failed to convert property value of type [java.lang.String] ...

  7. Spring3.1新特性介绍

    Spring3.1新特性 一.Spring2.5之前,我们都是通过实现Controller接口或其实现来定义我们的处理器类.   二.Spring2.5引入注解式处理器支持,通过@Controller ...

  8. HDU 4606 Occupy Cities ★(线段相交+二分+Floyd+最小路径覆盖)

    题意 有n个城市,m个边界线,p名士兵.现在士兵要按一定顺序攻占城市,但从一个城市到另一个城市的过程中不能穿过边界线.士兵有一个容量为K的背包装粮食,士兵到达一个城市可以选择攻占城市或者只是路过,如果 ...

  9. 850 USB 烧录模式

    /************************************************************************* * 850 USB 烧录模式 * 说明: * 本文 ...

  10. HDU 5003 Osu!

    解题思路:水题,不多说. #include<cstdio> #include<cstring> #include<algorithm> #include<cm ...