dom 侧栏分享

<!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>
时间: 2024-10-10 21:30:49

dom 侧栏分享的相关文章

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

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width: 100px; height: 200px; background: red;

侧栏工具条开发

我们能学到什么 1.使用Sass更好的书写CSS 2.使用RequireJS进行模块化开发,编写出方便复用的代码 3.使用CSS3实现简单的动画效果 ########################################################################################## 使用Sass编写css Sass的基础知识 将sass编译成css -- koala工具的使用 http://koala-app.com/index-zh.html 在

Ionic Js十七:侧栏菜单

一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: ? ? 用法 要使用侧栏菜单,添加一个父元素,一个中间内容 ,和一个或更多 指令. <ion-side-menus> <!-- 中间内容 --> <ion-side-menu-content ng-controller="ContentController"> </ion-side-menu-content> &

JS 侧栏导航点击定位页面内容位置及滚动条滚动改变导航元素对应状态

近来,小码哥应公司需求方要求,要在未来一个专题页面中加入一个效果:即,侧栏导航点击实现页面内容部分运动到相应位置,以及随着body滚动条滚动使导航按钮效果和页面相应内容对应上的一个效果.起初小码哥做的时候,只实现了点击导航按钮让页面相应的内容定位到和按钮相应的地方(在此可以查看小码哥先前写的关于锚点的文章):而随滚动条实现按钮和内容相对应的效果没有做出来,由于项目专题的时限问题,小码哥借鉴了网上一个案例,将其套在自己的页面就够里,实现了想要的效果. 废话不多说了,直接上码吧,,,,,,,,,,,

JS——侧栏导航点击滑入滑出效果

对于定位的侧栏导航点击滑入滑出这一效果,我想很多人都明白原理,并且很简单的就能运用JS+Jquery就能做出.而且是一个非常常见的简单效果.在此呢,小码哥只是为了自己以后能够翻看,还有就是给那些刚入门javascript的新人们一点启发. 作为入门javascript的人来说,明白一个效果是怎么实现的尤为重要.即原理是怎么回事尤为重要!小码哥昨天在路上偶遇一应届毕业生,刚从青岛来北京找工作.是学计算机的,C及C++起步,由此基础,我说你学什么语言都有优势.必定逻辑基础有了不是!? 废话不说了,直

Firefox侧栏书签打不开

Firefox侧栏书签打不开 1. 综述 近期使用FireFox遇到一个问题,侧栏的书签打不开,点击没反应,要按两次Ctrl + B关闭再打开侧栏才能用.今天试着解决了一下,现在倒是能用了,但是还是不知道为什么. 再描述一下问题,打开FireFox,随着打开的侧栏书签用不了,但关闭侧栏,再开,就可以用.但每次这么按两下Ctrl + B太烦了…… 2. 解决过程 先说结果,最后是安装了上一个版本——FireFox 48.0.2——就能用了,由于没有关自动更新,它又自己更新到49.0.1的最新版,不

给wordpress后台侧栏菜单添加自定义字段的方法

我们在使用wordpress做网站的时候,难免有一些需要在后台设置侧栏菜单下添加自定义字段的情况.下面就简单说说一下,如何在后台设置侧栏菜单下添加自定义字段? 在这里我们主要是使用wordpress的add_action(),下面通过自己的代码来简单说明一下. 我的做法是:首先在自己的模板中新建一个setContent.php文件,(不新建也可以把代码直接写在functions.php里). setContent.php代码: function customSetting(){ ?> <div

iOS 仿照网易侧栏效果demo

这是一个仿照网易客户端侧栏效果(demo),用最简单的方法实现,以下只是一部分代码:有兴趣的同学可以到gitHub下载,下载地址:demo #import "ViewController.h" #import "BSYItem.h" #import "BSYView.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [

h5侧边栏滑动效果 根据Bootstrap3的侧栏导航改编

主要用到鼠标的 hover 事件,除了点击事件全部 css 完成   根据Bootstrap3的侧栏导航改编 <style> html, body, * { margin: 0; padding: 0; } #mine { position: relative; height: 100vh; width: 100%; background: cadetblue; } #side { position: fixed; height: 100%; } #toggle_side { width: 2