jQuery SuperSlide.js多功能插件制作72个种常用的网页特效

SuperSlide2.1 超级滑动门72个扩展效果 我¥19买的,分享给大家希望大家学会感恩 
项目网站:http://www.superslide2.com
阅读详细 »

超绚丽的HTML5地图分布动画

之前我们分享过不少HTML5地图插件,有很多种类型,但大部分都是数据统计类型的。这次要分享同样也是一款基于HTML5的地图应用,但它不同的地方在于它主要是在地图上实现分布动画,可以利用这款插件实现各个地区之间的客流流向,给人非常直观的数据展现。

html5-map-distribute-animation

阅读详细 »

jQuery实现的Mac样式消息提示框 可自动消失

在平时的前端开发中,我们经常需要通过一个提示框提示用户正在进行什么操作,或者已经完成什么操作。然而我们用的最多的是使用alert方法弹出浏览器默认的提示框,并且也是在浏览器中居中显示。这次我们分享给大家一款Mac样式的jQuery消息提示框插件,这款插件可以让消息框在不同的位置显示,而且为不同的消息级别分别定制了不同的外观,消息提示框会在一定的时间内淡出消失。

jquery-mac-message-tips

阅读详细 »

jQuery输入标签自动生成插件

我们在网页中发布文章的时候,经常会输入多个文章相关的标签,今天介绍的这个jQuery插件就可以帮助我们更方便地输入标签。当我们输入完标签文本后按回车或者焦点离开输入框时,输入的标签将会自动生成。同时你可以按退格键或者直接点击标签来删除生成的标签。另外插件还提供了接口让你获取生成的所有标签。在使用这款jQuery标签自动生成插件时,如果你可以增加autocomplete的功能就更强大了。

阅读详细 »

jQuery头像裁剪插件 可缩放和旋转

现在可以注册的网站中,大部分都支持上传头像,记得以前我们分享过一款jQuery头像裁剪插件,非常实用。这次我们给大家带来另外一款基于jQuery的头像裁剪插件,这款插件支持自定义头像的上传,然后对头像图片进行缩放和旋转,最后选择你满意的区域即可进行裁剪操作。

阅读详细 »

Ztree自动触发第一个节点的点击事件

重点在这

setting.callback.onClick(null, roletree.setting.treeId, node);

阅读详细 »

css+jq固定标题表格table

css+jq固定标题表格table

阅读详细 »

uploadify 多图上传

多图上传js脚本

        $('#images').uploadify({
            'swf'     : '/static/public/uploadify/uploadify.swf',   //指定上传控件的主体文件
            'uploader' : '/api/upload',    //指定服务器端上传处理文件
            'auto' : true,
            'buttonText' : '上传图片',
            //允许上传的文件后缀
            'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',
            'onUploadSuccess':function(file, data, response){
              var rs = $.parseJSON(data);
              if(rs.status==1){
                var html = '<input type="hidden" name="images[]" id="img" value="'+rs.url+'"><img src="/uploads/'+rs.url+'"  alt="" width="150" height="100">';
                $('#images_box').append(html);
              }else{
                myAlert(rs.msg);
              }
            },
            //其他配置项
        });

多图上传的html

        <div class="form-group">
         <div class="label">
           <label>图片集:</label>
         </div>
         <div class="field" id="images_box">
           <input type="file" class="button bg-blue margin-left" name="file_upload" id="images" multiple="true" value="+ 浏览上传"  style="float:left;">
           
           <div class="tipss">图片尺寸:500*500</div>
         </div>
       </div>  

用js方法限制文字个数,文字溢出省略号。自己写了一个限制容器文字长度的jQuery插件。​

用js方法限制文字个数,文字溢出省略号。自己写了一个限制容器文字长度的jQuery插件。

自己写了一个限制容器文字长度的jQuery插件,用起来还是很方便的。

/**
 * $.txtCur();
 * @charset utf-8
 * @extends jquery.1.8.3
 * @example
 * $('.info').txtCur({n:50});
 * $('.info').txtCur({n:50,z:'...',isTitle:1});
 */
