jquery仿百度經驗類似ppt文字滑動切換信息瀏覽功能效果代碼



135 537 180



特效描述:文字滑動切換 信息瀏覽功能效果,(不兼容IE678)根據比賽項目要求,自己模擬baidu經驗實現信息瀏覽功能

代碼結構

1. 引入CSS

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

2. 引入JS

<script src="jquery-2.0.3.js"></script>
<script src="script/rent.js"></script>

3. HTML代碼

<!-- 這里是頭 -->
<div id="header" style="min-width:1000px;">
	<div class="top_left">
    	<a href="javascript:void(0)" onClick="history.back()" class="back"></a>
    </div>
    <div class="top_title">
    	<p>公租房申請須知</p>
    </div>
	<div class="top_right">
    	<ul>
            <li>
	            <a href="javascript:;" class="vote">
                	<b class="num">15</b>
                    <b class="hover-tip">投票</b>
                    <b class="tip">已投票</b>
                </a>
            </li>
            <li>
	            <a href="javascript:;" class="favor">
                	<b class="num">64</b>
                    <b class="hover-tip">收藏</b>
                    <b class="tip">已收藏</b>
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="clear_float"></div>
<!-- 這里是內容 -->
<div id="content" showId="0">
    <strong class="sl">&lt;</strong>
    <strong class="sr">&gt;</strong>
    <span class="left"></span>
    <span class="right"></span>
	<ul>
    <li class="cont_1">   	<!-- 每一個li代表一個頁面 --> 	
    <!-- 這里是內容左邊 -->	
        <div class="cont_left"> 
           <div class="user_pig"><div class="user_name">公租房申請要求:</div></div>      
        </div>
    <!-- 這里是內容右邊 -->	        
        <div class="cont_right">
        	<div class="cont_word">
				<p>1.城市戶籍家庭(含夫妻雙方及未成年子女,下同)是指家庭成員中至少有1人取得本市常住非農業戶口5年以上,且在本市市區范圍內無自有住房或家庭人均住房面積低于15平方米的家庭。</p>
				<p>2.新就業大學生是指具有大中專及以上學歷、畢業不滿5年、在本市就業并連續交納社會保險一年以上,且本人及家庭在本市市區范圍內無自有住房的人員。</p>
				<p>3.外來務工人員是指在本市有穩定職業并連續繳納社會保險三年以上(含),且本人及家庭在本市市區范圍內無自有住房的非本市戶籍人員。</p>
            	<span class="left_quote"></span>
	            <span class="right_quote"></span>
            </div>            
        </div>
    </li>
    <li class="cont_2">
    	<div class="cont_left"> 
           <div class="user_pig"><div class="user_name">公租房準備材料:</div></div>      
        </div>
        <div class="cont_right">
        	<div class="cont_word">
				<p>1、《長沙市公共租賃住房申請表》;</p>
                <p>2、身份證、戶口簿或居住證復印件;</p>
                <p>3、婚姻證明復印件,以及戶口或工作單位所在地民政部門出具的中等偏下收入證明;</p>
                <p>4、市住房行政管理部門出具的住房狀況證明;</p>
                <p>5、其他需要提供的材料。</p>
            	<span class="left_quote"></span>
	            <span class="right_quote"></span>
            </div>            
        </div>
    </li>
    <li class="cont_3">
    	<div class="cont_left"> 
           <div class="user_pig"><div class="user_name">公租房準備材料:</div></div>      
        </div>
        <div class="cont_right">
        	<div class="cont_word">
				<p>1、《長沙市公共租賃住房申請表》;</p>
                <p>2、身份證、戶口簿或居住證復印件;</p>
                <p>3、婚姻證明復印件,以及戶口或工作單位所在地民政部門出具的中等偏下收入證明;</p>
                <p>4、市住房行政管理部門出具的住房狀況證明;</p>
                <p>5、其他需要提供的材料。</p>
            	<span class="left_quote"></span>
	            <span class="right_quote"></span>
            </div>            
        </div>
    </li>
    </ul>
</div>
<!-- 分頁尾 -->
<div id="footer">
	<ul>
    	<li step="0"><a class="active" href="#">首</a></li>
        <li step="last"><a href="#">尾</a></li>
    </ul>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動選項卡 滑動切換 文字滑動 文字滑塊 文字切換 文字選項卡 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表