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


Posted in Javascript onMay 21, 2014

到周末了,明天该总结一下了,感觉学到了些东西,又感觉没学多少东西,具体明天再分析吧,先来看看今天要分析的问题。

这样的图片相比大家都很熟悉:

javascript制作的网页侧边弹出框思路及实现代码————————————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,这个地方也很重要,这样我们来看下效果
javascript制作的网页侧边弹出框思路及实现代码 
哈哈 这是本年度最大的弹出框了吧,恶搞一下,我们继续来说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等,这个暂不多说,会有专门一篇来介绍,这里先这样用吧,知道意思就行。

这个等弄透了再来说,现在效果就达到了,你也来试试看吧。

Javascript 相关文章推荐
JavaScript confirm选择判断
Oct 18 Javascript
jQuery实现的立体文字渐变效果
May 17 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
批量修改标签css样式以input标签为例
Jul 31 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
js实现的订阅发布者模式简单示例
Mar 14 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 #Javascript
Jquery的each里用return true或false代替break或continue
May 21 #Javascript
alert和confirm功能介绍
May 21 #Javascript
采用call方式实现js继承
May 20 #Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 #Javascript
js 采用delete实现继承示例代码
May 20 #Javascript
js清空form表单中的内容示例
May 20 #Javascript
You might like
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
php 分页类 扩展代码
2009/06/11 PHP
一个PHP分页类的代码
2011/05/18 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
vue v-model的用法解析
2020/10/19 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
python 打印对象的所有属性值的方法
2016/09/11 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
校园之星获奖感言
2014/01/29 职场文书
竞聘演讲稿
2014/04/24 职场文书
《恐龙》教学反思
2014/04/27 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
画展观后感
2015/06/17 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS