实现一个右侧显示和隐藏的功能，想请教各位
http://developer.51cto.com/art/201208/354987.htm
像这个里面右侧有一个分享的按钮，我想实现它的效果，有相对浏览器固定，还有滑出隐藏功能，我试过很久都没有达到预期的效果，希望能有高手指点。。最好有源码示例。。。新手万分感激。。。。
[解决办法]
这种效果主要考虑mouseover和mouseout的冒泡事件，根据网上解决冒泡的方法给楼主简单的整了下，希望对楼主有所帮助：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>滑动与滑出效果</title>
<style type="text/css">
body,html{
padding: 0px;
margin: 0px;
}
.mainContent{
margin: 0 auto;
width: 800px;
height: 2000px;
}
#bdshare{
position: fixed;
right: -215px;
top: 195px;
overflow: hidden;
cursor: pointer;
}
.shareContent{
float: left;
margin-top: 50px;
}
.shareRight{
float: left;
width: 208px;
height: 328px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="mainContent">
<div id="bdshare">
<div id="shareId" class="shareContent">
<img src="http://bdimg.share.baidu.com/static/images/r0.gif" />
</div>
<div class="shareRight">里面自己布局就可以了</div>
</div>
</div>
<script type="text/javascript">
/**
* 用于检查一个对象是否包含在另外一个对象中
* @method contains
* @param {string} parentNode 父节点
* @param {string} childNode 子节点
*/
function contains(parentNode, childNode) {
if (parentNode.contains) {
return parentNode != childNode && parentNode.contains(childNode);
}
else {
return !!(parentNode.compareDocumentPosition(childNode) & 16);
}
}
/**
* 用于检查鼠标是否真正从外部移入或者移出对象的
* @method checkHover
* @param {string} e 当前的事件对象
* @param {string} target 目标对象
* @param {string} relatedTarget 属性代表的就是鼠标刚刚离开的那个节点，当触发mouseout事件时它代表的是鼠标移向的那个对象。
* 由于MSIE不支持这个属性，不过它有代替的属性，分别是 fromElement和toElement
*/
function checkHover(e,target){
var rel = getEvent(e).relatedTarget ,
from = getEvent(e).fromElement ,
to = getEvent(e).toElement;
if (getEvent(e).type=="mouseover") {
return !contains(target,rel
[解决办法]
from) && !( (rel
[解决办法]
from)===target );
} else {
return !contains(target,rel
[解决办法]
to) && !( (rel
[解决办法]
to)===target );
}
}
/**
* 用于在MSIE或者FF下返回一个可用的event对象
* @method getEvent
* @param {string} e 当前的事件对象
*/
function getEvent(e){
return e
[解决办法]
window.event;
}
window.onload = function(){
var bdshare = document.getElementById("bdshare");
var shareId = document.getElementById("shareId");
shareId.onmouseover = function(e){
if(checkHover(e,shareId)){
bdshare.style.right = "0px";
}
}
bdshare.onmouseout = function(e){
if(checkHover(e,bdshare)){
bdshare.style.right = "-215px";
}
}
}
</script>
</body>
</html>
