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 相关文章推荐
一次失败的jQuery优化尝试小结
Feb 06 Javascript
js实现照片墙功能实例
Feb 05 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 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
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
学习ExtJS Column布局
2009/10/08 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python标准库之Sys模块使用详解
2015/05/23 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
英语系本科生个人求职信
2013/09/21 职场文书
找工作最新求职信
2013/12/22 职场文书
销售总监岗位职责
2014/01/04 职场文书
车间统计员岗位职责
2014/01/05 职场文书
环卫工作汇报材料
2014/10/28 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
决心书格式及范文
2019/06/24 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android