CSS3应用及源码,jQuery元宵猜灯谜特效

 百家乐概况     |      2019-11-24 10:50

jQuery元宵猜灯谜特效(元宵十五日猜一个字),jquery灯谜

在线体验:

jQuery元宵猜灯谜特效的HTML代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>元宵十五日猜一个字 - 可乐义</title>
<meta name="description" content="元宵十五日猜一个字" />
<meta name="keywords" content="元宵十五日猜一个字" />
<link type="text/css" rel="Stylesheet" href="http://keleyi.com/keleyi/phtml/jqtexiao/35/keleyitimu.css" />
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/35/keleyitimu.js"></script>

</head>
<body>
<div id="head_keleyi_com">
<div style="float:left;width:156px">
<a href="http://keleyi.com">
<img src="http://keleyi.com/images/logo.gif" alt="柯乐义" style="border:0px; width:152px; height:72px;" />
</a>
</div>
<div id="tou_kelei_cn">元宵灯谜</div>
<div class="clear"></div>
</div>
<div id="weihzi_keleyi_com"><a href="http://keleyi.com" target="_blank">首页</a> - <a href="http://keleyi.com/keleyi/phtml/">特效库</a> - <a href="http://keleyi.com/a/bjae/sn78qmtf.htm" target="_blank">原文</a></div>
<div id="container">
<div id="tikuang_keleyi_com">
<div id="tigan_keleyi_com">
元宵十五日猜一个字?
</div>
<div>
<div id="huida_keleyi_com">
<br />在这里输入答案:<br /><input type="text" id="daan_keleyi_com" onkeydown="return jpdati(event);" style="width:300px;" />
<br />
<div id="tips_keleyi_com"> </div>
<input type="button" value="答题" onclick="dati()" class="answerbutton" />
<div><a href="http://www.keleyi.cn/yzdd/20130221/yhxl4wjq.htm">上一题</a> <a href="http://www.keleyi.cn/yzdd/20120309/cls3we69.htm">下一题</a> <a href="javascript:;" id="qingkong">清空</a> <a href="javascript:kandaan()">查看答案</a></div>
<div id="daan_div" style="visibility:hidden">参考答案:廿</div>
</div>
<div id="zaiyiqi">

</div>
</div>
<div>

</div>

</div>
<div id="right_keleyi_com">

</div>
</div>
<div id="dibu_keleyi_com"> 柯乐义&copy; keleyi.com <a href="http://keleyi.com/keleyi/phtml/" target="_blank">特效库</a> | <a href="http://keleyi.com/map/">网站地图</a> </div>
</body>
</html>

 

web前端资源:

在线体验: jQuery元宵猜灯谜特效的HTML代码如下:...

精美jQuery分页插件 带滑动条分页

这是一款jQuery分页插件,并且带有滑动条,方便页码数量多的分页程序。

核心jQuery代码:

lom599乐百家手机 1lom599乐百家手机 2

$(document).ready(function(){

            $("#pagination").jPaginator({ 
                nbPages:64,
                marginPx:5,
                length:8, 
                overBtnLeft:'#over_backward', 
                overBtnRight:'#over_forward', 
                maxBtnLeft:'#max_backward', 
                maxBtnRight:'#max_forward', 
                onPageClicked: function(a,num) { 
                    $("#page").html("Page "+num); 
                } 
            });

        });

View Code

lom599乐百家手机 3

在线演示lom599乐百家手机 ,        源码下载

HTML5/CSS3分步提示框Tooltip

很炫的Tooltip插件,并且在tooltip中可以进行分步骤操作。

百家了乐八大技巧 ,核心jQuery代码:

lom599乐百家手机 4lom599乐百家手机 5

$(document).ready(function () {
  var nbP = $('.container p').length;
  var w = parseInt($('.container p').css("width"));
  var max = (nbP - 1) * w;
  $("ul li[data-num='1']").addClass('active');
  $('.step span').html('Step 1');

  $('body').on('click','.btn', function(){
    var margL = parseInt($('.slider-turn').css('margin-left'));
    var modulo = margL%w;
    if (-margL < max && modulo == 0) {
      margL -= w;

      $('.slider-turn').animate({
        'margin-left':margL
      },300);
      $('ul li.active').addClass('true').removeClass('active');
      var x = -margL/w +1;
      $('ul li[data-num="'+x+'"]').addClass('active');
      $('.step span').html("Step "+x);
    }
    else  {}
  });

  $('body').on('click','.close',function(){
    $('.container').animate({
      'opacity':0
    },600);
    $('.container').animate({
      'top':-1200
    }, {
      duration: 2300,
      queue: false
    });
    $('.open').animate({
      'top':'50%'
    });
  });

  $('body').on('click','.open',function() {
    $('.open').animate({
      'top':-1000
    });
    $('.container').animate({
      'opacity':1
    },400);
    $('.container').animate({
      'top':'50%'
    }, {
      duration: 800,
      queue: false
    });
  });
});

View Code

lom599乐百家手机 6

在线演示        源码下载

HTML5加入WEB以后,网页世界就变得丰富绚丽起来了,但是我们在项目应用中,不仅需要绚丽的动画效果,而且更需要有实用的价值。今天分享的一些jQuery/CSS3应用不仅绚丽,而且还比较实用,如果感兴趣,可以应用到自己的项目中。

HTML5纸带翻转动画 超炫的3D特效

这是一款很不错的HTML5 3D动画体验应用,实用性没有上面几款强。

核心jQuery代码:

lom599乐百家手机 7lom599乐百家手机 8

(function(){
  var cont = document.querySelector('#cont');

  document.addEventListener('mousemove', updRotation, false);

  function updRotation(e){
    document.querySelector('#msg').style.opacity = 0;
    cont.style.webkitTransform = 'rotateY(' + e.x / 10 + 'deg) rotateZ(-' + e.y / 10 + 'deg)';   
    cont.style.transform = 'rotateY(' + e.x / 10 + 'deg) rotateZ(-' + e.y / 10 + 'deg)';   
  }
})();

View Code

lom599乐百家手机 9

在线演示        源码下载