分栏浮动广告

最新推荐文章于 2025-03-15 21:38:09 发布

原创最新推荐文章于 2025-03-15 21:38:09 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #HTML #XHTML #ViewUI

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的网页分栏浮动效果。通过简单的JavaScript代码配合HTML与CSS，实现了页面左侧栏与右侧栏的互换及浮动功能。该效果可根据用户操作改变两栏的宽度，并调整布局。

jquery 分栏浮动
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="jquery-1.3.1.min.js"></script>
<title>无标题文档</title>
<style>
.left1_top {
background-color:#FF0000;
}
.left1_top_change {
background-color:#FF0000;
float:right;
width:30%;
}
.right1_left {
background-color: #0000FF;
}
.right1_left_change {
background-color: #0000FF;
float:left;
width:70%;
}
</style>
<SCRIPT>
function switchSysBar(){
var img = document.getElementById("barImg").src;
if(img.indexOf("right") > 0){
document.getElementById("switchPoint").innerHTML = '<img id="barImg" src="left.gif">';
document.getElementById("frmTitle").style.display="none";
$("#left_top").attr('class','left1_top_change');
$("#right1_left").attr('class','right1_left_change');
var left1HTML = $("#left1").html();
var right1HTML = $("#right1").html();
$("#left_top").remove();
$("#right1").html(right1HTML+left1HTML);
}else{
document.getElementById("switchPoint").innerHTML = '<img id="barImg" src="right.gif">';
document.getElementById("frmTitle").style.display="";
$("#left_top").attr('class','left1_top');
$("#right1_left").attr('class','right1_left');
var temp = $("#left_top");
$("#left_top").remove();
$("#left1").append(temp);

}
}

</SCRIPT>

<script>
$(function() {
$("#topLink").css({top:(window.screen.availHeight-($("#topLink").height()*12))});
var menuYloc = $("#topLink").offset().top;
$(window).scroll(function() {
var offsetTop = menuYloc + $(window).scrollTop() + "px";
$("#topLink").animate({top: offsetTop}, {duration: 300, queue: false});
});
});
</script>

</head>

<body>

<table width="100%" height="1298" border="1">
<tr>
<th width="20%" valign="top" scope="col" id="frmTitle">
<div id="left1"><div id="left_top" class="left1_top">left1 <br />left1<br />left1</div></div>
<div id="left2"><div style="background-color: #00FF00">left2<br />left2<brleft2</div></div>
</th>
<th width="1%" valign="middle" scope="col" >
<div id="topLink" style="position:absolute;"><SPAN onclick="switchSysBar()" id=switchPoint title=关闭/打开左栏><IMG src="right.gif" name="barImg" id="barImg"></SPAN></div>
</th>
<th valign="top" scope="col">
<div id="right1">
<div id="right1_left" class="right1_left">right1<br />right1<br />right1</div>
</div>
<div id="right2"><div style="background-color: #99FF66">right2<br />right2<br />right2</div></div>
</th>
</tr>
</table>
</body>
</html>

分栏 浮动 广告

分栏浮动广告