jQuery css3七彩滑塊效果代碼



72 286 96



特效描述:jQuery css3 七彩滑塊效果,jQuery css3七彩滑塊效果代碼

代碼結構

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="sliders.js"></script>

3. HTML代碼

<div class="main">
    <!-- The sliders -->
    <div class="colorful-slider blue">
    <div class="slider-handle"></div>
    </div>
    <div class="colorful-slider green">
    <div class="slider-handle"></div>
    </div>
    <div class="colorful-slider orange">
    <div class="slider-handle"></div>
    </div>
    <div class="cube-area">
        <!-- The colorful bars -->
        <div class="cuboid blue">
        <div class="cu-top"></div>
        <div class="cu-mid"></div>
        <div class="cu-bottom"></div>
        </div>
        <div class="cuboid green">
        <div class="cu-top"></div>
        <div class="cu-mid"></div>
        <div class="cu-bottom"></div>
        </div>
        <div class="cuboid orange">
        <div class="cu-top"></div>
        <div class="cu-mid"></div>
        <div class="cu-bottom"></div>
        </div>
        <!-- The perspective div is CSS3 transformed -->
        <div class="perspective">
        </div>
    </div>
    <!-- Old school float clearing -->
    <div class="clear"></div>
</div>



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


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 拖動 拖拽 拖動插件 拖拽插件 圖片拖動 圖片拖拽 圖片滑動 圖片滑塊
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

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