(function($) {
    $.fn.extend({
        txtCur: function(options) {
            //默认参数
            var defaults = {
                /**截取长度 */
                n: 60,
                /*结尾添加字符*/
                z: '...',
                /*是否在标签上 添加 title 属性*/
                isTitle: true

            }
            var options = $.extend(defaults, options);
            return this.each(function() {
                var o = options;
                var $this = $(this);
                var s = $this.text(),
                s = $.trim(s); //去掉收尾空格
                l = s.length,
                n = o.n; //设置字符长度为18个 
                if (l > n) {
                    //文本所有内容用a标签的title属性提示文本全部内容
                    if (o.isTitle) {
                        $(this).attr("title", s);
                    }
                    s = $this.text(s.substring(0, n) + o.z);
                }
                /**/

            });
        }
    });

})(jQuery);

//调用方法

<span txtCur="10">我是文字我是文字我是文字我是文字我是文字</span>
<script type="text/javascript">
$(function() {
    $('[txtCur]').each(function() {
        var $that = $(this);
        var maxNum = $that.attr('txtCur');
        $that.txtCur({
            n: maxNum
        });
    })
})
</script>

Fancybox丰富的弹出层效果

Fancybox的特点如下:

    可以支持图片、html文本、flash动画、iframe以及ajax的支持
    可以自定义播放器的CSS样式
    可以以组的形式进行播放
    如果将鼠标滚动插件(mouse wheel plugin)包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片
    Fancybox播放器支持投影,更有立体的感觉

演示地址:

http://demo.lrxin.com/2015/09/Fancybox/Fancybox1.3.1/

http://demo.lrxin.com/2015/09/Fancybox/fancybox%20v1.3.4/

http://demo.lrxin.com/2015/09/Fancybox/fancyBox2.1.5/

下载地址:

Fancybox1.3.1.rar    http://pan.baidu.com/s/1bnnZLOb
fancybox v1.3.4.rar  http://pan.baidu.com/s/1qJEkm
fancyBox2.1.5.rar    http://pan.baidu.com/s/1o6qvkAA

fancybox具有以下特性:

可以加载DIV、图片、图片集、Ajax数据、SWF影片,iframe页面等。
支持键盘方向键和ESC键。
丰富的参数设置和方法调用。
可扩展性强。

如何使用?

本文以DEMO中的Demo2为例,讲解fancybox的使用。

1、添加javascript引用和css文件的引用

<link rel="stylesheet" type="text/css" href="fancybox.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/fancybox.js"></script>

2、HTML

<h4>图片集,支持键盘方向键</h4>
<p>
   <a rel="group" href="images/b1.jpg" title="图片标题"><img alt="" src="images/s1.gif" /></a>
   <a rel="group" href="images/b2.jpg" title="图片标题"><img alt="" src="images/s2.gif" /></a>
   <a rel="group" href="images/b3.jpg" title="蓝天白云绿草"><img alt="" src="images/s3.gif" /></a>
</p>

3、调用fancybox

$(function(){
    $("a[rel=group]").fancybox({
        'titlePosition' : 'over',
        'cyclic'        : true,
        'titleFormat'    : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">' + (currentIndex + 1) +
 ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';
                }
    });
});

注意,fancybox的参数设置格式为:’key’:’value’。titlePosition:设置图片标题的显示位置为图片上。cyclic:设置图片浏览方式为循环浏览。titleFormat:设置图片标题的格式,可以显示图片总数和当前图片顺序。

fancybox插件主要参数和方法一览表

