jQuery css3七彩滑块效果代码



69 273 92



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

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