html漂浮特效代码

html-css015

html漂浮特效代码,第1张

网上搜网页漂浮特效,一大堆,实现原理也很简单

<div style="width:100pxheight:100pxposition:fixedz-index:99left:0top:50%margin-top:-50px">内容</div>

1.引用样式文件css/wmiis.css

<link href="css/wmiis.css" type="text/css" rel="stylesheet" />

2.引用jquery的库文件js/jquery.js

<script type="text/javascript" src="js/jquery.js"></script>

3.引用效果的具体js代码文件js/lrtk.js复制至html文件中。

<script type="text/javascript" src="js/lrtk.js"></script>

4.将id为zSlider的div的内容复制到您的html文件

将需要加效果地方将id为zSlider的div的内容复制到您的html文件

然后预览一下就可以看到了。

当然,你必须把wmiis.css,jquery.js,lrtk.js 这些文件放到你的文件对应文件夹中。

把一下代码直接新建HTML保存,你看下效果。刚写的,有问题再联系我。

<div id="iddiv" style="width:200pxheight:200pxoverflow:hiddenborder: 1px solid blue">

<table >

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

<tr><td>12</td><td>12</td><td>12</td></tr>

</table>

</div>

asdfaf

<script type="text/javascript">

var id = setTimeout("fnGo()",2000)

function fnGo(){

var div = document.getElementById("iddiv")

div.style.height = parseFloat(div.style.height) + 1

if( parseFloat(div.style.height) >= 1000){

clearTimeout(id)

}else{

id = setTimeout("fnGo()",50)

}

}

</script>