javascript制作网页侧边弹出框的思路和实现代码

现在是周末。明天是总结的时候了。我觉得我学到了一些东西，但我觉得我没有学到很多东西。明天再分析吧。我们先来看看今天要分析的问题。这张图大家都很熟悉：

————33543 . ——33543

今天我们就来分析一下，制作一下。首先我们来介绍一下这个弹出框的特点：*总是贴在页面边框上*不会随着页面的升降而改变位置*当鼠标经过时，会弹出详细的信息，当它离开时，会恢复到原来的状态，这样我们大概可以想到几个可能用到的功能：position的绝对定位；鼠标离开的监控和方法；这些肯定会用，但是除了这些，还用什么，是怎么实现的？1.要实现所有显示的界面状态，先写html代码，复制代码如下： span style=' font-size :12 px；'Div id=' share left ' class=' share left ' Div class=' list ' pa href=' # ' title=' prompt ' prompt/a/p/Div p class=' msg ' id=' main msg ' on mouseover=' show tip()' share to/p/Div/span后跟css样式编码。复制的代码如下： span style=' font-size :12 px；'* { margin : 0；padd : 0；} #shareLeft{position:固定；背景-颜色：黄色；top: 50px宽度： 300 px；高度： 600 px；right: 0px} # mainMsg { color: # fff绝对位置：cursor:指针；文本对齐：中心；背景-颜色：红色；top: 60px宽度： 100 px；高度：400 px；padding: 20px 0 0 10px左边距：-100px；border-radius :50 px 0 0 50 px；} .右列表{ float:背景-color : # fff；宽度： 280 px；高度： 580 px；margin: 10px 10px 10px 10px}/span这里分析一下要点：a .位置：固定这个固定位置很好；b，对：0px，这个的具体应用后面会详细介绍，但这里也很关键；3.#mainMsg的margin-left:-100px，这个地方也很重要，来看看效果。

哈哈，这是今年最大的弹匣，请大家笑哈哈。我们继续说js实现了弹出效果。2.隐藏细节部分，省略提示部分。这个比较简单。如果您修改它，您只需要更改shareLeft的右值。right=-300px，也就是div的宽度。3.js实现了弹出效果。这不是我们第一次使用这种计时器效果。js实现打字机效果的时候，我们就用了。这里，我们只是更改了定时对象，并复制了如下代码： span style=' font-size :12 px；'脚本类型=' text/JavaScript ' var timer=null；var计数=0；var tip=函数(位置、目标、速度){ clearInterval(定时器)；timer=setInterval(function(){ if(count position . offsetwithts){ clearInterval(timer))；} else { position . style . right=window . count ' px '；window.count};}，速度)；};函数show tip(){ var position=document . getelementbyid(' share left ')；tip(position，document.body.clientWidth，1000)；};/script/span这段代码中最重要的几点是：offsetWidth，style.right等。这个暂时不说了，不过会有专门的文章来介绍。先这样用吧，才知道意思。想通了再说吧。现在效果已经达到了。请试试。