jQuery css3七彩滑块效果代码



100 398 133



特效描述: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

加群请备注:从官网了解到