js 分欄效果實現代碼

2024-05-06 14:14:14

字體：大中小

來源：轉載

供稿：網友

網上我也見到一些分欄效果，也有一個jquery的插件jquery.splitter.js, 但是他們基本都沒有解決一個問題：如果頁面上有iframe, 當拖動分割線經過iframe的時候，鼠標不聽使喚了,我曾經開過帖子討論過這個問題。本例采用一個小技巧解決了這個問題，使拖動流暢。
代碼如下:
<html>
<head>
<title>Splitter demo</title>
<style>
            #splitter_container{
             width: 100%;
             height: 100%;
             border: solid #eee 1px;
             margin: 0px;
             padding: 0px;
             overflow: hidden;
            }
            #splitter_left_panel{
             width: 300px;
             height: 100%;
             float: left;
             border: solid blue 0px;
            }
            #splitter_bar{
             width: 8px;
             height: 100%;
             float: left;
             background-color: #ccc;
             cursor: col-resize;
            }
            #splitter_right_panel{
             height: 100%;
             padding-top: 10px;
            }
</style>
<script>
/*
* splitter.js
* author: sunxing007
* http://blog.csdn.net/sunxing007
* date: 08/26/2009

**************************************************************************************
The css script below is needed for the html page when using splitter.js, please save
it as splitter.css, and modify it carefully.

上一篇：javascript 單行文字向上跑馬燈滾動顯示

下一篇：JS去除字符串的空格增強版(可以去除中間的空格)