javascript實現一個簡單的隱藏式側邊欄
常見的隱藏式側邊欄，如分享、聯絡客服等。通過設定速度來實現滑入滑出的動態效果
以下是程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#div1{width: 160px; height: 320px; background: #fff; /*border: 1px solid red;*/position: relative;left:-140px;top:100px;}
#div1 .hide{width: 140px; height: 320px; background: cyan; float: left;position: absolute;left: 0;top: 0;}
#div1 .show{width: 17px; height: auto;background: skyblue;border: 1px solid #000;float: right; position: absolute; top: 39%;right: 0;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
var timer;
oDiv.onmouseover=function(){
//startMove(10,0);speed,end
startMove(0);
//這裡稍作優化，原來傳入兩個引數改為一個引數
};
oDiv.onmouseout=function(){
//startMove(-10,-140);
startMove(-140);
}
function startMove(end){
/*var oDiv=document.getElementById('div1');*/
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
//從-140到0,速度為正，從0到-140，速度為負
if(oDiv.offsetLeft>end){
speed=-10;
}else{
speed=10;
}
if(oDiv.offsetLeft==end){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
}
</script>
</head>
<body>
<div id="div1">
<div class="hide">
<ul>
<li>qq</li>
<li>weibo</li>
<li>csdn</li>
</ul>
</div>
<div class="show">
<span>分享到</span>
</div>
</div>
</body>
</html>
相關推薦
javascript實現一個簡單的隱藏式側邊欄
常見的隱藏式側邊欄，如分享、聯絡客服等。通過設定速度來實現滑入滑出的動態效果 以下是程式碼 <!DOCTYPE html> <html><head><meta charset="utf-8" /><title>&l
HTML、CSS、JavaScript 實現一個簡單的計算器
計算器效果圖： 程式碼如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>計算器</title> </head
Html+javascript實現一個簡單的計算器，可繼續計算
先展示出計算器的大致樣子 <body> <div id="main"> <table frame="box" rules="all"> <tr> <td colspan="5" ><input
JavaScript 實現一個簡單的MVVM前端框架(ES6語法)
模仿 image 詳細 發布 regexp doc eof bject htm 前言 隨著前端各大框架的崛起，為我們平時的開發帶來了相當的便利，我們不能一直停留在應用層面，今天就自己動手實現一個乞丐版的MVVM小框架 完整代碼github地址 效果 html代碼 <
利用js編寫響應式側邊欄
為了練手，自己學敲網站時剛好碰到需要製作側邊欄，在網上也查了各種外掛以及框架都可以實現這個功能，但是想自己學著用js原生學一個試試，於是就初略完成了側邊欄的實現，可以讓初學者參考參考，程式碼能力有限。 其中主要設計的就是animate（）函式，animate() 方法執行
改進Bootstrap中的響應式側邊欄
側邊欄在響應式設計中起到很大的作用，當螢幕小到手機的螢幕時，能夠自適應螢幕大小的側邊欄固然能夠為網站新增色彩，那麼在Bootstrap的框架中提供了導航條和下拉選單的元件，詳情請自行到官網Bootstrap的文件檢視，這裡就不作介紹了。 本文是將其中的導航
個人中心的側邊欄--用jq實現側邊欄點擊一塊出現一塊其他幾塊隱藏並且同時改變前面的img圖片
icon -a 儀器 cor 個人 con 圖片 AC 默認 實現的效果： 默認狀態下： 點擊下面的標題時： html代碼： <h2>商品分類</h2> <div class="categories"> <ul cla
JavaScript之實現一個簡單的Vue
方法 ole tro def pre 一個 進行 this upd vue的使用相信大家都很熟練了，使用起來簡單。但是大部分人不知道其內部的原理是怎麽樣的，今天我們就來一起實現一個簡單的vue。 Object.defineProperty() 實現之前我們得先看一下Obje
通過ASP.NET MVC框架 + 原生JavaScript + Ajax + SQL SERVER 實現一個簡單的有論壇功能的網站（有通過iis發布的例子）
簡單的 接下來 發送 思維 學會 control javascrip 數據庫 今天 ASP.NET MVC. M 為Model模型層， V 為View視圖層， C 為Controller控制層。要想使用MVC框架來寫網站就需要了解M V C 的作用分別為哪些。給大家簡單
CSS3實現側邊欄快速定位的隱藏和消失
Dome <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3隱藏懸浮網站左側標籤式導航欄程式碼 </title>
JavaScript 之實現一個簡單的 Vue
vue的使用相信大家都很熟練了，使用起來簡單。但是大部分人不知道其內部的原理是怎麼樣的，今天我們就來一起實現一個簡單的vue Object.defineProperty() 實現之前我們得先看一下Object.defineProperty的實現，因為vue主要是通過資料劫
通過ASP.NET MVC框架 + 原生JavaScript + Ajax + SQL SERVER 實現一個簡單的有論壇功能的網站（有通過iis釋出的例子）
ASP.NET MVC. M 為Model模型層， V 為View檢視層， C 為Controller控制層。要想使用MVC框架來寫網站就需要了解M V C 的作用分別為哪些。給大家簡單的介紹一下： 1.當你的這個網站要與資料庫互動的時候，你可以使用EF建立一個數據庫模型,也可以用類存放你所需互動
A Demo Allocator——實現一個簡單的自定義顯式分配器
前言 在本篇部落格中，我們擬用C語言實現簡單的一個顯式分配器，它模擬實現了C標準庫中的動態記憶體分配的過程。我們給出了其詳細的設計方案與具體實現，也在文章的最後給出了現實應用中，分配器所採用的一些常見設計。 背景知識 首先介紹一下關於動態記憶體分配的背
關於Qt實現側邊欄隱藏與顯示的效果
通過ToolButton來實現某控制元件的隱藏與顯示，具體功能為點選toolbutton後，某widget（以tabWidget為例）隱藏於左側，toolbutton位於（0，0）座標處，顯示的icon也進行切換；再次點選後，tabwidget展開，toolbutton還原
js實現自動隱藏側邊欄
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4
JS實現div的顯示和隱藏 側邊欄區域性偽重新整理的實現
效果描述：點選a標籤1，觸發事件open(obj)，顯示div內容1，點選a標籤2，隱藏div內容1,並顯示div內容2……js程式碼：<script language="javascript"> function opens(obj) { for (v
實現一個簡單的lazyman
實現 blog cti name init timeout bin bsp stack function lazyman(name) { return new lazyman.fn.init(name); } lazyman.fn = lazyman.proto
用java實現一個簡單的單用戶登陸功能的思路
get 單用戶 這樣的 簡單的 lock ref 數據庫 清除 一個 引用 所謂“單用戶單賬戶登錄”是指：在同一系統中，一個用戶名不能在兩個地方同時登錄。 我們參照 QQ 實現效果：當某賬號在 A 處登錄後，在未退出的情況下，如果再到 B 處登錄，那麽，系統會擠下 A 處
【Java】Swing+IO流實現一個簡單的文件加密程序
als oncommand override fault 源文件 abs directory imp select EncrytService package com.my.service; import java.io.File; import java
【Java】Swing+IO流實現一個簡單的文件加密程序（較完整版）
move 初始 baidu images 文件選擇器 while login 一個 ktr 留著參考 beans package com.my.bean; import java.io.Serializable; public class