参数/方法 描述 默认值
基本
width 设置弹出串口的宽度,当内容为swf,iframe或者单行文字时,
应该将’autoDimensions’ 设置为false
560
height 设置弹出串口的高度,当内容为swf,iframe或者单行文字时,
应该将’autoDimensions’ 设置为false
340
cyclic 是否循环显示,当内容为图片集时。 false
centerOnScroll 弹出窗口始终浏览器居中。 false
modal 是否使用模式窗口。当设置为true时,应该同时将:’hideOnOverlayClick’,’hideOnContentClick’,
‘enableEscapeButton’,
‘showCloseButton’ 设置为false,并将’overlayShow’ 设置为true
false
titlePosition 标题的位置,可以设置为’outside’, ‘inside’ or ‘over’ ‘outside’
transitionIn, transitionOut 窗口显示的方式,可以设置为’elastic’, ‘fade’ or ‘none’ ‘fade’
send 方法,向服务端发送裁剪图片的数据,以便服务端接收参数进行处理,
e.g: cropzoom.send(‘process.php’,’POST’,{id=1},function(r){ alert(r); });
 
方法
$.fancybox.showActivity 显示加载动画  
$.fancybox.hideActivity 隐藏加载动画  
$.fancybox.close 关闭窗口  
$.fancybox.resize 自动调整窗口的高度使之与内容相适应  
Centered 是否将选区居中,即显示在容器的中心。  

更多参数和方法请参照http://fancybox.net/api

中文api地址: http://doc.bropaul.com/fancyBox/

ajax页面底部 滚动加载效果 实例

html部分:

<ul id="scrollBox">
    //ajax读取的 data.html 使用append 的方式添加到这里        
</ul>
<div id="scrollPages">
    //ajax 状态文字输出到这里 【数据加载中】【数据加载成功】【没有数据了】
</div>

js代码需要jquery支持。

//滚动加载 开始
$(function(){
    var loading = false; // 状态锁 默认 false
    var next_url = 'ajax.php'; //ajax读取数据地址,ajax 每次都修改为 data.next_url 下一页地址
    var $pages = $('#scrollPages'); //绑定 分页容器 分页状态 在此位置输出
    var $scrollBox = $('#scrollBox'); // 绑定内容 ajax 把
    
    var _loading = function(){ console.log('数据加载中...');  $pages.html('数据加载中...');  }
    var _loadok = function(){ console.log('数据加载成功!');  $pages.html('数据加载成功!');  }
    var _nodata = function(){ console.log('没有数据了') ;     $pages.html('没有数据了'); }
    
    $(window).scroll(function(){
        var sH =  $(document).height() - $(this).scrollTop() - $(this).height();//页面底部距离
        var sp = $(window).height() - ( $pages.offset().top - $(document).scrollTop() ) ; //分页div 距离win 底部
        if( loading ){return false ;}
        //条件
        if ( sp > 33 ){
            loading = true;
            _loading();
            $.getJSON(next_url,{}, function(data){
                console.log(data);
                next_url = data.next_url;
                if(data.html){
                    $scrollBox.append( data.html );
                    $('.zzbsList .zzbsInfo').txtCur({n:60});
                    loading = false;
                    _loadok();
                }
                //判断是否还有吓一跳
                if( !next_url ){ loading = true ; _nodata() };
                
            });
        }
    });// 滚动 结束 $(window).scroll

    //页面加载完成 清空$scrollBox 内容
    //页面加载完成 执行第一次
    $(window).scroll();
});

php 文件 ajax.php 代码:

<?php
header("Content-type:text/html;charset=utf-8");
//休息1秒钟 ,模拟网速不好,可以看清 ajax状态变化
sleep(1);
//读取GET提交的页码
$p = (int)$_GET['p'] ;
//准备返回的数据
$d = array();
//下一页 地址
$d['next_url'] = 'api/bisai-list.php?p='.($p+1);
//数据 html格式 ,jquery会把他插入到 <ul id="scrollBox"> 中。
$d['html'] = '<li> ajax 读取到的数据,当前页面 '.($p+1).' </li>';
//简单判读 只有10页面内容
if($p > 10){
    $d =  array(); //没有数据了  js 主要判断 $d['next_url'] 的值
}
//返回json数据
die(json_encode($d));
?>

————–我是分割线—————

上边的 js 代码存在一个问题。

//页面加载完成 执行第一次$(window).scroll(); 尽管调用了滚动事件,但无法满足条件: if ( sp > 33 ) 出发ajax加载数据。
后来想想,干脆把 ajax加载数据部分代码封装成函数_ajaxLoad,在需要的时候直接调用。
1.页面第一加载时调用
2.滚动满足条件时调用
修改js代码如下:

