javascript制作的网页侧边弹出框思路及实现代码
更新时间：2014年05月21日 09:46:38 作者：
这篇文章主要介绍了javascript制作的网页侧边弹出框思路及实现代码,需要的朋友可以参考下
到周末了，明天该总结一下了，感觉学到了些东西，又感觉没学多少东西，具体明天再分析吧，先来看看今天要分析的问题。
这样的图片相比大家都很熟悉：
————————————
今天我们就来分析制作一下，先来介绍下这种弹出框的特点：
* 始终依附在页面边框上
* 不随页面的上升下降而改变位置
* 鼠标经过时，会弹出详细信息，离开时，恢复最初状态
这样我们就能大概想到几个可能会用到的功能：postion的绝对定位；鼠标经过离开的监听和方法；这些是肯定会用的，但是，除了这些还用到了哪些呢，究竟又是怎么是实现的呢？
1、实现全部显示的界面状态
先进行编写html代码
<span style="font-size:12px;"> <div id="shareLeft" class="shareLeft">
<div class="list">
<p><a href="#" title="提示">提示</a></p>
</div>
<p class="msg" id="mainMsg" onmouseover="showTip()">
分享到
</p>
</div></span>
然后是css样式编码
<span style="font-size:12px;">*{margin: 0;padding: 0;}
#shareLeft{position: fixed;background-color: yellow;top: 50px;width: 300px;height: 600px;right: 0px;}
#mainMsg{color: #fff;position: absolute;cursor: pointer;text-align: center;background-color: red;top: 60px;width: 100px;height:400px;padding: 20px 0 0 10px;margin-left: -100px;border-radius:50px 0 0 50px; }
.list{float: right;background-color: #fff;width: 280px;height: 580px;margin: 10px 10px 10px 10px;}</span>
来分析下这里的要点：a、postion：fixed这个固定位置很不错；b、right：0px，这个的具体应用后面会详细说，但是这里也很关键；3、#mainMsg的margin-left：-100px，这个地方也很重要，这样我们来看下效果
哈哈 这是本年度最大的弹出框了吧，恶搞一下，我们继续来说js实现弹出效果
2、将详细部分隐藏，提示部分漏外面
这个比较简单，修改起来，只需将shareLeft的right值改变一下即可，right=-300px，也就是div的宽度
3、js来实现弹出效果
这个定时器的效果我们不是第一次用了，在js实现打字机效果时，我们就曾经应用过，这里我们只是改变了一下定时的对象而已
<span style="font-size:12px;"><script type="text/javascript">
var timer=null;
var count=0;
var tip=function(position,target,speed){
clearInterval(timer);
timer=setInterval(function(){
if(count>position.offsetWidth){
clearInterval(timer);
}else{
position.style.right+=window.count+"px";
window.count++;
};
}, speed);
};
function showTip(){
var position=document.getElementById("shareLeft");
tip(position,document.body.clientWidth,1000);
};
</script></span>
这段代码里面最需要注意的几点有：offsetWidth、.style.right等，这个暂不多说，会有专门一篇来介绍，这里先这样用吧，知道意思就行。
这个等弄透了再来说，现在效果就达到了，你也来试试看吧。
这样的图片相比大家都很熟悉：
————————————
今天我们就来分析制作一下，先来介绍下这种弹出框的特点：
* 始终依附在页面边框上
* 不随页面的上升下降而改变位置
* 鼠标经过时，会弹出详细信息，离开时，恢复最初状态
这样我们就能大概想到几个可能会用到的功能：postion的绝对定位；鼠标经过离开的监听和方法；这些是肯定会用的，但是，除了这些还用到了哪些呢，究竟又是怎么是实现的呢？
1、实现全部显示的界面状态
先进行编写html代码
复制代码 代码如下:
<span style="font-size:12px;"> <div id="shareLeft" class="shareLeft">
<div class="list">
<p><a href="#" title="提示">提示</a></p>
</div>
<p class="msg" id="mainMsg" onmouseover="showTip()">
分享到
</p>
</div></span>
然后是css样式编码
复制代码 代码如下:
<span style="font-size:12px;">*{margin: 0;padding: 0;}
#shareLeft{position: fixed;background-color: yellow;top: 50px;width: 300px;height: 600px;right: 0px;}
#mainMsg{color: #fff;position: absolute;cursor: pointer;text-align: center;background-color: red;top: 60px;width: 100px;height:400px;padding: 20px 0 0 10px;margin-left: -100px;border-radius:50px 0 0 50px; }
.list{float: right;background-color: #fff;width: 280px;height: 580px;margin: 10px 10px 10px 10px;}</span>
来分析下这里的要点：a、postion：fixed这个固定位置很不错；b、right：0px，这个的具体应用后面会详细说，但是这里也很关键；3、#mainMsg的margin-left：-100px，这个地方也很重要，这样我们来看下效果
哈哈 这是本年度最大的弹出框了吧，恶搞一下，我们继续来说js实现弹出效果
2、将详细部分隐藏，提示部分漏外面
这个比较简单，修改起来，只需将shareLeft的right值改变一下即可，right=-300px，也就是div的宽度
3、js来实现弹出效果
这个定时器的效果我们不是第一次用了，在js实现打字机效果时，我们就曾经应用过，这里我们只是改变了一下定时的对象而已
复制代码 代码如下:
<span style="font-size:12px;"><script type="text/javascript">
var timer=null;
var count=0;
var tip=function(position,target,speed){
clearInterval(timer);
timer=setInterval(function(){
if(count>position.offsetWidth){
clearInterval(timer);
}else{
position.style.right+=window.count+"px";
window.count++;
};
}, speed);
};
function showTip(){
var position=document.getElementById("shareLeft");
tip(position,document.body.clientWidth,1000);
};
</script></span>
这段代码里面最需要注意的几点有：offsetWidth、.style.right等，这个暂不多说，会有专门一篇来介绍，这里先这样用吧，知道意思就行。
这个等弄透了再来说，现在效果就达到了，你也来试试看吧。
相关文章
这篇文章主要给大家介绍了关于JS中数组合并的几种常见方法,在开发的过程中,我们很多时候会遇到需要将两个数组合并成一个数组的情况,文中通过实例代码介绍的非常详细,出现需要的朋友可以参考下2023-07-07
除了对象之外，数组Array类型可能是javascript中最常用的类型了。而且，javascript中的数组与其他多数语言中的数组有着相当大的区别。本文将介绍javascript中的数组Array类型，非常不错，感兴趣的朋友一起看下吧2016-07-07
水平不高，不能也不想从太深的层次去讲解这个东西，只是根据一段比较有代表性的代码，结合执行结果，从表象上粗浅地谈谈。2010-12-12
这篇文章主要介绍了javascript获取select值的方法,结合完整实例形式分析了javascript动态遍历与操作页面元素相关实现技巧,需要的朋友可以参考下2019-06-06
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
这篇文章主要介绍了JavaScript求一个数组中重复出现次数最多的元素及其下标位置,涉及javascript数组元素遍历、判断、正则过滤、追加等相关操作技巧,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了微信小程序在地图选择地址并返回经纬度,涉及微信小程序针对经纬度地址信息相关操作技巧,需要的朋友可以参考下2018-12-12
页面内的tab导航需要在滚动到视口顶部的时候进行吸顶,这个功能算是比较常见,也比较容易实现,下面就跟随小编一起学习一下JavaScript是如何实现元素吸顶效果的吧2023-10-10
在Web开发中,保护用户数据是至关重要的,而对数据进行加密是其中一种有效手段,本文将深入浅出地介绍常见的加解密算法,包括消息摘要算法、对称加密算法以及非对称加密算法,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了JavaScript动态提示输入框输入字数的方法,实例分析了javascript针对页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率下，本文给大家介绍moment.js使用超详细教程，感兴趣的朋友跟随小编一起看看吧2023-10-10
最新评论