您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

  • 基于jQuery的时钟特效

    基于jQuery的时钟特效

    基于jQuery时钟特效
    20150922230356
    引入js代码

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script type="text/javascript" src="jquery.tzineClock/jquery.tzineClock.js"></script><script type="text/javascript" src="script.js"></script>

    下载地址
    预览地址

  • jquery移至顶部/底部按钮特效

    jquery移至顶部/底部按钮特效

    jquery移至顶部/底部按钮特效
    20150922231326
    引入js代码

    <script src="jquery-1.3.2.js" type="text/javascript"></script><script src="scroll-startstop.events.jquery.js" type="text/javascript"></script><script> $(function() { var $elem = $('#content'); $('#nav_up').fadeIn('slow'); $('#nav_down').fadeIn('slow'); $(window).bind('scrollstart', function() { $('#nav_up,#nav_down').stop().animate({ 'opacity': '0.2' }); }); $(window).bind('scrollstop', function() { $('#nav_up,#nav_down').stop().animate({ 'opacity': '1' }); }); $('#nav_down').click(function(e) { $('html, body').animate({ scrollTop: $elem.height() }, 800); }); $('#nav_up').click(function(e) { $('html, body').animate({ scrollTop: '0px' }, 800); }); });</script>

    下载地址
    预览地址

  • 基于jQuery和CSS3创建的日历

    基于jQuery和CSS3创建的日历

    基于jQuery和CSS3创建的日历
    20150922230011
    引入js

    <script src="images/jquery.min.js"></script><script src="images/jquery-ui-datepicker.min.js"></script><script> $('#calendar').datepicker({ inline: true, firstDay: 1, showOtherMonths: true, dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] });</script>

    下载地址
    预览地址

  • jQuery+HTML5实现刮刮乐抽奖特效

    jQuery+HTML5实现刮刮乐抽奖特效

    jQuery+HTML5实现刮刮乐抽奖特效
    20150922225457
    引入js代码

    <script type="text/javascript"> var gua = 1, re = 2; var imgSrc = 'img/aa.png'; function showdiv() { document.getElementById("bg1").style.display = "block"; document.getElementById("show").style.display = "block"; } function hidediv() { document.getElementById("bg1").style.display = 'none'; document.getElementById("show").style.display = 'none'; } $(function() { var width = $("#show_img").width(); var height = $("#show_img").height(); var winheight = $(window).height(); var winwidth = $(window).width(); $("#show").css({ "width": 300 + "px", "height": 160 + "px", "overflow": "hidden", "margin-left": (winwidth - 320) / 2 + "px", "margin-top": winheight / 3 + "px" }); $("#show_btn").css({ "width": 176 * 0.5 + "px", "height": 76 * 0.5 + "px" }); $("#gua_div").html("x" + gua); $("#re_div").html("x" + re); if (gua == 0) { showdiv(); } }) $("img").load(function() { var body_width = $(window).width(); var body_height = $(window).height(); $("#gua1_img").width(300).height(160); var height = 141; var width = 285; var bg2_width = $("#bg2_img").width(); var bg2_height = $("#bg2_img").height(); $("#gua1").css({ "margin-top": "20px" }); $("#notify").css({ "margin-top": "200px" }); $("#nImg").width(300).height(101); $("#di").css({ "margin-top": "50px" }); $("#di_img").width(414 * 0.7).height(24 * 0.7); $("#gua").width(width / 10).height(width / 10); $("#gua_div").css({ "line-height": width / 10 + "px", "width": width / 10 + "px", "height": width / 10 + "px", "margin-top": "-" + ($("#gua").height()) + "px", "margin-left": $("#gua").height() + 5 + "px", "font-size": $("#gua").height() / 1.6 + "px" }); $("#re").width(width / 10).height(width / 10); $("#re_div").css({ "line-height": width / 10 + "px", "width": width / 10 + "px", "height": width / 10 + "px", "margin-top": "-" + ($("#gua").height()) + "px", "margin-left": $("#gua").height() + 5 + "px", "font-size": $("#gua").height() / 1.6 + "px" }); var gua1_img_width = $("#gua1_img").width(); $("#front").css({ "margin-top": 9.3 + "px", "margin-left": 7.5 + "px" }); $("#bg").width("100%").height($(window).height() - 1); if (gua > 0) { bodys(height, width); } }); function bodys(height, width) { var img = new Image(); var canvas = document.querySelector('canvas'); canvas.style.position = 'absolute'; img.addEventListener('load', function(e) { var ctx; var w = width, h = height; var offsetX = canvas.offsetLeft, offsetY = canvas.offsetTop; var mousedown = false; function layer(ctx) { ctx.fillStyle = 'gray'; ctx.fillRect(0, 0, w, h); } function eventDown(e) { e.preventDefault(); mousedown = true; } function eventUp(e) { e.preventDefault(); mousedown = false; } function eventMove(e) { e.preventDefault(); if (mousedown) { if (e.changedTouches) { e = e.changedTouches[e.changedTouches.length - 1]; } var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0, y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0; with(ctx) { beginPath() arc(x, y, 15, 0, Math.PI * 2); fill(); } } } canvas.width = w; canvas.height = h; canvas.style.backgroundImage = 'url(' + img.src + ')'; ctx = canvas.getContext('2d'); ctx.fillStyle = 'b9b9b9'; ctx.fillRect(0, 0, w, h); layer(ctx); ctx.globalCompositeOperation = 'destination-out'; canvas.addEventListener('touchstart', eventDown); canvas.addEventListener('touchend', eventUp); canvas.addEventListener('touchmove', eventMove); canvas.addEventListener('mousedown', eventDown); canvas.addEventListener('mouseup', eventUp); canvas.addEventListener('mousemove', eventMove); }); img.src = imgSrc; (document.body.style); }</script>

    下载地址
    预览地址

  • jQuery+CSS3打造超酷3D按钮效果

    jQuery+CSS3打造超酷3D按钮效果

    jQuery+CSS3打造超酷3D按钮效果
    20150913113731
    jquery代码

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script> $(document).ready(function() { // Demo #1 // Find the link with an ID of 'tutorial-toggle' and listen for when it is clicked $("a#tutorial-toggle").click(function() { // When it get's clicked, toggle the class 'on' $(this).toggleClass("on"); // If the class 'on' was added... if ($('a#tutorial-toggle').hasClass('on')) { // Then fade in all the dots $(this).text('on'); $('a.dot').fadeIn(); } // Otherwise, the class 'on' must have been removed, so... else { // Fade the dots out $(this).text('off'); $('a.dot').fadeOut(); } return false; }); // Demo #2 $("a#long-toggle").click(function() { $(this).toggleClass("on"); if ($('a#long-toggle').hasClass('on')) { $(this).text('Click to turn tutorial mode off'); $('a.dot2').fadeIn(); } else { $(this).text('Click to turn tutorial mode on'); $('a.dot2').fadeOut(); } return false; }); });</script>

    下载地址
    预览地址

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!