//滚动加载 开始
$(function(){
    var loading = false; // 状态锁 默认 false
    var next_url = 'api/bisai-list.php'; //ajax读取数据地址,ajax 每次都修改为 data.next_url 下一页地址
    var $pages = $('#scrollPages'); //绑定 分页容器 分页状态 在此位置输出
    var $scrollBox = $('#scrollBox'); // 绑定内容 ajax 把
    
    var _loading = function(){ console.log('数据加载中...');  $pages.html('数据加载中...');  }
    var _loadok = function(){ console.log('数据加载成功!');  $pages.html('数据加载成功!');  }
    var _nodata = function(){ console.log('没有数据了') ;     $pages.html('没有数据了'); }
    var _ajaxLoad = function(){
            loading = true;
            _loading();
            $.getJSON(next_url,{}, function(data){
                console.log(data);
                next_url = data.next_url;
                if(data.html){
                    $scrollBox.append( data.html );
                    $('.zzbsList .zzbsInfo').txtCur({n:60});
                    loading = false;
                    _loadok();
                }
                //判断是否还有吓一跳
                if( !next_url ){ loading = true ; _nodata() };
                
            });
    }
    
    $(window).scroll(function(){
        var sH =  $(document).height() - $(this).scrollTop() - $(this).height();//页面底部距离
        var sp = $(window).height() - ( $pages.offset().top - $(document).scrollTop() ) ; //分页div 距离win 底部
        console.log(sp);
        if( loading ){return false ;}
        if ( sp > 33 ){
            //滚动满足条件时调用 加载数据
            _ajaxLoad();
        }
    });
    //页面加载完成 执行第一次加载数据
    _ajaxLoad();
});
//滚动加载 结束

jQuery手机全屏上下滑动滚屏插件touchSwipe

插件touchSwipe可监听单个和多个手指触摸,鼠标按着左键拖动等事件,因此插件可以实现滑动滚屏、缩放等效果。
特点:

1、监听滑动的4个方向:上、下、左、右;

2、监听多个手指收缩还是外张;

3、支持单手指或双手指触摸事件;

4、支持单击事件touchSwipe对象和它的子对象;

5、可定义临界值和最大时间来判断手势的实际滑动;
6、滑动事件有4个触发点:“开始”,“移动”,“结束”和“取消”;

7、结束事件可以在手提释放或是快速达到临界值时触发;

8、允许手指刷和页面滚屏;

9、可禁用户通过输入元素(如:按钮、表单、文本框等)触发事件;

官方网站:
http://labs.rampinteractive.co.uk/touchSwipe
http://labs.rampinteractive.co.uk/touchSwipe/docs

https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

中文网站:

http://www.swiper.com.cn/

备用下载:

http://pan.baidu.com/s/1sjrDFXj

$(function() {      
  $("#test").swipe( {
    swipe:function(event, direction, distance, duration, fingerCount, fingerData) {//
      console.log(  event, direction, distance, duration, fingerCount, fingerData   );
                  //事件 , 方向 ,位移(像素),时间(毫秒),手指个数 ,
    },
    threshold:0 ,
    fingers:'all' ,
    excludedElements:"button, input, select, textarea, .noSwipe"
  });
});

jQuery滚动条插件:jquery-custom-content-scroller

为大家推荐一款jQuery滚动条插件:jquery-custom-content-scroller。
由于不同浏览器对滚动条的设置方法不一致,为了一致的用户体验,有时我们就不得不放弃使用部分浏览器提供的CSS接口来定制滚动条,转而寻求更佳的代替方案。使用插件的好处是显而易见的,但是坏处也多得去了。自己在项目中慢慢体会吧。
想了解这款jQuery写的浏览器滚动条插件jQuery-custom-content-scroller的具体使用方法,
请移步到:http://manos.malihu.gr/jquery-custom-content-scroller/

简单介绍一下jQuery滚动条插件的使用:

