jQuery滑动开关按钮效果

2024-04-27 14:16:47

字体：大中小

来源：转载

供稿：网友

jQuery滑动开关按钮效果

效果图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html <a href="http://www.vevb.com/xml.asp">xml</a>ns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>sitchBox</title><style>/* --Version: 1.0Descr<a href="http://ip.vevb.com/">ip</a>tion: System StyleAuthor: <a href="http://www.vevb.com/article.asp?typeid=60">linux</a>-- *//*--Styles Index=======1.0 Reset2.0 Common style3.0 Main structure3.1 Wrapper3.2 Header3.3 Containter3.4 Footer4.0 Clear--*//* -- 1.0 Reset -- */body,ul,dl,dd,h1,h2,h3,h4,h5,h6,p,form{margin:0;padding:0;font:12px "宋体",'Microsoft YaHei',Arial,Helvetica,sans-serif;}ul,ol{padding-left:0;list-style-type:none;}img{border:0 none;}em,i{font-style:normal;}input,textarea,select{font-size:12px;font-size:100%;font-family:inherit;}a:link{color:#4F14F7; text-decoration:none;}a:hover{color:#FF9900; text-decoration:underline;}a:visited{color:#551a8b; text-decoration:none;}a:active{color: #cc0000;text-decoration:none;}input[type="text"]{border:1px solid #c7c7c7; outline: 0 none;}input[type="text"]:focus{border:1px solid #f6ca1c;}/* -- 2.0 Common style -- *//* -- display && float -- */.dn{display:none;}.db{display:block;}.fl{float:left;}.fr{float:right;}/* -- position -- */.rel{position: relative;}.abs{position: absolute;}/* -- 3.0 Main structure -- */.main-wraper{padding: 5px;}.switchBox{margin-right: 10px;}.switch_box_l{width: 9px;height: 21px;background: url(http://files.cnblogs.com/bigboyLin/switch_box_l.gif) no-repeat;}.switch_box_r{width: 9px;height: 21px;background: url(http://files.cnblogs.com/bigboyLin/switch_box_r.gif) no-repeat;}.switch_box_c{height: 21px;background: url(http://files.cnblogs.com/bigboyLin/switch_box_c.gif) repeat-x;}.switchBtn{width:60px;height: 20px;line-height:20px; text-align:center;color:#fff;font-family:'Microsoft YaHei';background: url(http://files.cnblogs.com/bigboyLin/btnSwitch_c.gif) repeat-x;top: 0px;left: 0px;cursor: pointer;z-index: 999;}.switchBox .swichTxt{padding:0 8px;height: 20px;line-height:22px;text-align:center;font-family:'Microsoft YaHei';color: #797e81;text-decoration: none;}.switchBtn-l{width: 8px;height: 20px;line-height:20px; text-align:center;color:#fff;font-family:'Microsoft YaHei';background: url(http://files.cnblogs.com/bigboyLin/btnSwitch_l.gif) no-repeat;position:absolute;top: 0px;left: -6px;cursor: pointer;}.switchBtn-r{width: 8px;height: 20px;line-height:20px; text-align:center;color:#fff;font-family:'Microsoft YaHei';background: url(http://files.cnblogs.com/bigboyLin/btnSwitch_r.gif) no-repeat;position:absolute;top: 0px;right: -6px;cursor: pointer;}/* -- 4.0 Clear -- */.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }.clearfix:before, .clearfix:after { content: '/0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }.clearfix:after { clear: both }.clearfix { zoom: 1 }/*topbar*/.topbar{background:#ceeeff;padding:10px 5px;border:1px solid #A6D4EA;margin-top:5px;}.topbar .tit{color: #00578F;font-size: 14px;font-weight: bold;}</style></head><body><div class="main-wraper"><div class="topbar clearfix"><div class="boxwrap fr"><div class="switchBox fl" id="timeList" style="width:300px;" typeId="time"><table cellpadding="0" cellspacing="0"><tr><td class="switch_box_l"></td><td class="switch_box_c rel"><span class="abs switchBtn" ><i class="switchBtn-l"></i><i class="switchBtn-r"></i><span class="curTxt">24小时</span></span><a href="<a href="http://www.vevb.com/article.asp?typeid=160">java</a>script:void(0);" class="swichTxt" id="24" >24小时</a><a href="<a href="http://www.vevb.com/article.asp?typeid=36">Javascript</a>:void(0);" class="swichTxt" id="48">48小时</a><a href="javascript:void(0);" class="swichTxt" id="72">72小时</a></td><td class="switch_box_r"></td></tr></table></div><div class="switchBox fl" id="cityList" typeId="city"><table cellpadding="0" cellspacing="0"><tr><td class="switch_box_l"></td><td class="switch_box_c rel"><span class="abs switchBtn" ><i class="switchBtn-l"></i><i class="switchBtn-r"></i><span class="curTxt">城市</span></span><a href="javascript:void(0);" class="swichTxt" id="city">城市</a><a href="javascript:void(0);" class="swichTxt" id="station">站点</a></td><td class="switch_box_r"></td></tr></table></div></div></div></div></div><script type="text/javascript" src="http://files.cnblogs.com/bigboyLin/jquery-1.11.1.min.js"></script><script type="text/javascript" src="http://files.cnblogs.com/bigboyLin/switchbox.js"></script><script type="text/javascript">$(function(){//初始化滑动divloadSwitchBox('.boxwrap',loadData,'#frameMain','tab.html');//点击回调函数function loadData(){}});</script></body></html>

HTML结构：

<div class="boxwrap fr"><!--容器 开始-->            <div class="switchBox fl" id="timeList" typeId="time">            <table  cellpadding="0" cellspacing="0">                <tr>                    <td class="switch_box_l"></td>                    <td class="switch_box_c rel">                            <span class="abs switchBtn" >                                <i class="switchBtn-l"></i>                                <i class="switchBtn-r"></i>                                <span class="curTxt">24小时</span>                            </span>                            <a href="javascript:void(0);" class="swichTxt" id="24" >24小时</a>                            <a href="javascript:void(0);" class="swichTxt" id="48">48小时</a>                            <a href="javascript:void(0);" class="swichTxt" id="72">72小时</a>                    </td>                    <td class="switch_box_r"></td>                </tr>            </table>        </div>        <div class="switchBox fl" id="cityList" typeId="city">            <table  cellpadding="0" cellspacing="0">                <tr>                    <td class="switch_box_l"></td>                    <td class="switch_box_c rel">                            <span class="abs switchBtn" >                                <i class="switchBtn-l"></i>                                <i class="switchBtn-r"></i>                                <span class="curTxt">城市</span>                            </span>                            <a href="javascript:void(0);" class="swichTxt" id="city">城市</a>                            <a href="javascript:void(0);" class="swichTxt" id="station">站点</a>                    </td>                    <td class="switch_box_r"></td>                </tr>            </table>        </div>        </div><!--容器 结束-->

初始化函数：

/*@.boxwrap :滑动按钮父容器，同一界别的滑动按钮必须包含在同一个容器中 *@loadData :点击按钮后回调函数 *@#frameMain : 加载内容的iframe Id *@tab.html : 提交参数的页面 */loadSwitchBox('.boxwrap',loadData,'#frameMain','tab.html');

完整demo：

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/

上一篇：使用jsdoc-toolkit实现JS API文档自动化

下一篇：JavaScript replace() 方法

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿创2023年5月以来最大单周涨幅

2024-04-27 13:35:46

雷军：小米正在申请3万件专利，以提升自身的竞争力

2024-04-27 13:33:47

人参泡酒15年后竟“复活”？网友：这酒还能喝不？

2024-04-24 22:53:44

芯片股普涨！英伟达市值一夜大涨6000亿元

2024-04-23 19:32:50

面馆老板1天卖100碗刚够交房租要卖到150碗才能实现盈利

2024-04-23 19:25:50

跌近30%！茶百道上市一小时跌没3年净利润

2024-04-23 19:13:19

疑难解答

图片精选

网友关注