CSS3选项动画切换效果HTML代码<form action=""> <fieldset id="spades"> <input class="card" id="spade" type="radio" name="spade" value="spade" /> <label class="base" for="spade" title="This is the Ace of Spades!"> <span> <em> A </em> &#9824; </span> <strong> &#9824; </strong> ...继续阅读 (21)

jQuery旋转预览画廊效果HTML代码结构<div class="wrapper"> <div class="gallery"> <ul class="reset"> <li><img src="img/img1.jpg" alt="" /></li> <li><img src="img/img2.jpg" alt="" /></li> <li><img src="img/img3.jpg" alt="" /></li> <li><img src="img/img4.jpg" alt="" /></li> <li><img src="img/img5.jpg" alt="" /></li> <li><img src="img/i ...继续阅读 (36)

jQuery+CSS3绘制网页日历效果引入js代码<script type="text/javascript" src="js/jquery-1.7.min.js"> </script> <script type="text/javascript"> //日历—————————————————————————————————————————— $(function() { //绘制月历体—————————————————————————————————————————— for (var i = 0; i < 35; i++) { $("<li><span></span></li>").appendTo(".month-body").addClass("month-cell"); } var today = new Date() var FullYear = today.getFullYear(); //获取年份 var m = tod ...继续阅读 (22)

jquery垂直下拉多级菜单效果导入js代码<script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="menu_min.js"></script> <script type="text/javascript"> $(document).ready(function (){ $(".menu ul li").menu(); }); </script> ...继续阅读 (28)

Tab标签选项卡360度内容翻转jquery特效引入js代码<script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.quickflip.js" ></script> <script type="text/javascript" > $('document').ready(function(){ $('#flip-container').quickFlip(); $('#flip-navigation li a').each(function(){ $(this).click(function(){ $('#flip-navigation li').each(function(){ $(this).removeClass('selected'); }); $(this).parent().addClass('selected'); var flipi ...继续阅读 (33)