第一步:在内容的顶部引入滚动条相应的样式表文件和jquery的库文件,jquery插件jquery.mcustomscrollbar文件。代码如下:

<link rel="stylesheet" type="text/css" href="jquery.mCustomScrollbar.css" >
<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>

第二步:在要显示滚动条的元素(元素内容中必须要有溢出的块,否则就不会出现滚动条)上面,加入class=”mScrollbar”,然后再加入以下代码:

<script>
(function($){
$(window).load(function(){
$(".mScrollbar").mCustomScrollbar();
});
})(jQuery);
</script>

关于此插件的详细介绍,你可以访问官网,里面讲的相当详细,我就不再此多赘述。

百度网盘备份:
http://pan.baidu.com/s/1bp43gv1

web视频播放器,flv网页播放器,mp4网页播放器。
flvplayer支持flv,mp4,swf 文件

代码如下

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>web视频播放器-flvplayer</title>
</head>
<body>
<!-- 代码 开始 -->
<object class id="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="600" height="400">
  <param name="movie" value="flvplayer.swf">
  <param name="quality" value="high">
  <param name="allowFullScreen" value="true">
  <param name="FlashVars" value="vcastr_file=1_0.mp4&LogoText=http://www.lrxin.com&BufferTime=3&IsAutoPlay=0">
  <embed src="flvplayer.swf" allowfullscreen="true" flashvars="vcastr_file=1_0.mp4&LogoText=www.lrxin.com&IsAutoPlay=0" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600" height="400"></embed>
</object>
<!-- 代码 结束 -->
<br>
vcastr_file=视频地址 支持 flv mp4<br>
LogoText = logo文字<br>
IsAutoPlay = 1 | 0 是否播放<br>
</body>
</html>

文件下载:flvplayer.swf
demo下载:

JS实现自动倒计时30秒后按钮才可用

WEB开发中经常会用到倒计时来限制用户对表单的操作,比如希望用户在一定时间内看完相关协议信息才允许用户继续下一步操作,又比如在收取手机验证码时允许用户在一定时间过后(未收到验证码的情况下)再次获取验证码。那么今天我来给大家介绍下如何使用Javascript来实现这一简单应用。

应用场景1:用户注册时阅读完相关协议信息后才能激活按钮
某些网站注册时要求用户同意所谓的用户协议之类的信息,如果协议内容非常重要,有些网站会要求新注册的用户一定要阅读完相关协议信息才能激活下一步按钮提交表单。为了让用户能阅读完协议信息(实际用户有没有真正阅读咱不知道),开发者会设计一个倒计时比如30秒,30秒过后,表单提交按钮才会激活生效,下面来看具体如何实现。

<form action="http://www.lrxin.com/" method="post" name="agree">
    <input type="submit" class="button" value="请认真查看<服务条款和声明> (30)" name="agreeb">
</form> 

假设有上面这样一个表单,表单的其他部分我们省略,只有一个提交按钮,初始时按钮不可用,当显示30秒倒计时结束后,按钮就会显示“我同意”,并且可以点击激活。
我们用原生的js来实现这一效果:

<script>
var secs = 30;
document.agree.agreeb.disabled=true;
for(var i=1;i<=secs;i++) {
    window.setTimeout("update(" + i + ")", i * 1000);
}
function update(num) {
    if(num == secs) {
        document.agree.agreeb.value =" 我 同 意 ";
        document.agree.agreeb.disabled=false;
    }
    else {
        var printnr = secs-num;
        document.agree.agreeb.value = "请认真查看<服务条款和声明> (" + printnr +")";
    }
}
</script> 

我们设置时间为30秒,当然你也可以设置你想要的时间,将按钮禁用,也就是不可点击,然后循环30秒,通过window.setTimeout调用update()函数,将当前秒与倒计时对比,如果已经倒计时完成则显示“我同意”,并激活按钮。

