<!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. python下载图片

    import re import  urllib.request   def getHtml(url): page = urllib.request.urlopen(url) html = page. ...

  2. HDU 4655 Cut Pieces(数学分析题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4655 题意:给出n个石子,第i个石子可以染ai种颜色.对于每种颜色,比如颜色1221,我们称有3段.连 ...

  3. 《OD学HBase》20160814

    一.HBase引入 http://hbase.apache.org/ 大数据的数据库 1. 概述 Hadoop生态系统中的一个分布式.可拓展.面向列.可伸缩,具有自动容错功能的数据库. NoSQL数据 ...

  4. nginx fastcgi php-fpm的关系梳理

    CGI(Common Gateway Interface)CGI全称是“公共网关接口”(Common Gateway Interface),HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具 ...

  5. Winform——计算器

    namespace 计算器2._0 { public partial class Form1 : Form { public Form1() { InitializeComponent(); } pr ...

  6. Android利用Http下载文件

    Android利用Http下载文件 一.场景 下载存文本文件和下载如mp3等大容量的文件 界面 二.代码编写 1.AndroidMainfest.xml中配置 主要是解决网络权限和写SDCard的权限 ...

  7. Android 最火的快速开发框架XUtils

    参考:http://www.oschina.net/p/xutils 项目git地址https://github.com/wyouflf/xUtils 目录(?)[-] 最近搜了一些框架供初学者学习比 ...

  8. UVa 10954 (Huffman 优先队列) Add All

    直接用一个优先队列去模拟Huffman树的建立过程. 每次取优先队列前两个数,然后累加其和,把这个和在放入到优先队列中去. #include <cstdio> #include <q ...

  9. web项目路径问题

    路径    相对路径        URL中第一个字符不为“/”        request.getRequestDispatcher("b");        相对于该代码所在 ...

  10. 免费的WebService

    天气预报Web服务,数据来源于中国气象局 Endpoint :     http://www.webxml.com.cn/WebServices/WeatherWebService.asmx Disc ...