jquery 插件--滑块的效果

原创 2012年03月29日 21:21:36
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!-- 引入jquery类库文件-->
<script src="../jquery/jquery-1.7.1.js"></script>

<script src="../jquery/jquery-ui-1.8.18.custom.min.js"></script>
<!--引入css-->
<link rel="stylesheet" href="../jquery/css/jquery-ui-1.8.18.custom.css" />

<script type="text/javascript">
 $(document).ready(function(){
  $("#slider").slider({
     disabled:false ,  //false 可滑动  true不可滑动
     animate:true,  //采用动画效果 true有动画效果 布尔、slow
     max:100, //滑块的最大值是
     min:-100, //滑块的最小值
     //value:0, //滑块的默认值
     orientation:"horizontal", // 滑块的方向是verti cal垂直或水平 horizontal
     values:[30,80], //初始化 滑块位置 一个是30 一个是80
     range:true, //范围是固定
     stop:function(event,ui){//采用属性执行event事件
        alert("停止时执行");
        
     }
      //罪业1:slide/colorpicker.
      
      
  });
  //采用bind绑定事件执行event事件
  $("#slider").bind("stopslider",function(event,ui){
       alert("开始时执行");
      
  });
 });

</script>
</head>

<body>
<!--
jquery UI使用前提
  第一步
     引入别人的类库文件
     js类库
     css样式类库文件
   第二步:模拟实现
   
 
-->
<div>滑块的效果</div>
<div id="slider" style="width:300px"></div>

        
        
        

</body>
</html>




Web 开发最有用的50款 jQuery 插件集锦——《内容滑块篇》

今天给大家带来的是在 Web 项目中常用的内容滑块插件。这个系列的文章将向大家分享50款最具创新的,同时也是最有用的 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和...

用jquery插件-slider实现滑块的效果

滑块的效果

jquery 插件,轮转效果很棒的

  • 2013年08月23日 00:22
  • 36KB
  • 下载

loner_li JQuery 插件之 放大镜图片效果

http://www.w3.org/1999/xhtml">                                         ...

20 个用于处理页面滚动效果的 jQuery 插件

20 个用于处理页面滚动效果的 jQuery 插件 英文原文:20 jQuery Plugins for Scrolling Effects   When i...
  • nic7968
  • nic7968
  • 2015年03月26日 00:55
  • 829

Jquery 插件 qtip 实现丰富的提示效果

在html中,我们如过实现 鼠标移到元素上给出提示的话,我们可以为每个元素增加title 属性。但是这样的提示不够美观,qtip的出现给我们增强效果提供了新的选择,官网地址如下 http://cra...

图片前后对比效果 jquery 插件

图片前后对比 $(function(){ $('.beforeafter').beforeAfter({ ...

滑块: 基于Bootstrap的jQuery slider插件的使用bootstrap-slider.js

一、插件介绍 这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件。该slider插件可以自定义slider的颜色、形状、透明度和tooltip等属...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery 插件--滑块的效果
举报原因:
原因补充:

(最多只允许输入30个字)