应用场景2:用户激活短信通道向用户手机发送验证码短信以验明正身
很多网站在验证用户身份的时候需要提高用户信息的安全性,这样就会与用户手机绑定,于是就会向用户手机发送验证码信息,如果用户填写了正确的验证码提交后台,那么操作才会成功。而发送验证码也可能由于各种原因有发送不成功的情况,又不能让用户不停点击发送。如此开发者使用倒计时来处理这类问题,用户激活短信后,如果30秒后未收到验证码短信则可以再允许点击发送短信。

<form action="http://www.lrxin.com/" method="post" name="myform">
    <input type="button" class="button" value="获取手机验证码"  name="phone" onclick="showtime(30)">
</form> 

上面的表单在按钮上添加了一个onclick事件,调用了showtime()函数。

<script>
function showtime(t){
    document.myform.phone.disabled=true;
    for(i=1;i<=t;i++) {
        window.setTimeout("update_p(" + i + ","+t+")", i * 1000);
    }
 
}
 
function update_p(num,t) {
    if(num == t) {
        document.myform.phone.value =" 重新发送 ";
        document.myform.phone.disabled=false;
    }
    else {
        printnr = t-num;
        document.myform.phone.value = " (" + printnr +")秒后重新发送";
    }
}
</script> 

和场景1一样,当点击按钮后,按钮状态为禁用,通过调用window.setTimeout的update_p()显示倒计时,当倒计时完成后,按钮显示“重新发送”,这时按钮状态为可用。

jquery 倒计时

倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等。今天,我们来使用jQuery实现一个简单的倒计时功能。

html代码:

<div class="box3 " data-endtime="<?php echo strtotime('2015-12-1');?>" ></div>
<div class="box3 " data-endtime="1448928000"></div>

js代码

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
var serverTime = <?php echo time();?> * 1000;
$(function(){
    var dateTime = new Date();
    var difference = dateTime.getTime() - serverTime;
    
    setInterval(function(){
      $("[data-endtime]").each(function(){
        var obj = $(this);
        var endTime = new Date(parseInt(obj.data('endtime')) * 1000);
        var nowTime = new Date();
        var nMS=endTime.getTime() - nowTime.getTime() + difference;
        var myD=Math.floor(nMS/(1000 * 60 * 60 * 24));
        var myH=Math.floor(nMS/(1000*60*60)) % 24;
        var myM=Math.floor(nMS/(1000*60)) % 60;
        var myS=Math.floor(nMS/1000) % 60;
        var myMS=Math.floor(nMS/100) % 10;
        if(myD>= 0){
            var str = "开班倒计时:"+myD+"天"+myH+"小时"+myM+"分"+myS+"."+myMS+"秒";
        }else{
            var str = "已结束!";    
        }
        obj.html(str);
      });
    }, 100);
});
</script>

jQuery手机移动端日历日期选择插件.rar

jQuery手机移动端日历日期选择插件.rar

下载地址:http://pan.baidu.com/s/1bnHDDIv

<!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" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<title>jQuery手机移动端日历日期选择 - A5源码</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
<script type="text/javascript" src="js/date.js" ></script>
<script type="text/javascript" src="js/iscroll.js" ></script>
<script type="text/javascript">
$(function(){
	$('#beginTime').date();
	$('#endTime').date({theme:"datetime"});
});
</script>
</head>
<body>   
<style type="text/css">
.demo{width:300px;margin:40px auto 0 auto;}
.demo .lie{margin:0 0 20px 0;}
</style>
<div class="demo">
	<div class="lie">日期设置-1:<input  id="beginTime" class="kbtn" /></div>
	<div class="lie">日期设置-2:<input id="endTime" class="kbtn" /></div>
</div>
<div id="datePlugin"></div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
</div>
</body>
</html>

基于jquery mobile的手机日历插件 – jqueryMobilomobiscroll

基于jquery mobile的手机日历插件 – jqueryMobilomobiscroll

下载地址:http://pan.baidu.com/s/1bnq9jwb

—————————————————

mobiscroll_all.rar

http://pan.baidu.com/s/1o6ifnZG

———————————————

mobiscroll.rar

http://pan.baidu.com/s/1kTl9iJH

———————————————————————-

官方网站:http://mobiscroll.com/

