这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
到周末了,明天该总结一下了,感觉学到了些东西,又感觉没学多少东西,具体明天再分析吧,先来看看今天要分析的问题。 这样的图片相比大家都很熟悉:
这篇文章主要介绍了 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 等,这个暂不多说,会有专门一篇来介绍,这里先这样用吧,知道意思就行。 这个等弄透了再来说,现在效果就达到了,你也来试试看吧。
来源: http://www.phperz.com/article/17/0417/275884.html