<!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. linux vi 编辑器命令

    游标控制 h 游标向左移 j 游标向下移 k 游标向上移 l (or spacebar) 游标向右移 w 向前移动一个单词 b 向后移动一个单词 e 向前移动一个单词,且游标指向单词的末尾 ( 移到当 ...

  2. hdu1828(线段树+扫描线)

    又知道了线段树的一种用法,除了单点更新,区间更新,还有这种在一段线段上标号但不往下推. 真是神奇 hdu1828 #include <iostream> #include <stdi ...

  3. 【笨嘴拙舌WINDOWS】实践检验之剪切板查看器【Delphi】

    该程序能够监视Windows剪切板的内容(文字和图片) 其思路是 先调用SetClipBoardViewer(Self.Handle),让Windows剪切板内容发生改变之后,通知本程序: 然后截获W ...

  4. 戏（细）说Executor框架线程池任务执行全过程（上）

    一.前言 1.5后引入的Executor框架的最大优点是把任务的提交和执行解耦.要执行任务的人只需把Task描述清楚,然后提交即可.这个Task是怎么被执行的,被谁执行的,什么时候执行的,提交的人就不 ...

  5. iOS 开发 中级：UIToolbar，UINavigationBar，UITabBar，UIBarButtonItem，UITabBarItem自定义方法总结

    原文:  http://blog.csdn.net/songrotek/article/details/8692866?utm_source=tuicool 对于UIToolbar,UINavigat ...

  6. Linux mv 命令的10个实用例子

    当你想要将文件从一个位置移动到另一个地方并且不想复制它,那么mv 命令是完成这个任务的首选.本文中总结了十个Linux mv 命令的实例,希望能给大家带来一些帮助. 初识 mv 命令 mv 命令是一个 ...

  7. .net4.0下 解决asp.net中“从客户端中检测到有潜在危险的Request.Form值”的错误

    asp.net 2.0 通常解决办法 方案一: 将.aspx文件中的page项添加ValidateRequest="false" ,如下: <%@ Page Validate ...

  8. How to begin with the webpage making

    1.网页制作三剑客必须要会使用.(dreamweaver  /fireworks/flash)2.学习些最基层的html语言的知识,3.在学习一些基本的html标签(要多加练习哦)4.先试着用表格进行 ...

  9. android SDK 快速更新配置（转）

    http://blog.csdn.net/yy1300326388/article/details/45074447 1.强制使用http替换https链接 Tools>选择Options,勾选 ...

  10. （六）6.11 Neurons Networks implements of self-taught learning

    在machine learning领域,更多的数据往往强于更优秀的算法,然而现实中的情况是一般人无法获取大量的已标注数据,这时候可以通过无监督方法获取大量的未标注数据,自学习( self-taught ...