演示地址:http://www.wglong.com/index/demos/mobiscroll/index.html

相关文章:http://www.wglong.com/index/demos/mobiscroll/index.html

var currYear = (new Date()).getFullYear();	
    var optDate = {
            preset: 'date', //日期
            theme: 'android-ics light', //皮肤样式
            display: 'modal', //显示方式 
            mode: 'scroller', //日期选择模式
            lang:'zh',
            showNow: true,
		    nowText: "今",
            startYear:currYear, //开始年份
            endYear:currYear + 10 //结束年份
        };
    var optDateTime = {
            preset: 'datetime', //日期
            theme: 'android-ics light', //皮肤样式
            display: 'modal', //显示方式 
            mode: 'scroller', //日期选择模式
            lang:'zh',
            showNow: true,
		    nowText: "今",
            startYear:currYear, //开始年份
            endYear:currYear + 10 //结束年份
        };
    var optTime = {
            preset: 'time', //日期
            theme: 'android-ics light', //皮肤样式
            display: 'modal', //显示方式 
            mode: 'scroller', //日期选择模式
            lang:'zh',
            showNow: true,
		    nowText: "今",
            startYear:currYear, //开始年份
            endYear:currYear + 10 //结束年份
        };

$("#appDate").mobiscroll(optDate);
$("#appDatetiem").mobiscroll(optDateTime);
 $("#apptiem").mobiscroll(optTime);

<input type="text" name="appDate" id="appDate" />
<input type="text" name="appDatetiem" id="appDatetiem" />
<input type="text" name="apptiem" id="apptiem" />

Mobiscroll移动端日期时间插件精简实例

mobiscroll_手机上下滚动选择日期时间

演示地址:http://demo.mycodes.net/chajian/Mobiscroll/

下载地址:http://pan.baidu.com/s/1dDD5FG1

仿百度新闻首页左右按钮控制焦点图片淡出淡进轮播切换 – jquery.yx_rotaion

仿百度新闻首页左右按钮控制焦点图片淡出淡进轮播切换 – jquery.yx_rotaion

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<title>仿百度新闻首页左右按钮控制焦点图片淡出淡进轮播切换 - jquery.yx_rotaion</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<!--开始-->
<div class="yx-rotaion">
	<ul class="rotaion_list">
		<li><a href="http://www.lrxin.com/archives-785.html"><img src="uploads/1.jpg" alt="美国俄州遭遇龙卷风 已致91人死"></a></li>
		<li><a href="http://www.lrxin.com/archives-785.html"><img src="uploads/2.jpg" alt="深圳路面塌陷形成直径10米大坑"></a></li>
		<li><a href="http://www.lrxin.com/archives-785.html"><img src="uploads/3.jpg" alt='"520" 武汉新人扎堆结婚'></a></li>
		<li><a href="http://www.lrxin.com/archives-785.html"><img src="uploads/4.jpg" alt="暴雨突袭广州 南沙上演科幻大片"></a></li>
		<li><a href="http://www.lrxin.com/archives-785.html"><img src="uploads/5.jpg" alt="上海美博会模特赤身才会博眼球"></a></li>
	</ul>
</div>
<link href="css/yx_rotaion.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.yx_rotaion.js"></script>
<script type="text/javascript">
$(".yx-rotaion").yx_rotaion({auto:true });
</script>
<!--结束-->
</body>
</html>

幻灯片参数说明:

$(".yx-rotaion").yx_rotaion({
    /**轮换间隔时间,单位毫秒*/
    during:3000,
    /**是否显示左右按钮*/
    btn:true,
    /**是否显示焦点按钮*/
    focus:true,
    /**是否显示标题*/
    title:true,
    /**是否自动播放*/
    auto:true		
});

设置幻灯片图片大小 在 yx_rotaion.css 文件中

/* 这里修改图片大小*/
.yx-rotaion img{ width:549px; height:366px; }

演示地址:http://www.17sucai.com/preview/53522/2013-11-22/jquery.yx_rotaion_1/demo.html

下载地址:http://pan.baidu.com/s/1nt63Juh