Zoomhover简易的jQuery放大镜效果引入js代码<script type="text/javascript" src="js/jquery.min.js"> </script> <script> /* imgbox 当前图片区域 hoverbox 鼠标移入区域 l 当前图片左距离 t 当前图片上距离 x 鼠标距离X轴 y 鼠标距离Y轴 h_w 鼠标移入图片块宽度 h_h 鼠标移入图片块高度 showbox 展示大图区域 */ function Zoom(imgbox, hoverbox, l, t, x, y, h_w, h_h, showbox) { var moveX = x - l - (h_w / 2); //鼠标区域距离 var moveY = y - t - (h_h / 2); //鼠标区域距离 if (moveX < 0) { moveX = 0 } if (moveY < 0) { moveY = 0 } if (moveX > imgbo ...继续阅读 (23)

jQuery+CSS3模拟WIN8卡片式UI效果部分js代码$(document).ready(function() { //slidedown Effect $('.slidedown').hover(function() { $('.search').show(); $(this).children().animate({ top: '30' }, { queue: false, duration: 500 }); }, function() { $(this).children().animate({ top: '0' }, { queue: false, duration: 500 }); $('.search').hide(); }); //slideleft Effect $('.slideleft' ...继续阅读 (35)

13种CSS3网页加载进度条效果<script> var loader = document.getElementById('la-anim-6-loader') , border = document.getElementById('la-anim-6-border') , α = 0 , π = Math.PI , t = 15 , tdraw; function PieDraw() { α++; α %= 360; var r = ( α * π / 180 ) , x = Math.sin( r ) * 250 , y = Math.cos( r ) * - 250 , mid = ( α > 180 ) ? 1 : 0 , anim = 'M 0 0 v -250 A 250 250 1 ' + mid + ' 1 ' + x + ' ' ...继续阅读 (26)

jQuery背景图片墙聚光灯效果导入js代码<script type="text/javascript" charset="utf-8" src='js/jquery.js'> </script> <script type="text/javascript" charset="utf-8"> $(window).load(function() { var spotlight = { // the opacity of the "transparent" images - change it if you like opacity: 0.2, /*the vars bellow are for width and height of the images so we can make the &lt;li&gt; same size */ imgWidth: $('.spotlightWrapper ul li').find('img').wid ...继续阅读 (23)

jQuery带小图全屏幻灯片展示效果导入js代码<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> ...继续阅读 (19)

可调整导航大小的jQuery特效引入js代码<script type="text/javascript" src="jquery-1.3.2.js"> </script> <script type="text/javascript"> $(function() { changeWidth(500); $('#buttons input').click(function() { changeWidth($(this).val()); }); function changeWidth(menuWidth) { var menuItems = $('#menu li').size(); var itemWidth = (menuWidth / menuItems) - 2; $('#menu').css({ 'width': menuWidth + 'px' }); ...继续阅读 (14)

使用HTML5实现刮刮卡效果引入js代码<script type="text/javascript"> var bodyStyle = document.body.style; bodyStyle.mozUserSelect = 'none'; bodyStyle.webkitUserSelect = 'none'; var img = new Image(); var canvas = document.querySelector('canvas'); canvas.style.backgroundColor='transparent'; canvas.style.position = 'absolute'; var imgs = ['p_0.jpg','p_1.jpg']; var num = Math.floor(Math.random()*2); img.src = imgs[num]; img.addEventListener('load', function(e) { var ctx; var w = img.width, h = img.height; ...继续阅读 (19)

模仿flash翻转效果的jquery导航菜单代码引入css js代码文件<link href="css/flipmenu.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"> </script> <script type="text/javascript" src="js/flipmenu-min.js"> </script> <script type="text/javascript"> $(document).ready(function() { var menu1 = new Flipmenu("flip_menu1"); var menu2 = new Flipmenu("flip_menu2"); }); </script> <style type="text/css"&g ...继续阅读 (26)

jQuery自动滚动切换特效引入js代码<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="general.js"></script> ...继续阅读 (27)

基于jQuery的时钟特效引入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> ...继续阅读 (21)

基于jQuery倒数计时器特效引入js代码<script src="http://libs.baidu.com/jquery/1.7.0/jquery.js"></script> <script src="assets/countdown/jquery.countdown.js"></script> <script src="assets/js/script.js"></script> ...继续阅读 (45)

jQuery图像菜单特效引入js代码<script type="text/javascript" src="http://libs.baidu.com/jquery/1.5.1/jquery.js"> </script> <script type="text/javascript" src="js/jquery.easing.1.3.js"> </script> <script type="text/javascript"> $(function() { var $menu = $('#ei_menu > ul'), $menuItems = $menu.children('li'), $menuItemsImgWrapper = $menuItems.children('a'), $menuItemsPreview = $menuItemsImgWrapper.children('.ei_preview'), totalMenuItems = $men ...继续阅读 (29)

jquery移至顶部/底部按钮特效引入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': &# ...继续阅读 (31)

基于jQuery和CSS3创建的日历引入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> ...继续阅读 (41)

jQuery+HTML5实现刮刮乐抽奖特效引入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_i ...继续阅读 (16)

jQuery分页插件引入css jquery代码文件<link rel="stylesheet" type="text/css" href="style.css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="style-ie.css" /> <![endif]--> <script src='js/jquery-1.2.6.min.js' type='text/javascript'> </script> <script src="js/jquery-easing.1.2.js" type='text/javascript'> </script> <script src="js/jquery-easing-compatibility.1.2.js" type='text/javascript'> </script> <script src ...继续阅读 (39)

jQuery+CSS3打造超酷3D按钮效果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 ...继续阅读 (36)

基于HTML5和CSS的全屏焦点图特效引入css js代码文件<link href="css/slider.css" rel="stylesheet" type="text/css" /> <!--[if lt IE 9]><script src="js/html5.js"></script><![endif]--> <script type='text/javascript' src='js/jquery-1.7.2.min.js'></script> <script type='text/javascript' src='js/common.js'></script> <script type='text/javascript' src='js/slider.js'></script>html结构文件<header> <div class="header-content home"> ...继续阅读 (28)

jQuery模拟CSS3图片放大效果对比HTML结构代码<p align="center">ZoomIn Jquery+CSS2 </p> <div id="zoom0"> <div id="pic1"><img src="images/test1.jpg" /></div> <div id="pic2"><img src="images/test2.jpg" /></div> <div id="pic3"><img src="images/test0.jpg" /></div> </div> <p align="center">ZoomIn CSS3</p> <div id="zoom1"> <div id="pic1"><img src="images/test1.jpg" /></di ...继续阅读 (30)

Node.js 教程一nodejs简介简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。谁适合阅读本教程？如果你是一个前端程序员，你不懂的像PHP、Python或Java等动态编程语言，然后你想创建自己的服务，那么Node.js是一个非常好的选择。Node.js 是运行在服务端的 JavaScript，如果你熟悉Javascript，那么你将会很容易的学会Node.js。当然，如果你是后端程序员，想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。学习本教程前你需要了解在继续本教程之前，你应该了解一些基本的计算机编程术语。如果你学习过Javascript,PHP，Java等编程语言，将有助于你更快的了解Node.js编程。第一个Node.js程序：Hello World！脚本模式以下是我们的第一个Node.js程序：console.log("Hello World");保存该文件，文件名为 helloworld.js， 并通过 node命令来执行：node helloworld.js程序执行后，正 ...继续阅读 (21)

jQuery+HTML5+CSS3实现的文本框效果html结构<form class="form"> <p><input type="text" placeholder="Your name please"></p> <p><input type="text" placeholder="Enter your email"></p> <p><input type="search" placeholder="Search"></p> <p><textarea placeholder="Write your comments here"></textarea></p> </form>导入js代码文件<script src="jquery.js"></script> <script src="modernizr.js"></script> <script ...继续阅读 (28)

1、要响应式开发web，也就是页面必须自适应屏幕大小，可以采用流体布局，如之前的文章（自适应宽度布局），其他具体的小问题可以采用media query解决（让IE支持CSS3 Media Query实现响应式Web设计和CSS3 Media Queries）；2、因为手机大多是高级浏览器，可以使用html5+css3开发；3、合理灵活的使用meta标签，具体如下；<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”viewport” /> <meta content=”yes” name=”apple-mobile-web-app-capable” /> <meta content=”black” name=”apple-mobile-web-app-status-bar-style” /> <meta content=”telephone=no” name=”format-detection” />第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；第二个meta标签是iphone设备中的safari私有meta标签，它 ...继续阅读 (32)

html5圆形进度条加载按钮效果<script type="text/javascript" src="js/classie.js"></script> <script type="text/javascript" src="js/uiProgressButton.js"></script> <script type="text/javascript"> [].slice.call( document.querySelectorAll( '.progress-button' ) ).forEach( function( bttn, pos ) { new UIProgressButton( bttn, { callback : function( instance ) { var progress = 0, interval = setInterval( function() { progress = Math.min( progress + Math.random() * 0.1, 1 ); instance.setProgress( progress ); ...继续阅读 (45)

web前端开发网站常用HTML meta 标签属性必要属性属性 值 描述content some text 定义与http-equiv或name属性相关的元信息可选属性属性 值 描述http-equiv content-type / expire / refresh / set-cookie 把content属性关联到HTTP头部。name author / description / keywords / generator / revised / others 把 content 属性关联到一个名称。content some text 定义用于翻译 content 属性值的格式。SEO优化页面关键词，每个网页应具有描述该网页内容的一组唯一的关键字。使用人们可能会搜索，并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短，则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符。<meta name="keywords" content="your tags" />页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。<meta name="description" content="150 words" />搜索引擎索引 ...继续阅读 (21)

Loading网页jQuery加载进度条动画效果部分jQuery代码<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> /* 演示一 */ $(document).ready(function(){ $('#progress').removeClass('running'); $('.trigger').click(function(){ $('#progress').removeClass('running').delay(10).queue(function(next){ $(this).addClass('running'); next(); }); return false; }); }); /* 演示二 */ $(document).ready(function(){ $('#content').removeClass('fullwidth ...继续阅读 (22)