小弟对JS给网页带来的各种效果很着迷,也接触JS一段时间了,只能勉强看懂一些简单的,小弟对JS给网页带来的各种效果很着迷
希望前辈能介绍下如何能自己写代码的经验啊!
顺便问下,最近在做一个鼠标点击链接,弹出一个可以自由拖动的浮动层!就像DISCUZ上的那样!
各位前辈指点迷津下吧!
希望前辈能介绍下如何能自己写代码的经验啊!
顺便问下,最近在做一个鼠标点击链接,弹出一个可以自由拖动的浮动层!就像DISCUZ上的那样!
各位前辈指点迷津下吧!
像可以拖动的浮动层,看到这个东西脑袋里想的就不应该是一个漂浮在网页上的框框,而应该是div, mousedown, mousemove, mouseup, position: absolute, left, top, window.event/event这些分解开的最基本的东西。所谓目无全牛嘛。当然这就要求你对基本概念非常熟悉了,所以才会强调基础。
然后浏览器兼容非常重要,即使现在很多项目只要求IE能够运行,但是浏览器兼容是发展趋势,早晚就会遇到要你的代码在各种主流浏览器都能运行的要求。特别对于做国外外包项目的人。其实这并不困难,不过刚开始会有一个困难期。坚持下来以后就会觉得很容易了。
最后应该是所有程序员都应该有的要求,对自己的代码高标准严要求,千万不要抱着能用就成的心态去写代码,个人十分反感这样的编码态度(因为过去一年半以来一直跟这样一群人工作,十分辛苦)。
JS需要很多的练习,LZ加油吧
给个例子给你吧<html>
<head>
<style TYPE="text/css">
<!--
.popcomments
{
position : absolute; width:130;height:50;
visibility : hidden;
}
//-->
</style>
</head>
<body>
<DIV ID="commentsboard" CLASS="popcomments"> </DIV>
<SCRIPT>
function popup(message)
{ var content ="<TABLE WIDTH=130 BORDER=0 CELLPADDING=1 CELLSPACING=0 BGCOLOR=#000000><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><CENTER><FONT COLOR=#FFFFFF SIZE=2><B>说 明</B></FONT></CENTER></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=1 CELLSPACING=0 BGCOLOR='#FFFFE8'><TR><TD><FONT COLOR=#000000 SIZE=2><CENTER>"+message+"</CENTER></FONT></TD></TR></TABLE></TD></TR></TABLE>"; document.all("commentsboard").innerHTML = content;
commentsboard.style.visibility = "visible";
}
function closeboard()
{
commentsboard.style.visibility = "hidden";
} function currentXY(e)
{
var x = event.x+document.body.scrollLeft;
var y = event.y+document.body.scrollTop;
commentsboard.style.left = x - 55;
commentsboard.style.top = y+25;
} </SCRIPT>
<p> </p>
<table border="0" width="100%" height="82">
<tr>
<td width="100%" height="1">
<p align="center"><span style="font-size: 10pt; background-color: #ccffcc">超级链接动态注释特效</span></td>
</tr>
<tr>
<td width="100%" style="border: 1 ridge #00FFFF" height="17">
<p align="center"><span style="font-size:9pt"> </span><span style="font-size:10.5pt;mso-bidi-font-size:
10.0pt;font-family:宋体;mso-ascii-font-family:"Times New Roman";mso-hansi-font-family:
"Times New Roman";mso-bidi-font-family:"Times New Roman";color:black;
mso-font-kerning:11.0pt;mso-ansi-language:EN-US;mso-fareast-language:ZH-CN;
mso-bidi-language:AR-SA">在这一部分,我们将来完成两个鼠标特效。当我们把鼠标移到超级链接上时浏览器会弹出一些文字说明,这些文字说明可以是动态的,也可以是静态的。</span></p>
</td>
</tr>
</table>
<table cellPadding="0" cellSpacing="0" width="100%"
height="244">
<tr>
<td height="14" width="110%"></td>
</tr>
<tr>
<td height="232" width="110%" bgcolor="#FFFFFF"><table align="center" bgColor="#000000" border="0"
cellPadding="2" cellSpacing="1" width="113">
<tr bgColor="#ffcccc">
<td bgColor="#eaedf7" width="103"><p align="center"><a href="?" ONMOUSEOVER="popup('聊天室')" ONMOUSEOUT="closeboard()" onmousemove="currentXY();">聊天室</a> </td>
</tr>
<tr bgColor="#ffcccc">
<td bgColor="#eaedf7" width="103"><p align="center"><a href="?" ONMOUSEOVER="popup('请留下您宝贵的意见!')" ONMOUSEOUT="closeboard()" onmousemove="currentXY();">请留言</a>
</td>
</tr>
<tr bgColor="#ffcccc">
<td bgColor="#eaedf7" width="103"><p align="center"><a href="?" ONMOUSEOVER="popup('这是一个由JavaScript编写的调试器!')" ONMOUSEOUT="closeboard()" onmousemove="currentXY();">Html调试器</a> </td>
</tr>
<tr bgColor="#ffcccc">
<td bgColor="#eaedf7" width="103"><p align="center"><a href="?" ONMOUSEOVER="popup('这里收集了许多精彩的网址!')" ONMOUSEOUT="closeboard()" onmousemove="currentXY();">友情链接</a> </td>
</tr>
<tr bgColor="#ffcccc">
<td bgColor="#eaedf7" width="103"><p align="center"><a href="?" ONMOUSEOVER="popup('这是一个由JavaScript编写的日历。')" ONMOUSEOUT="closeboard()" onmousemove="currentXY();">日历</a> </td>
</tr>
<tr bgColor="#ffcccc">
<td bgColor="#eaedf7" width="103"><p align="center"><a href="?" ONMOUSEOVER="popup('这是一个由JavaScript编写的计算器。')" ONMOUSEOUT="closeboard()" onmousemove="currentXY();">计算器</a> </td>
</tr>
<tr>
<td bgColor="#eaedf7" width="103"><p align="center"><a href="?" ONMOUSEOVER="popup('欢迎进入网上购物虚拟时空。')" ONMOUSEOUT="closeboard()" onmousemove="currentXY();">网上购物</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
还是用JQuery吧、、、
代码都看一遍,包你差不多。