<!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. 谈谈 char *num="123";和char num[4]="123";的区别

    最近写程序的时候发现这样一个问题 #include<iostream> #include <string.h> using namespace std; void revers ...

  2. Machine Learning for hackers读书笔记(一)使用R语言

    #使用数据:UFO数据 #读入数据,该文件以制表符分隔,因此使用read.delim,参数sep设置分隔符为\t #所有的read函数都把string读成factor类型,这个类型用于表示分类变量,因 ...

  3. 【笨嘴拙舌WINDOWS】设备无关图（*.bmp）

    设备无关图在windows上面就是一个扩展名为.bmp的文件.我们知道每一种文件都是一个二进制流,只是这个二进制流的开头几个字节是规定了文件的格式..bmp的文件格式如下 “其中信息头是windows ...

  4. Qt之自定义搜索框

    简述 关于搜索框,大家都经常接触.例如:浏览器搜索.Windows资源管理器搜索等. 当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定. 方案一:调用QLineEdit现有接口 void ...

  5. 二分图带权匹配、最佳匹配与KM算法

    ---------------------以上转自ByVoid神牛博客,并有所省略. [二分图带权匹配与最佳匹配] 什么是二分图的带权匹配?二分图的带权匹配就是求出一个匹配集合,使得集合中边的权值之和 ...

  6. T-SQL备忘(3)：分组合并

    --CREATE TABLE test(code varchar(50), [name] varchar(10),[count] int ) --INSERT test SELECT '001' , ...

  7. 剑指offer—第三章高质量的代码（按顺序打印从1到n位十进制数）

    题目:输入一个数字n,按照顺序打印出1到最大n位十进制数,比如输入3,则打印出1,2,3直到最大的3位数999为止. 本题陷阱:没有考虑到大数的问题. 本题解题思路:将要打印的数字,看成字符串,不足位 ...

  8. 表单Ext.form.FormPanel(转)

    1.表单 对于传统的b/s应用来说,数据录入元素是放在表单<form>标签里面的.而对于ExtJS应用来说,则可以直接使用FormPanel控件来存放表单中的元素.FormPanel继承自 ...

  9. shell script入门

    从程序员的角度来看, Shell本身是一种用C语言编写的程序,从用户的角度来看,Shell是用户与Linux操作系统沟通的桥梁.用户既可以输入命令执行,又可以利用 Shell脚本编程,完成更加复杂的操 ...

  10. Shell 的source命令

    source命令用法: source FileName 作用:在当前bash环境下读取并执行FileName中的命令. 注:该命令通常用命令“.”来替代. 如:source .bash_rc 与 . ...