<html>
<head>
<meta charset="utf-8" />
<title>div布局</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
.corInsertHref
{
position: absolute
z-index: 10000
width: 370px
float: left
display: none
background-color: #fff
padding: 10px
}
.corBackground
{
width: 100%
height: 100%
position: absolute
background-color: #000
top: 0
left: 0
filter: alpha(opacity=30)
-moz-opacity: 0.30
-khtml-opacity: 0.30
opacity: 0.30
z-index: 9999
display: none
}
</style>
<script type="text/javascript">
$(function() {
//点击登录按钮 弹出层并初始化弹出层位置
$("#btnlogin").click(function() {
$("#corBackground").animate({ opacity: "show" }, "slow")
$("#corInsertHref").animate({ opacity: "show" }, "slow")
autoSize($("#corInsertHref"))
})
//窗口大小缩放事件
$(window).resize(function() {
autoSize($("#corInsertHref"))
})
//窗口大小缩放时调整弹出层的位置
var autoSize = function(corObj) {
var wWidth = $(window).width(), wHeight = $(window).height()
var ihWidth = corObj.outerWidth(true), ihHeight = corObj.outerHeight(true)
corObj.css({ "top": ((wHeight - ihHeight) / 2) + "px", "left": ((wWidth - ihWidth) / 2) + "px" })
}
})
</script>
</head>
<body>
<span id="btnlogin">登录</span>
<div id="corInsertHref" class="corInsertHref">
<p>
账号<input id="txtName" type="text" /></p>
<p>
密码<input id="txtPwd" type="text" /></p>
<p>
<input type="button" value="登 录" /></p>
</div>
<div id="corBackground" class="corBackground">
</div>
</body>
</html>
粗略的写了下,可以吗?
估计是li.js的window.onload = function () ...
与
qiu.js的window.onload=Start<!--调用start函数-->
冲突
________________________________________
整合成一个qiu.js试验一下:
var a_Colour='fff000'<!--第一个轨迹的颜色-->
var b_Colour='00ff00'<!--第二个轨迹的颜色-->
var c_Colour='ff00ff'<!--第三个轨迹的颜色-->
var Size=120
var YDummy=new Array(),XDummy=new Array(),xpos=625,ypos=330,ThisStep=0step=0.6
var scroller = null
function swirl(){
for (i = 0i <3i++)<!--依次处理三个轨迹-->
{
YDummy[i]=ypos+Size*Math.sin((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4)<!--计算得到第i个轨迹上每一点的横坐标-->
XDummy[i]=xpos+Size*Math.cos((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4)<!--计算得到第i个轨迹上每一点的纵坐标-->
}
ThisStep+=step
setTimeout('swirl()',10)<!--周期性调用swirl函数-->
}
var amount=10
if ( document.all){<!--如果是ie浏览器-->
document.write('<div id="ODiv" style="position:absolutetop:0pxleft:0px">'
+'<div id="IDiv" style="position:relative">')
for (i = 0i <amounti++)<!--依次处理每一个点-->
{
document.write('<div id=x style="position:absolutetop:0pxleft:0pxwidth:'+i/2+'height:'+i/2+'background:'+a_Colour+'font-size:'+i/2+'"></div>')<!--第一个轨迹所在的页面-->
document.write('<div id=y style="position:absolutetop:0pxleft:0pxwidth:'+i/2+'height:'+i/2+'background:'+b_Colour+'font-size:'+i/2+'"></div>')<!--第二个轨迹所在的页面-->
document.write('<div id=z style="position:absolutetop:0pxleft:0pxwidth:'+i/2+'height:'+i/2+'background:'+c_Colour+'font-size:'+i/2+'"></div>')<!--第三个轨迹所在的页面-->
}
document.write('</div></div>')
}
function prepos(){
var msie=document.all<!--获得ie浏览器的当前页面-->
if(document.all){<!--如果是ie浏览器-->
for (i = 0i <amounti++)<!--依次处理每一个点-->
{
if (i <amount-1) <!--对于前amount-1个点-->
{
msie.x[i].style.top=msie.x[i+1].style.topmsie.x[i].style.left=msie.x[i+1].style.left<!--更新第一个轨迹上各个点上的上边界和左边界-->
msie.y[i].style.top=msie.y[i+1].style.topmsie.y[i].style.left=msie.y[i+1].style.left<!--更新第二个轨迹上各个点上的上边界和左边界-->
msie.z[i].style.top=msie.z[i+1].style.topmsie.z[i].style.left=msie.z[i+1].style.left<!--更新第三个轨迹上各个点上的上边界和左边界-->
}
else
{
msie.x[i].style.top=YDummy[0]msie.x[i].style.left=XDummy[0]<!--更新第一个轨迹上最后一个点上的上边界和左边界-->
msie.y[i].style.top=YDummy[1]msie.y[i].style.left=XDummy[1]<!--更新第二个轨迹上最后一个点上的上边界和左边界-->
msie.z[i].style.top=YDummy[2]msie.z[i].style.left=XDummy[2]<!--更新第三个轨迹上最后一个点上的上边界和左边界-->
}
}
}
setTimeout("prepos()",10)<!--周期性调用prepos函数-->
}
function Start(){<!--开始函数-->
var el = document.getElementById("Scroller-1")
scroller = new jsScroller(el, 400, 200)
swirl(),prepos()<!--依次调用swirl和prepos函数-->
}
window.onload=Start<!--调用start函数-->
1.toggle():
toggle()方法除了模拟鼠标连续单击事件之外,同时会动态的隐藏改变当前元素的高度,宽度和不透明度,最终切换当前元素的可见状态。如果元素可见,则切换隐藏状态,如元素隐藏,切换可见状态
2.fadeln()与fadeOut()
这两个方法,实现了淡入和淡出的一个动画效果,fadeln()渐显效果,fadeout()渐隐效果,两者结合使用,可把元素隐藏在按钮中,在通过点击事件显示,两方法只改变元素的透明度,不修改其他属性
3.fadeToggle()
此方法会动态的改变当前元素的透明度,最终却换当前元素的可见状态。如果元素是可见的,则通过淡出效果切换隐藏;如果元素是隐藏的,则通过淡入效果切换可见状态,不设置参数时,默认0.4秒内发生淡入与淡出的动画效果
4.fadeTo()
fadeln()与fadeOut()方法都是渐隐渐显,透明度从1到0,从0到1实现一个渐隐渐显效果,而fadeToggle()方法则是可以控制1-0的透明度,为更好展示透明度的效果,可在页面中创造一个下拉框,用于保存透明度值,操作下拉框去控制图片透明度值
5.slideDown()与 slideUp()
slideDown()可改变元素高度,呈现一个滑动效果,由上往下滑动,直到显示最终的当前元素,slideUp()相反,由下往上滑动,直到隐藏最终的当前元素
6.slideToggle()
slideToggle()方法跟slideDown()与 slideUp() 两个方法有异曲同工之妙,同样可改变元素的高度,不同于slideDown()与 slideUp() 的效果, 这个方法是通过点击事情控制元素的隐藏和显示
7.animate()
这个方法是自定义动画效果的方法,高度,宽度,透明度,运行速度都是可通过自定义给属性,这个方法只能改变可以取数字值的css属性,如:大小,边框,内外边距,定位,字体,文本,背景,透明度。
8.stop()
停止动画,stop()方法能结束当前的动画,并立即进入到下一个动画。