cometwo123_个人页_阿里云开发者社区

发表了文章 2016-04-02

js 恶心的遍历

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script type="text/javascript" src="js/jquery-2.1.4.js"></script> <script type="text/javascript"> // $.each(window, function(i, v) { // document.writeln(i + ':' + v + '<br />') // }); // for(i in window){ // document.writeln(i + ':----->' + window[i] + '<br />') // } var json = [{ "id": "1", "tagName": "apple" }, { "id": "2", "tagName": "orange" }, { "id": "3", "tagName": "banana" }, { "id": "4", "tagName": "watermelon" }, { "id": "5", "tagName": "pineapple" }]; //第一种方法$.each document.writeln('<h3>第一种方法$.each</h3>'); $.each(json, function(i, v) { document.writeln(i + ':->(' + v.id + "," + v.tagName + ')<br />'); }); //第二种方法for in document.writeln('<h3>第二种方法for in</h3>'); for (i in json) { document.writeln(i + ':->' + json[i].id + ':' + json[i].tagName + '<br />') } </script> </head> <body> </body> </html>

发表了文章 2016-03-31

圆环百分比

发表了文章 2016-03-30

jQuery旋转插件jqueryrotate,制作转盘

下载地址：http://download.csdn.net/detail/cometwo/9478526 CSS3 提供了多种变形效果，比如矩阵变形、位移、缩放、旋转和倾斜等等，让页面更加生动活泼有趣，不再一动不动。然后 IE10 以下版本的浏览器不支持 CSS3 变形，虽然 IE 有私有属性滤镜（filter），但不全面，而且效果和性能都不好。今天介绍一款 jQuery 插件——jqueryrotate，它可以实现旋转效果。jqueryrotate 支持所有主流浏览器，包括 IE6。如果你想在低版本的 IE 中实现旋转效果，那么 jqueryrotate 是一个很好的选择。兼容性 jqueryrotate 支持所有主流浏览器，包括 IE6。jqueryrotate 在高级浏览器中使用 CSS3 transform 属性实现，在低版本 IE 中使用 VML 实现。当然，你可以使用 IE 条件注释，低版本 IE 使用 jqueryrotate，高级浏览器则直接使用 CSS3。使用方法我们使用 Google Chrome 的 Logo 做演示，图片如下，请注意对比，不要看花眼了。演示1 直接旋转一个角度 $('#img1').rotate(45); 或 $('#img1').rotate({angle:45}); 演示2 鼠标移动效果 $('#img2').rotate({ bind : { mouseover : function(){ $(this).rotate({animateTo: 180}); }, mouseout : function(){ $(this).rotate({animateTo: 0}); } } }); 演示3 不停旋转 var angle = 0; setInterval(function(){ angle +=3; $('#img3').rotate(angle); }, 50); var rotation = function (){ $('#img4').rotate({ angle: 0, animateTo: 360, callback: rotation }); } rotation(); var rotation2 = function(){ $('#img5').rotate({ angle: 0, animateTo: 360, callback: rotation2, easing: function(x,t,b,c,d){ return c*(t/d)+b; } }); } rotation2(); 演示4 点击旋转 $('#img6').rotate({ bind: { click: function(){ $(this).rotate({ angle: 0, animateTo: 180, easing: $.easing.easeInOutExpo }); } } }); var value2 = 0; $('#img7').rotate({ bind: { click: function(){ value2 +=90; $(this).rotate({ animateTo: value2 }); } } }); 参数参数类型说明默认值 angle 数字旋转一个角度 0 animateTo 数字从当前的角度旋转到多少度 0 step 函数每个动画步骤中执行的回调函数，当前角度值作为该函数的第一个参数无 easing 函数自定义旋转速度、旋转效果，需要使用 jQuery.easing.js 无 duration 整数旋转持续时间，以毫秒为单位 callback 函数旋转完成后的回调函数无 getRotateAngle 函数返回旋转对象当前的角度无 stopRotate 函数停止旋转无演示虽然使用的是图片，但 jqueryrotate 并不只是能运用在图片上，其他元素如 div 等也可以使用。同时，你可以发挥想象，制作出更多关于旋转的特效。

发表了文章 2016-03-28

经典的js 代码段

0. 如何创建嵌套的过滤器： 1 2 3 4 5 //允许你减少集合中的匹配元素的过滤器， //只剩下那些与给定的选择器匹配的部分。在这种情况下， //查询删除了任何没（:not）有（:has） //包含class为“selected”（.selected）的子节点。 .filter(":not(:has(.selected))") 1. 如何重用元素搜索 1 2 3 4 5 6 7 8 9 10 var allItems = $("div.item"); var keepList = $("div#container1 div.item"); //现在你可以继续使用这些jQuery对象来工作了。例如， //基于复选框裁剪“keep list”，复选框的名称 //符合 < DIV >class names: $(formToLookAt + " input:checked").each(function() { keepList = keepList.filter("." + $(this).attr("name")); }); < /DIV> 2. 任何使用has()来检查某个元素是否包含某个类或是元素： 1 2 3 4 //jQuery 1.4.*包含了对这一has方法的支持。该方法找出 //某个元素是否包含了其他另一个元素类或是其他任何的 //你正在查找并要在其之上进行操作的东东。 $("input").has(".email").addClass("email_icon"); 3. 如何使用jQuery来切换样式表 1 2 //找出你希望切换的媒体类型（media-type），然后把href设置成新的样式表。 $('link[media='screen']').attr('href', 'Alternative.css'); 4. 如何限制选择范围（基于优化目的）： 1 2 3 4 5 6 //尽可能使用标签名来作为类名的前缀， //这样jQuery就不需要花费更多的时间来搜索 //你想要的元素。还要记住的一点是， //针对于你的页面上的元素的操作越具体化， //就越能降低执行和搜索的时间。 var in_stock = $('#shopping_cart_items input.is_in_stock'); 1 2 3 4 5 <ul id="shopping_cart_items"> <li><input type="radio" value="Item-X" name="item" class="is_in_stock" /> Item X</li> <li><input type="radio" value="Item-Y" name="item" class="3-5_days" /> Item Y</li> <li><input type="radio" value="Item-Z" name="item" class="unknown" /> Item Z</li> </ul> 5. 如何正确地使用ToggleClass： 1 2 3 4 5 6 //切换（toggle）类允许你根据某个类的 //是否存在来添加或是删除该类。 //这种情况下有些开发者使用： a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton'); //toggleClass允许你使用下面的语句来很容易地做到这一点 a.toggleClass('blueButton'); 6. 如何设置IE特有的功能： 1 2 3 if ($.browser.msie) { // Internet Explorer就是个虐待狂 } 7. 如何使用jQuery来代替一个元素： 1 $('#thatdiv').replaceWith('fnuh'); 8. 如何验证某个元素是否为空： 1 2 3 if ($('#keks').html() == null) { //什么都没有找到; } 9. 如何从一个未排序的集合中找出某个元素的索引号 1 2 3 $("ul > li").click(function () { var index = $(this).prevAll().length; }); 10. 如何把函数绑定到事件上： 1 2 3 $('#foo').bind('click', function() { alert('User clicked on "foo."'); }); 11. 如何追加或是添加html到元素中： 1 $('#lal').append('sometext'); 12. 在创建元素时，如何使用对象字面量（literal）来定义属性 1 var e = $("", { href: "#", class: "a-class another-class", title: "..." }); 13. 如何使用多个属性来进行过滤 1 2 3 //在使用许多相类似的有着不同类型的input元素时， //这种基于精确度的方法很有用 var elements = $('#someid input[type=sometype][value=somevalue]').get(); 14. 如何使用jQuery来预加载图像： 1 2 3 4 5 6 7 jQuery.preloadImages = function() { for(var i = 0; i < arguments.length; i++) { $("<img />").attr('src', arguments[i]); } }; //用法 $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg'); 15. 如何为任何与选择器相匹配的元素设置事件处理程序： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 $('button.someClass').live('click', someFunction); //注意，在jQuery 1.4.2中，delegate和undelegate选项 //被引入代替live，因为它们提供了更好的上下文支持 //例如，就table来说，以前你会用 //.live() $("table").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover"); }); }); //现在用 $("table").delegate("td", "hover", function(){ $(this).toggleClass("hover"); }); 16. 如何找到一个已经被选中的option元素： 1 $('#someElement').find('option:selected'); 17. 如何隐藏一个包含了某个值文本的元素： 1 $("p.value:contains('thetextvalue')").hide(); 18. 如何自动滚动到页面中的某区域 1 2 3 4 5 6 7 8 jQuery.fn.autoscroll = function(selector) { $('html,body').animate( {scrollTop: $(selector).offset().top}, 500 }; } //然后像这样来滚动到你希望去到的class/area上。 $('.area_name').autoscroll(); 19. 如何检测各种浏览器： 1 2 3 4 检测Safari (if( $.browser.safari)), 检测IE6及之后版本 (if ($.browser.msie && $.browser.version > 6 )), 检测IE6及之前版本 (if ($.browser.msie && $.browser.version <= 6 )), 检测FireFox 2及之后版本 (if ($.browser.mozilla && $.browser.version >= '1.8' )) 20. 如何替换串中的词 1 2 var el = $('#id'); el.html(el.html().replace(/word/ig, '')); 21. 如何禁用右键单击上下文菜单： 1 2 3 $(document).bind('contextmenu',function(e){ return false; }); 22. 如何定义一个定制的选择器 1 2 3 4 5 6 7 8 9 $.expr[':'].mycustomselector = function(element, index, meta, stack){ // element- 一个DOM元素 // index – 栈中的当前循环索引 // meta – 有关选择器的元数据 // stack – 要循环的所有元素的栈 // 如果包含了当前元素就返回true // 如果不包含当前元素就返回false }; // 定制选择器的用法： $('.someClasses:test').doSomething(); 23. 如何检查某个元素是否存在 1 2 3 if ($('#someDiv').length) { //万岁！！！它存在…… } 24. 如何使用jQuery来检测右键和左键的鼠标单击两种情况： 1 2 3 4 5 6 7 $("#someelement").live('click', function(e) { if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) { alert("Left Mouse Button Clicked"); } else if(e.button == 2) { alert("Right Mouse Button Clicked"); } }); 25. 如何显示或是删除input域中的默认值 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //这段代码展示了在用户未输入值时， //如何在文本类型的input域中保留 //一个默认值 wap_val = []; $(".swap").each(function(i){ wap_val[i] = $(this).val(); $(this).focusin(function(){ if ($(this).val() == wap_val[i]) { $(this).val(""); } }).focusout(function(){ if ($.trim($(this).val()) == "") { $(this).val(wap_val[i]); } }); }); 1 <input type="text" value="Enter Username here.." class="swap" /> 26. 如何在一段时间之后自动隐藏或关闭元素（支持1.4版本）： 1 2 3 4 5 6 //这是1.3.2中我们使用setTimeout来实现的方式 setTimeout(function() { $('.mydiv').hide('blind', {}, 500) }, 5000); //而这是在1.4中可以使用delay()这一功能来实现的方式（这很像是休眠） $(".mydiv").delay(5000).hide('blind', {}, 500); 27. 如何把已创建的元素动态地添加到DOM中： 1 2 var newDiv = $(''); newDiv.attr('id','myNewDiv').appendTo('body'); 28. 如何限制“Text-Area”域中的字符的个数： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 jQuery.fn.maxLength = function(max){ this.each(function(){ var type = this.tagName.toLowerCase(); var inputType = this.type? this.type.toLowerCase() : null; if(type == "input" && inputType == "text" || inputType == "password"){ //Apply the standard maxLength this.maxLength = max; } else if(type == "textarea"){ this.onkeypress = function(e){ var ob = e || event; var keyCode = ob.keyCode; var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd; return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection); }; this.onkeyup = function(){ if(this.value.length > max){ this.value = this.value.substring(0,max); } }; } }); }; //用法 $('#mytextarea').maxLength(500); 29. 如何为函数创建一个基本的测试 1 2 3 4 5 6 7 8 9 //把测试单独放在模块中 module("Module B"); test("some other test", function() { //指明测试内部预期有多少要运行的断言 expect(2); //一个比较断言，相当于JUnit的assertEquals equals( true, false, "failing test" ); equals( true, true, "passing test" ); }); 30. 如何在jQuery中克隆一个元素： 1 var cloned = $('#somediv').clone(); 31. 在jQuery中如何测试某个元素是否可见 1 2 3 if($(element).is(':visible') == 'true') { //该元素是可见的 } 32. 如何把一个元素放在屏幕的中心位置： 1 2 3 4 5 6 7 8 jQuery.fn.center = function () { this.css('position','absolute'); this.css('top', ( $(window).height() - this.height() ) / 2 +$(window).scrollTop() + 'px'); this.css('left', ( $(window).width() - this.width() ) / 2 +$(window).scrollLeft() + 'px'); return this; } //这样来使用上面的函数： $(element).center(); 33. 如何把有着某个特定名称的所有元素的值都放到一个数组中： 1 2 3 4 var arrInputValues = new Array(); $("input[name='table[]']").each(function(){ arrInputValues.push($(this).val()); }); 34. 如何从元素中除去html 1 2 3 4 5 6 7 8 9 10 11 (function($) { $.fn.stripHtml = function() { var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi; this.each(function() { $(this).html( $(this).html().replace(regexp,”") ); }); return $(this); } })(jQuery); //用法： $('p').stripHtml(); 35. 如何使用closest来取得父元素： 1 $('#searchBox').closest('div'); 36. 如何使用Firebug和Firefox来记录jQuery事件日志： 1 2 3 4 5 6 7 8 9 // 允许链式日志记录 // 用法： $('#someDiv').hide().log('div hidden').addClass('someClass'); jQuery.log = jQuery.fn.log = function (msg) { if (console){ console.log("%s: %o", msg, this); } return this; }; 37. 如何强制在弹出窗口中打开链接： 1 2 3 4 5 6 7 jQuery('a.popup').live('click', function(){ newwindow=window.open($(this).attr('href'),'','height=200,width=150'); if (window.focus) { newwindow.focus(); } return false; }); 38. 如何强制在新的选项卡中打开链接： 1 2 3 4 5 jQuery('a.newTab').live('click', function(){ newwindow=window.open($(this).href); jQuery(this).target = "_blank"; return false; }); 39. 在jQuery中如何使用.siblings()来选择同辈元素 1 2 3 4 5 6 7 8 9 // 不这样做 $('#nav li').click(function(){ $('#nav li').removeClass('active'); $(this).addClass('active'); }); //替代做法是 $('#nav li').click(function(){ $(this).addClass('active').siblings().removeClass('active'); }); 40. 如何切换页面上的所有复选框： 1 2 3 4 5 6 var tog = false; // 或者为true，如果它们在加载时为被选中状态的话 $('a').click(function() { $("input[type=checkbox]").attr("checked",!tog); tog = !tog; }); 41. 如何基于一些输入文本来过滤一个元素列表： 1 2 3 4 5 //如果元素的值和输入的文本相匹配的话 //该元素将被返回 $('.someClass').filter(function() { return $(this).attr('value') == $('input#someId').val(); }) 42. 如何获得鼠标垫光标位置x和y 1 2 3 4 5 $(document).ready(function() { $(document).mousemove(function(e){ $(’#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY); }); }); 43. 如何把整个的列表元素（List Element，LI）变成可点击的 1 2 3 4 $("ul li").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); 1 2 3 4 5 6 <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> 44. 如何使用jQuery来解析XML（基本的例子）： 1 2 3 4 5 6 function parseXml(xml) { //找到每个Tutorial并打印出author $(xml).find("Tutorial").each(function() { $("#output").append($(this).attr("author") + ""); }); } 45. 如何检查图像是否已经被完全加载进来 1 2 3 $('#theImage').attr('src', 'image.jpg').load(function() { alert('This Image Has Been Loaded'); }); 46. 如何使用jQuery来为事件指定命名空间： 1 2 3 4 5 6 //事件可以这样绑定命名空间 $('input').bind('blur.validation', function(e){ // ... }); //data方法也接受命名空间 $('input').data('validation.isValid', true); 47. 如何检查cookie是否启用 1 2 3 4 5 6 7 var dt = new Date(); dt.setSeconds(dt.getSeconds() + 60); document.cookie = "cookietest=1; expires=" + dt.toGMTString(); var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1; if(!cookiesEnabled) { //没有启用cookie } 48. 如何让cookie过期： 1 2 3 var date = new Date(); date.setTime(date.getTime() + (x * 60 * 1000)); $.cookie('example', 'foo', { expires: date }); 49. 如何使用一个可点击的链接来替换页面中任何的URL 1 2 3 4 5 6 7 8 9 10 11 $.fn.replaceUrl = function() { var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi; this.each(function() { $(this).html( $(this).html().replace(regexp,'<a href="$1">$1</a>‘) ); }); return $(this); } //用法　 $('p').replaceUrl();

发表了文章 2016-03-28

未知图片宽高水平垂直居中

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>未知图片宽高居中</title> <style type="text/css"> .div-1 { width: 200px; height: 200px; border: 1px solid red; text-align: center; display: table-cell; vertical-align: middle; } </style> </head> <body> <div class="div-1"> <img src="img/11111.jpg" /> </div> </body> </html>

发表了文章 2016-03-27

jQuery实时显示鼠标指针位置和键盘ASCII码

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-2.1.4.js"></script> <script language="javascript" type="text/javascript"> $(function() { $(document).mousemove(function(e) { $("span").html("X:" + e.pageX + "Y:" + e.pageY + "事件" + e.type); //不行 document.write("X:" + e.pageX + "Y:" + e.pageY + "事件" + e.type); }); }); </script> </head> <body> <span></span> </body> </html> 按A <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-2.1.4.js"></script> <script language="javascript" type="text/javascript"> $(function() { $(document).keydown(function(e) { $('span').html(e.which); }) }); </script> </head> <body> <span></span> </body> </html>

发表了文章 2016-03-27

js史上最简单的数组合并去重排序

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-2.1.4.js"></script> <script type="text/javascript"> var a = [1, 3, 5, 7, 9, 11, 13]; var b = [1, 2, 4, 6, 8, 10, 12]; var c = $.merge(a, b); document.writeln('合并：' + c + '<br />'); var d = $.unique(c); document.writeln('去重：' + d + '<br />'); var e = d.sort(function(a, b) { return a - b; }); document.writeln('排序：' + e + '<br />'); </script> </head> <body> </body> </html>

发表了文章 2016-03-26

jquery 自定义事件绑定与触发 $.one与$.bind效果对比实例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <mce:script language="javascript" src="jquery-1.5.js" mce_src="jquery-1.5.js" ></mce:script> <mce:script language="javascript" ></mce:script> <input type="button" onclick="testOne()" value="testOne" /> <input type="button" onclick="testBind()" value="testBind" /> </BODY> </HTML>

发表了文章 2016-03-25

移动端1px

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>像素为1px</title> <style type="text/css"> .border { position: relative; margin-bottom: 20px; } .border:after { content: ''; display: block; position: absolute; width: 100%; left: 0px; bottom: 0px; height: 1px; background-color: red; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } .border3 { width: 100%; height: 40px; border: 1px solid red; margin-bottom: 20px; } .border2 { margin: 50px; background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #ccc), to(#ccc)) left bottom repeat-x; background-size: 100% 1px; } </style> </head> <body> <div class="border">像素为1px解决方法一</div> <div class="border2">像素为1px解决方法二</div> <div class="border3">像素为1px解决方法二</div> </body> </html>

发表了文章 2016-03-24

一点点小随笔：min-width

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title></title> <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script> <style type="text/css"> * { margin: 0px; padding: 0px; } html, body { width: 100%; font-size: 16px; min-width: 1305px; overflow: hidden; } ul { list-style: none; width: 100%; /*border: 1px solid red;*/ background: gray; } li { margin: 11px; text-align: center; display: inline-block; width: 200px; height: 20px; border: 1px solid red; } li:nth-child(5n+1) { margin-left: 111px; } </style> <script type="text/javascript"> $(function() { $('ul li').eq(0).css('background', 'green'); }) </script> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </body> </html>

发表了文章 2016-03-23

移动端适配简易步骤

手机端全部适配简易步骤，不确保没有bug。 1、HTML 的 head 部分中加入如下代码： <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 其中 width：viewport 的宽度，可以指定为一个像素值，如：640，或者为特殊的值，如：device-width （设备的宽度）。 initial-scale：初始缩放比例，即当浏览器第一次加载页面时的缩放比例。值为 1.0 即原始尺寸。　　maximum-scale：允许浏览者缩放到的最大比例，一般设为1.0，即原始尺寸。　　minimum-scale：允许浏览者缩放到的最小比例，一般设为1.0，即原始尺寸。　　user-scalable：浏览者是否可以手动缩放，yes 或 no 。 2、HTML 中引入一段自动适配所有窗口的 js 。　　HTML 代码如下（假设你的 js 在 scripts 文件夹下，命名为 demo.js )： <script src="scripts/demo.js"></script> 适配的 js 代码如下（将如下代码复制粘贴到你的 demo.js 中）： (function(doc, win){ var docE1 = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function(){ var clientWidth = docE1.clientWidth; if(!clientWidth) return; docE1.style.fontSize = 20 * (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt,recalc,false); doc.addEventListener('DOMContentLoaded',recalc,false); })(document,window); 3、CSS 中在最开始设置 html 的 font - size ：20px；（这个 size 标准由你定）代码如下： html { font-size: 20px; } 然后假设你部门的设计师给你的页面标准宽度为 640px，则页面中所有的宽高全部除以 2 ，Chrome 浏览器模拟手机页面设置手机型号为 IPhone 4 。这也就是为什么要将所有的宽高除以 2 的原因：IPhone 4 标准宽是320 px。然后正常的用 px 为单位写你的 css ，你所需要做的就是你写的页面，要在 IPhone 4 完全正确显示。如果你说，那设计那边给的不是 640 标准怎么办？你只要让你的页面按照设计图在 iphone 4 上正确显示，就木问题。 4、页面 css 全部写完之后，将所有的 px 转换为以 rem 为单位的数字。例如我设置 body 的 width ：320px；则根据我在第三步设置的 font - size 值，转换为 rem ，则是 width ：16 rem；【320 / 20 (你设置的标准 font - size) = 16】。如果你说一个页面的 css 有几百行，写完再去改太麻烦了，那可以用 px 转换成 rem 的插件。我这里有一款推荐：cssrem（下载使用网址https://github.com/flashlizi/cssrem） 5、大功告成，随意切换机型，尽情得瑟吧~

发表了文章 2016-03-23

最简单写一个年月日时分秒星期日历，倒计时时钟

<div class="timenow"></div> function checktime(val) { if (val < 10) { val = "0" + val; } return val } setInterval(function() { var tm = new Date(); var xqj = " 今天是星期" + "日一二三四五六".charAt(new Date().getDay()); var str = "" + tm.getFullYear() + "年"; str += (tm.getMonth() + 1) + "月"; str += tm.getDate() + "日"; str += checktime(tm.getHours()) + ':'; str += checktime(tm.getMinutes()) + ':'; str += checktime(tm.getSeconds())+xqj; $(".timenow").text(str); }, 1000); js倒计时代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>倒计时js代码</title> <style> * { margin: 0; padding: 0; } body { font-size: 16px; text-align: center; font-family: arial; } .time { margin-top: 10px; border: 1px solid red; height: 30px; padding: 2px; line-height: 30px; } </style> </head> <body> <div class="time"> <span id="t_d">00天</span> <span id="t_h">00时</span> <span id="t_m">00分</span> <span id="t_s">00秒</span> </div> <script> setInterval(function() { var EndTime = new Date('2017/04/05 00:00:00'); var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); var d = 0; var h = 0; var m = 0; var s = 0; if (t >= 0) { d = Math.floor(t / 1000 / 60 / 60 / 24); h = Math.floor(t / 1000 / 60 / 60 % 24); m = Math.floor(t / 1000 / 60 % 60); s = Math.floor(t / 1000 % 60); } document.getElementById("t_d").innerHTML = d + "天"; document.getElementById("t_h").innerHTML = h + "时"; document.getElementById("t_m").innerHTML = m + "分"; document.getElementById("t_s").innerHTML = s + "秒"; }, 10); </script> </body> </html>

发表了文章 2016-03-20

回到顶部和回到底部动画

$("#dwn").click(function() { $('html,body').animate({ scrollTop: $(document).height() }, 600) }); $(".logo2").click(function() { $('html,body').animate({ scrollTop: 0 }, 600) });

发表了文章 2016-03-19

CSS3 动画实现方法大全（*****星级文章*）

CSS3 动画实现方法大全：http://www.100sucai.com/css3/1.html 看最下面： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>CSS3动画实现方式大全</title> <script src="jquery-2.1.0.min.js"></script> <style type="text/css"> .left { width: 300px; color: white; background: #444444; } .left ul { list-style: none; } .left a { color: white; } #right { position: fixed; top: 100px; right: 30%; width: 300px; height: 200px; margin: 100px auto; background: url(http://www.100sucai.com/img/demo/1373.png) } /*******************1、闪光灯***********************/ .animation1 { -webkit-animation: flash 1s .2s ease both; -moz-animation: flash 1s .2s ease both; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-moz-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } /*******************2、弹起***********************/ .animation2 { -webkit-animation: bounce 1s .2s ease both; -moz-animation: bounce 1s .2s ease both; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0) } 40% { -webkit-transform: translateY(-30px) } 60% { -webkit-transform: translateY(-15px) } } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0) } 40% { -moz-transform: translateY(-30px) } 60% { -moz-transform: translateY(-15px) } } /*******************3、摇摆***********************/ .animation3 { -webkit-animation: shake 1s .2s ease both; -moz-animation: shake 1s .2s ease both; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); } } @-moz-keyframes shake { 0%, 100% { -moz-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -moz-transform: translateX(10px); } } /*******************4、秋千***********************/ .animation4 { -webkit-animation: tada 1s .2s ease both; -moz-animation: tada 1s .2s ease both; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1) } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg) } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg) } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg) } 100% { -webkit-transform: scale(1) rotate(0) } } @-moz-keyframes tada { 0% { -moz-transform: scale(1) } 10%, 20% { -moz-transform: scale(0.9) rotate(-3deg) } 30%, 50%, 70%, 90% { -moz-transform: scale(1.1) rotate(3deg) } 40%, 60%, 80% { -moz-transform: scale(1.1) rotate(-3deg) } 100% { -moz-transform: scale(1) rotate(0) } } /*******************5、swing***********************/ .animation5 { -webkit-animation: swing 1s .2s ease both; -moz-animation: swing 1s .2s ease both; } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center } 20% { -webkit-transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg) } 100% { -webkit-transform: rotate(0deg) } } @-moz-keyframes swing { 20%, 40%, 60%, 80%, 100% { -moz-transform-origin: top center } 20% { -moz-transform: rotate(15deg) } 40% { -moz-transform: rotate(-10deg) } 60% { -moz-transform: rotate(5deg) } 80% { -moz-transform: rotate(-5deg) } 100% { -moz-transform: rotate(0deg) } } /*******************6、疯狂摆动***********************/ .animation6 { -webkit-animation: wobble 1s .2s ease both; -moz-animation: wobble 1s .2s ease both; } @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%) } 15% { -webkit-transform: translateX(-25%) rotate(-5deg) } 30% { -webkit-transform: translateX(20%) rotate(3deg) } 45% { -webkit-transform: translateX(-15%) rotate(-3deg) } 60% { -webkit-transform: translateX(10%) rotate(2deg) } 75% { -webkit-transform: translateX(-5%) rotate(-1deg) } 100% { -webkit-transform: translateX(0%) } } @-moz-keyframes wobble { 0% { -moz-transform: translateX(0%) } 15% { -moz-transform: translateX(-25%) rotate(-5deg) } 30% { -moz-transform: translateX(20%) rotate(3deg) } 45% { -moz-transform: translateX(-15%) rotate(-3deg) } 60% { -moz-transform: translateX(10%) rotate(2deg) } 75% { -moz-transform: translateX(-5%) rotate(-1deg) } 100% { -moz-transform: translateX(0%) } } /*******************7、脉冲***********************/ .animation7 { -webkit-animation: pulse 1s .2s ease both; -moz-animation: pulse 1s .2s ease both; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1) } 50% { -webkit-transform: scale(1.1) } 100% { -webkit-transform: scale(1) } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1) } 50% { -moz-transform: scale(1.1) } 100% { -moz-transform: scale(1) } } /*******************8、翻转***********************/ .animation8 { -webkit-animation: flip 1s .2s ease both; -moz-animation: flip 1s .2s ease both; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -webkit-animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in } 100% { -webkit-transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in } } @-moz-keyframes flip { 0% { -moz-transform: perspective(400px) rotateY(0); -moz-animation-timing-function: ease-out } 40% { -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-animation-timing-function: ease-out } 50% { -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-animation-timing-function: ease-in } 80% { -moz-transform: perspective(400px) rotateY(360deg) scale(.95); -moz-animation-timing-function: ease-in } 100% { -moz-transform: perspective(400px) scale(1); -moz-animation-timing-function: ease-in } } /*******************9、X轴淡入***********************/ .animation9 { -webkit-animation: flipInX 1s .2s ease both; -moz-animation: flipInX 1s .2s ease both; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateX(-10deg) } 70% { -webkit-transform: perspective(400px) rotateX(10deg) } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1 } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0 } 40% { -moz-transform: perspective(400px) rotateX(-10deg) } 70% { -moz-transform: perspective(400px) rotateX(10deg) } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1 } } /*******************10、X轴淡出***********************/ .animation10 { -webkit-animation: flipOutX 1s .2s ease both; -moz-animation: flipOutX 1s .2s ease both; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1 } 100% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0 } } @-moz-keyframes flipOutX { 0% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1 } 100% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0 } } /*******************11、Y轴淡入***********************/ .animation11 { -webkit-animation: flipInY 1s .2s ease both; -moz-animation: flipInY 1s .2s ease both; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateY(-10deg) } 70% { -webkit-transform: perspective(400px) rotateY(10deg) } 100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1 } } @-moz-keyframes flipInY { 0% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0 } 40% { -moz-transform: perspective(400px) rotateY(-10deg) } 70% { -moz-transform: perspective(400px) rotateY(10deg) } 100% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1 } } /*******************12、Y轴淡出***********************/ .animation12 { -webkit-animation: flipOutY 1s .2s ease both; -moz-animation: flipOutY 1s .2s ease both; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1 } 100% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0 } } @-moz-keyframes flipOutY { 0% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1 } 100% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0 } } /*******************13、下方淡入***********************/ .animation13 { -webkit-animation: fadeInUp 1s .2s ease both; -moz-animation: fadeInUp 1s .2s ease both; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px) } 100% { opacity: 1; -moz-transform: translateY(0) } } /*******************14、上方淡入***********************/ .animation14 { -webkit-animation: fadeInDown 1s .2s ease both; -moz-animation: fadeInDown 1s .2s ease both; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px) } 100% { opacity: 1; -moz-transform: translateY(0) } } /*******************15、左边淡入***********************/ .animation15 { -webkit-animation: fadeInLeft 1s .2s ease both; -moz-animation: fadeInLeft 1s .2s ease both; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-20px) } 100% { opacity: 1; -moz-transform: translateX(0) } } /*******************16、右边淡入***********************/ .animation16 { -webkit-animation: fadeInRight 1s .2s ease both; -moz-animation: fadeInRight 1s .2s ease both; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(20px) } 100% { opacity: 1; -moz-transform: translateX(0) } } /*******************17、底部淡入***********************/ .animation17 { -webkit-animation: fadeInUpBig 1s .2s ease both; -moz-animation: fadeInUpBig 1s .2s ease both; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @-moz-keyframes fadeInUpBig { 0% { opacity: 0; -moz-transform: translateY(2000px) } 100% { opacity: 1; -moz-transform: translateY(0) } } /*******************18、顶部淡入***********************/ .animation18 { -webkit-animation: fadeInDownBig 1s .2s ease both; -moz-animation: fadeInDownBig 1s .2s ease both; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @-moz-keyframes fadeInDownBig { 0% { opacity: 0; -moz-transform: translateY(-2000px) } 100% { opacity: 1; -moz-transform: translateY(0) } } /*******************19、页面左边淡入***********************/ .animation19 { -webkit-animation: fadeInLeftBig 1s .2s ease both; -moz-animation: fadeInLeftBig 1s .2s ease both; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -moz-transform: translateX(-2000px) } 100% { opacity: 1; -moz-transform: translateX(0) } } /*******************20、页面右边淡入***********************/ .animation20 { -webkit-animation: fadeInRightBig 1s .2s ease both; -moz-animation: fadeInRightBig 1s .2s ease both; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInRightBig { 0% { opacity: 0; -moz-transform: translateX(2000px) } 100% { opacity: 1; -moz-transform: translateX(0) } } /*******************21、向上淡出***********************/ .animation21 { -webkit-animation: fadeOutUp 1s .2s ease both; -moz-animation: fadeOutUp 1s .2s ease both; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-20px) } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; -moz-transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(-20px) } } /*******************22、向下淡出***********************/ .animation22 { -webkit-animation: fadeOutDown 1s .2s ease both; -moz-animation: fadeOutDown 1s .2s ease both; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(20px) } } @-moz-keyframes fadeOutDown { 0% { opacity: 1; -moz-transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(20px) } } /*******************23、向左淡出***********************/ .animation23 { -webkit-animation: fadeOutLeft 1s .2s ease both; -moz-animation: fadeOutLeft 1s .2s ease both; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(-20px) } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; -moz-transform: translateX(0) } 100% { opacity: 0; -moz-transform: translateX(-20px) } } /*******************24、向右淡出***********************/ .animation24 { -webkit-animation: fadeOutRight 1s .2s ease both; -moz-animation: fadeOutRight 1s .2s ease both; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(20px) } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; -moz-transform: translateX(0) } 100% { opacity: 0; -moz-transform: translateX(20px) } } /*******************25、顶部淡出***********************/ .animation25 { -webkit-animation: fadeOutTopBig 1s .2s ease both; -moz-animation: fadeOutTopBig 1s .2s ease both; } @-webkit-keyframes fadeOutTopBig { 0% { opacity: 1; -webkit-transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-2000px) } } @-moz-keyframes fadeOutTopBig { 0% { opacity: 1; -moz-transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(-2000px) } } /*******************26、底部淡出***********************/ .animation26 { -webkit-animation: fadeOutUpBig 1s .2s ease both; -moz-animation: fadeOutUpBig 1s .2s ease both; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(2000px) } } @-moz-keyframes fadeOutUpBig { 0% { opacity: 1; -moz-transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(-2000px) } } /*******************27、页面左边淡出***********************/ .animation27 { -webkit-animation: fadeOutLeftBig 1s .2s ease both; -moz-animation: fadeOutLeftBig 1s .2s ease both; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(-2000px) } } @-moz-keyframes fadeOutLeftBig { 0% { opacity: 1; -moz-transform: translateX(0) } 100% { opacity: 0; -moz-transform: translateX(-2000px) } } /*******************28、页面右边淡出***********************/ .animation28 { -webkit-animation: fadeOutRightBig 1s .2s ease both; -moz-animation: fadeOutRightBig 1s .2s ease both; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(2000px) } } @-moz-keyframes fadeOutRightBig { 0% { opacity: 1; -moz-transform: translateX(0) } 100% { opacity: 0; -moz-transform: translateX(2000px) } } /*******************29、bounceIn***********************/ .animation29 { -webkit-animation: bounceIn 1s .2s ease both; -moz-animation: bounceIn 1s .2s ease both; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3) } 50% { opacity: 1; -webkit-transform: scale(1.05) } 70% { -webkit-transform: scale(.9) } 100% { -webkit-transform: scale(1) } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(.3) } 50% { opacity: 1; -moz-transform: scale(1.05) } 70% { -moz-transform: scale(.9) } 100% { -moz-transform: scale(1) } } /*******************30、bounceInDown***********************/ .animation30 { -webkit-animation: bounceInDown 1s .2s ease both; -moz-animation: bounceInDown 1s .2s ease both; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px) } 60% { opacity: 1; -webkit-transform: translateY(30px) } 80% { -webkit-transform: translateY(-10px) } 100% { -webkit-transform: translateY(0) } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -moz-transform: translateY(-2000px) } 60% { opacity: 1; -moz-transform: translateY(30px) } 80% { -moz-transform: translateY(-10px) } 100% { -moz-transform: translateY(0) } } /*******************31、bounceInUp***********************/ .animation31 { -webkit-animation: bounceInUp 1s .2s ease both; -moz-animation: bounceInUp 1s .2s ease both; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px) } 60% { opacity: 1; -webkit-transform: translateY(-30px) } 80% { -webkit-transform: translateY(10px) } 100% { -webkit-transform: translateY(0) } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -moz-transform: translateY(2000px) } 60% { opacity: 1; -moz-transform: translateY(-30px) } 80% { -moz-transform: translateY(10px) } 100% { -moz-transform: translateY(0) } } /*******************32、bounceInLeft***********************/ .animation32 { -webkit-animation: bounceInLeft 1s .2s ease both; -moz-animation: bounceInLeft 1s .2s ease both; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px) } 60% { opacity: 1; -webkit-transform: translateX(30px) } 80% { -webkit-transform: translateX(-10px) } 100% { -webkit-transform: translateX(0) } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px) } 60% { opacity: 1; -moz-transform: translateX(30px) } 80% { -moz-transform: translateX(-10px) } 100% { -moz-transform: translateX(0) } } /*******************33、bounceInRight***********************/ .animation33 { -webkit-animation: bounceInRight 1s .2s ease both; -moz-animation: bounceInRight 1s .2s ease both; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px) } 60% { opacity: 1; -webkit-transform: translateX(-30px) } 80% { -webkit-transform: translateX(10px) } 100% { -webkit-transform: translateX(0) } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px) } 60% { opacity: 1; -moz-transform: translateX(-30px) } 80% { -moz-transform: translateX(10px) } 100% { -moz-transform: translateX(0) } } /*******************34、bounceOut***********************/ .animation34 { -webkit-animation: bounceOut 1s .2s ease both; -moz-animation: bounceOut 1s .2s ease both; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1) } 25% { -webkit-transform: scale(.95) } 50% { opacity: 1; -webkit-transform: scale(1.1) } 100% { opacity: 0; -webkit-transform: scale(.3) } } @-moz-keyframes bounceOut { 0% { -moz-transform: scale(1) } 25% { -moz-transform: scale(.95) } 50% { opacity: 1; -moz-transform: scale(1.1) } 100% { opacity: 0; -moz-transform: scale(.3) } } /*******************35、bounceOutDown***********************/ .animation35 { -webkit-animation: bounceOutDown 1s .2s ease both; -moz-animation: bounceOutDown 1s .2s ease both; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0) } 20% { opacity: 1; -webkit-transform: translateY(-20px) } 100% { opacity: 0; -webkit-transform: translateY(2000px) } } @-moz-keyframes bounceOutDown { 0% { -moz-transform: translateY(0) } 20% { opacity: 1; -moz-transform: translateY(-20px) } 100% { opacity: 0; -moz-transform: translateY(2000px) } } /*******************36、bounceOutUp***********************/ .animation36 { -webkit-animation: bounceOutUp 1s .2s ease both; -moz-animation: bounceOutUp 1s .2s ease both; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0) } 20% { opacity: 1; -webkit-transform: translateY(20px) } 100% { opacity: 0; -webkit-transform: translateY(-2000px) } } @-moz-keyframes bounceOutUp { 0% { -moz-transform: translateY(0) } 20% { opacity: 1; -moz-transform: translateY(20px) } 100% { opacity: 0; -moz-transform: translateY(-2000px) } } /*******************37、bounceOutLeft***********************/ .animation37 { -webkit-animation: bounceInLeft 1s .2s ease both; -moz-animation: bounceInLeft 1s .2s ease both; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px) } 60% { opacity: 1; -webkit-transform: translateX(30px) } 80% { -webkit-transform: translateX(-10px) } 100% { -webkit-transform: translateX(0) } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px) } 60% { opacity: 1; -moz-transform: translateX(30px) } 80% { -moz-transform: translateX(-10px) } 100% { -moz-transform: translateX(0) } } /*******************38、bounceOutRight***********************/ .animation38 { -webkit-animation: bounceInRight 1s .2s ease both; -moz-animation: bounceInRight 1s .2s ease both; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px) } 60% { opacity: 1; -webkit-transform: translateX(-30px) } 80% { -webkit-transform: translateX(10px) } 100% { -webkit-transform: translateX(0) } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px) } 60% { opacity: 1; -moz-transform: translateX(-30px) } 80% { -moz-transform: translateX(10px) } 100% { -moz-transform: translateX(0) } } /*******************39、rotateIn***********************/ .animation39 { -webkit-animation: rotateIn 1s .2s ease both; -moz-animation: rotateIn 1s .2s ease both; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(-200deg); opacity: 0 } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1 } } @-moz-keyframes rotateIn { 0% { -moz-transform-origin: center center; -moz-transform: rotate(-200deg); opacity: 0 } 100% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1 } } /*******************40、rotateInDownLeft***********************/ .animation40 { -webkit-animation: rotateInDownLeft 1s .2s ease both; -moz-animation: rotateInDownLeft 1s .2s ease both; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1 } } @-moz-keyframes rotateInDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0 } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1 } } /*******************41、rotateInDownRight***********************/ .animation41 { -webkit-animation: rotateInDownRight 1s .2s ease both; -moz-animation: rotateInDownRight 1s .2s ease both; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1 } } @-moz-keyframes rotateInDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0 } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1 } } /*******************42、rotateInUpLeft***********************/ .animation42 { -webkit-animation: rotateInUpLeft 1s .2s ease both; -moz-animation: rotateInUpLeft 1s .2s ease both; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1 } } @-moz-keyframes rotateInUpLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0 } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1 } } /*******************43、rotateInUpRight***********************/ .animation43 { -webkit-animation: rotateInUpRight 1s .2s ease both; -moz-animation: rotateInUpRight 1s .2s ease both; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1 } } @-moz-keyframes rotateInUpRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0 } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1 } } /*******************44、rotateOut***********************/ .animation44 { -webkit-animation: rotateOut 1s .2s ease both; -moz-animation: rotateOut 1s .2s ease both; } @-webkit-keyframes rotateOut { 0% { -webkit-transform: rotate(0); opacity: 1 } 100% { -webkit-transform: rotate(-90deg); opacity: 0 } } @-moz-keyframes rotateOut { 0% { -moz-transform: rotate(0); opacity: 1 } 100% { -moz-transform: rotate(-90deg); opacity: 0 } } /*******************45、rotateOutDownLeft***********************/ .animation45 { -webkit-animation: rotateOutDownLeft 1s .2s ease both; -moz-animation: rotateOutDownLeft 1s .2s ease both; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0 } } @-moz-keyframes rotateOutDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1 } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0 } } /*******************46、rotateOutDownRight***********************/ .animation46 { -webkit-animation: rotateOutDownRight 1s .2s ease both; -moz-animation: rotateOutDownRight 1s .2s ease both; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0 } } @-moz-keyframes rotateOutDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1 } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0 } } /*******************47、rotateOutUpLeft***********************/ .animation47 { -webkit-animation: rotateOutUpLeft 1s .2s ease both; -moz-animation: rotateOutUpLeft 1s .2s ease both; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left top; -webkit-transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: left top; -webkit-transform: rotate(-90deg); opacity: 0 } } @-moz-keyframes rotateOutUpLeft { 0% { -moz-transform-origin: left top; -moz-transform: rotate(0); opacity: 1 } 100% { -moz-transform-origin: left top; -moz-transform: rotate(-90deg); opacity: 0 } } /*******************48、rotateOutUpRight***********************/ .animation48 { -webkit-animation: rotateOutUpRight 1s .2s ease both; -moz-animation: rotateOutUpRight 1s .2s ease both; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right top; -webkit-transform: rotate(0); opacity: 1 } 100% { -webkit-transform-origin: right top; -webkit-transform: rotate(-90deg); opacity: 0 } } @-moz-keyframes rotateOutUpRight { 0% { -moz-transform-origin: right top; -moz-transform: rotate(0); opacity: 1 } 100% { -moz-transform-origin: right top; -moz-transform: rotate(-90deg); opacity: 0 } } /*******************49、hinge***********************/ .animation49 { -webkit-animation: hinge 1s .2s ease both; -moz-animation: hinge 1s .2s ease both; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out } 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out } 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out } 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out } 100% { -webkit-transform: translateY(700px); opacity: 0 } } @-moz-keyframes hinge { 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out } 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out } 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out } 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out } 100% { -moz-transform: translateY(700px); opacity: 0 } } /*******************50、rollIn***********************/ .animation50 { -webkit-animation: rollIn 1s .2s ease both; -moz-animation: rollIn 1s .2s ease both; } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg) } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg) } } @-moz-keyframes rollIn { 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg) } 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg) } } /*******************51、rollOut***********************/ .animation51 { -webkit-animation: rollOut 1s .2s ease both; -moz-animation: rollOut 1s .2s ease both; } @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg) } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg) } } @-moz-keyframes rollOut { 0% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg) } 100% { opacity: 0; -moz-transform: translateX(100%) rotate(120deg) } } /*******************52、slideDown***********************/ .slideDown { animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideDown { 0% { transform: translateY(-100%); } 50% { transform: translateY(8%); } 65% { transform: translateY(-4%); } 80% { transform: translateY(4%); } 95% { transform: translateY(-2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideDown { 0% { -webkit-transform: translateY(-100%); } 50% { -webkit-transform: translateY(8%); } 65% { -webkit-transform: translateY(-4%); } 80% { -webkit-transform: translateY(4%); } 95% { -webkit-transform: translateY(-2%); } 100% { -webkit-transform: translateY(0%); } } /*******************53、slideUp***********************/ .slideUp { animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideUp { 0% { transform: translateY(100%); } 50% { transform: translateY(-8%); } 65% { transform: translateY(4%); } 80% { transform: translateY(-4%); } 95% { transform: translateY(2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); } 50% { -webkit-transform: translateY(-8%); } 65% { -webkit-transform: translateY(4%); } 80% { -webkit-transform: translateY(-4%); } 95% { -webkit-transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); } } /*******************54、slideLeft***********************/ .slideLeft { animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft { 0% { transform: translateX(150%); } 50% { transform: translateX(-8%); } 65% { transform: translateX(4%); } 80% { transform: translateX(-4%); } 95% { transform: translateX(2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(150%); } 50% { -webkit-transform: translateX(-8%); } 65% { -webkit-transform: translateX(4%); } 80% { -webkit-transform: translateX(-4%); } 95% { -webkit-transform: translateX(2%); } 100% { -webkit-transform: translateX(0%); } } /*******************55、slideRight***********************/ .slideRight { animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight { 0% { transform: translateX(-150%); } 50% { transform: translateX(8%); } 65% { transform: translateX(-4%); } 80% { transform: translateX(4%); } 95% { transform: translateX(-2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideRight { 0% { -webkit-transform: translateX(-150%); } 50% { -webkit-transform: translateX(8%); } 65% { -webkit-transform: translateX(-4%); } 80% { -webkit-transform: translateX(4%); } 95% { -webkit-transform: translateX(-2%); } 100% { -webkit-transform: translateX(0%); } } /*******************56、slideExpandUp***********************/ .slideExpandUp { animation-name: slideExpandUp; -webkit-animation-name: slideExpandUp; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease -out; visibility: visible !important; } @keyframes slideExpandUp { 0% { transform: translateY(100%) scaleX(0.5); } 30% { transform: translateY(-8%) scaleX(0.5); } 40% { transform: translateY(2%) scaleX(0.5); } 50% { transform: translateY(0%) scaleX(1.1); } 60% { transform: translateY(0%) scaleX(0.9); } 70% { transform: translateY(0%) scaleX(1.05); } 80% { transform: translateY(0%) scaleX(0.95); } 90% { transform: translateY(0%) scaleX(1.02); } 100% { transform: translateY(0%) scaleX(1); } } @-webkit-keyframes slideExpandUp { 0% { -webkit-transform: translateY(100%) scaleX(0.5); } 30% { -webkit-transform: translateY(-8%) scaleX(0.5); } 40% { -webkit-transform: translateY(2%) scaleX(0.5); } 50% { -webkit-transform: translateY(0%) scaleX(1.1); } 60% { -webkit-transform: translateY(0%) scaleX(0.9); } 70% { -webkit-transform: translateY(0%) scaleX(1.05); } 80% { -webkit-transform: translateY(0%) scaleX(0.95); } 90% { -webkit-transform: translateY(0%) scaleX(1.02); } 100% { -webkit-transform: translateY(0%) scaleX(1); } } /*******************57、expandUp***********************/ .expandUp { animation-name: expandUp; -webkit-animation-name: expandUp; animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes expandUp { 0% { transform: translateY(100%) scale(0.6) scaleY(0.5); } 60% { transform: translateY(-7%) scaleY(1.12); } 75% { transform: translateY(3%); } 100% { transform: translateY(0%) scale(1) scaleY(1); } } @-webkit-keyframes expandUp { 0% { -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5); } 60% { -webkit-transform: translateY(-7%) scaleY(1.12); } 75% { -webkit-transform: translateY(3%); } 100% { -webkit-transform: translateY(0%) scale(1) scaleY(1); } } /*******************58、bounce***********************/ .bounce { animation-name: bounce; -webkit-animation-name: bounce; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease; -webkit-animation-timing-function: ease; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes bounce { 0% { transform: translateY(0%) scaleY(0.6); } 60% { transform: translateY(-100%) scaleY(1.1); } 70% { transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80% { transform: translateY(0%) scaleY(1.05) scaleX(1); } 90% { transform: translateY(0%) scaleY(0.95) scaleX(1); } 100% { transform: translateY(0%) scaleY(1) scaleX(1); } } @-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0%) scaleY(0.6); } 60% { -webkit-transform: translateY(-100%) scaleY(1.1); } 70% { -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80% { -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); } 90% { -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); } 100% { -webkit-transform: translateY(0%) scaleY(1) scaleX(1); } } /*******************59、pulse***********************/ .pulse { animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } } /*******************60、bigEntrance***********************/ .bigEntrance { animation-name: bigEntrance; -webkit-animation-name: bigEntrance; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes bigEntrance { 0% { transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } @-webkit-keyframes bigEntrance { 0% { -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } /*******************61、expandOpen***********************/ .expandOpen { animation-name: expandOpen; -webkit-animation-name: expandOpen; animation-duration: 1.2s; -webkit-animation-duration: 1.2s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes expandOpen { 0% { transform: scale(1.8); } 50% { transform: scale(0.95); } 80% { transform: scale(1.05); } 90% { transform: scale(0.98); } 100% { transform: scale(1); } } @-webkit-keyframes expandOpen { 0% { -webkit-transform: scale(1.8); } 50% { -webkit-transform: scale(0.95); } 80% { -webkit-transform: scale(1.05); } 90% { -webkit-transform: scale(0.98); } 100% { -webkit-transform: scale(1); } } /*******************62、fadeIn***********************/ .fadeIn { animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes fadeIn { 0% { transform: scale(0); opacity: 0.0; } 60% { transform: scale(1.1); } 80% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeIn { 0% { -webkit-transform: scale(0); opacity: 0.0; } 60% { -webkit-transform: scale(1.1); } 80% { -webkit-transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } } /*******************63、hatch***********************/ .hatch { animation-name: hatch; -webkit-animation-name: hatch; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; visibility: visible !important; } @keyframes hatch { 0% { transform: rotate(0deg) scaleY(0.6); } 20% { transform: rotate(-2deg) scaleY(1.05); } 35% { transform: rotate(2deg) scaleY(1); } 50% { transform: rotate(-2deg); } 65% { transform: rotate(1deg); } 80% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } } @-webkit-keyframes hatch { 0% { -webkit-transform: rotate(0deg) scaleY(0.6); } 20% { -webkit-transform: rotate(-2deg) scaleY(1.05); } 35% { -webkit-transform: rotate(2deg) scaleY(1); } 50% { -webkit-transform: rotate(-2deg); } 65% { -webkit-transform: rotate(1deg); } 80% { -webkit-transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0deg); } } /*******************64、floating***********************/ .floating { animation-name: floating; -webkit-animation-name: floating; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(8%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } } /*******************65、tossing***********************/ .tossing { animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes tossing { 0% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 100% { transform: rotate(-4deg); } } @-webkit-keyframes tossing { 0% { -webkit-transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); } } /*******************66、pullUp***********************/ .pullUp { width: 300px; height: 300px; background-image: none !important; background-color: #fe5652 !important; border-radius: 24px; margin: 0px auto; } .pullUp { animation-name: pullUp; -webkit-animation-name: pullUp; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes pullUp { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullUp { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /*******************67、pullDown***********************/ .pullDown { width: 300px; height: 300px; background-image: none !important; background-color: #fe5652 !important; border-radius: 24px; margin: 0px auto; } .pullDown { animation-name: pullDown; -webkit-animation-name: pullDown; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; } @keyframes pullDown { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullDown { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /*******************68、stretchLeft***********************/ .stretchLeft { width: 300px; height: 300px; background-image: none !important; background-color: #fe5652 !important; border-radius: 24px; margin: 0px auto; } .stretchLeft { animation-name: stretchLeft; -webkit-animation-name: stretchLeft; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; } @keyframes stretchLeft { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchLeft { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } /*******************69、stretchRight***********************/ .stretchRight { width: 300px; height: 300px; background-image: none !important; background-color: #fe5652 !important; border-radius: 24px; margin: 0px auto; } .stretchRight { animation-name: stretchRight; -webkit-animation-name: stretchRight; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; } @keyframes stretchRight { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchRight { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } /**************************完******************************/ </style> <script type="text/javascript"> $(function() { $('#css1').click(function() { $('#right').removeClass(); $('#right').addClass('animation1'); return false; }); $('#css2').click(function() { $('#right').removeClass(); $('#right').addClass('animation2'); return false; }); $('#css3').click(function() { $('#right').removeClass(); $('#right').addClass('animation3'); return false; }); $('#css4').click(function() { $('#right').removeClass(); $('#right').addClass('animation4'); return false; }); $('#css5').click(function() { $('#right').removeClass(); $('#right').addClass('animation5'); return false; }); $('#css6').click(function() { $('#right').removeClass(); $('#right').addClass('animation6'); return false; }); $('#css7').click(function() { $('#right').removeClass(); $('#right').addClass('animation7'); return false; }); $('#css8').click(function() { $('#right').removeClass(); $('#right').addClass('animation8'); return false; }); $('#css9').click(function() { $('#right').removeClass(); $('#right').addClass('animation9'); return false; }); $('#css10').click(function() { $('#right').removeClass(); $('#right').addClass('animation10'); return false; }); $('#css11').click(function() { $('#right').removeClass(); $('#right').addClass('animation11'); return false; }); $('#css12').click(function() { $('#right').removeClass(); $('#right').addClass('animation12'); return false; }); $('#css13').click(function() { $('#right').removeClass(); $('#right').addClass('animation13'); return false; }); $('#css14').click(function() { $('#right').removeClass(); $('#right').addClass('animation14'); return false; }); $('#css15').click(function() { $('#right').removeClass(); $('#right').addClass('animation15'); return false; }); $('#css16').click(function() { $('#right').removeClass(); $('#right').addClass('animation16'); return false; }); $('#css17').click(function() { $('#right').removeClass(); $('#right').addClass('animation17'); return false; }); $('#css18').click(function() { $('#right').removeClass(); $('#right').addClass('animation18'); return false; }); $('#css19').click(function() { $('#right').removeClass(); $('#right').addClass('animation19'); return false; }); $('#css20').click(function() { $('#right').removeClass(); $('#right').addClass('animation20'); return false; }); $('#css21').click(function() { $('#right').removeClass(); $('#right').addClass('animation21'); return false; }); $('#css22').click(function() { $('#right').removeClass(); $('#right').addClass('animation22'); return false; }); $('#css23').click(function() { $('#right').removeClass(); $('#right').addClass('animation23'); return false; }); $('#css24').click(function() { $('#right').removeClass(); $('#right').addClass('animation24'); return false; }); $('#css25').click(function() { $('#right').removeClass(); $('#right').addClass('animation25'); return false; }); $('#css26').click(function() { $('#right').removeClass(); $('#right').addClass('animation26'); return false; }); $('#css27').click(function() { $('#right').removeClass(); $('#right').addClass('animation27'); return false; }); $('#css28').click(function() { $('#right').removeClass(); $('#right').addClass('animation28'); return false; }); $('#css29').click(function() { $('#right').removeClass(); $('#right').addClass('animation29'); return false; }); $('#css30').click(function() { $('#right').removeClass(); $('#right').addClass('animation30'); return false; }); $('#css31').click(function() { $('#right').removeClass(); $('#right').addClass('animation31'); return false; }); $('#css32').click(function() { $('#right').removeClass(); $('#right').addClass('animation32'); return false; }); $('#css33').click(function() { $('#right').removeClass(); $('#right').addClass('animation33'); return false; }); $('#css34').click(function() { $('#right').removeClass(); $('#right').addClass('animation34'); return false; }); $('#css35').click(function() { $('#right').removeClass(); $('#right').addClass('animation35'); return false; }); $('#css36').click(function() { $('#right').removeClass(); $('#right').addClass('animation36'); return false; }); $('#css37').click(function() { $('#right').removeClass(); $('#right').addClass('animation37'); return false; }); $('#css38').click(function() { $('#right').removeClass(); $('#right').addClass('animation38'); return false; }); $('#css39').click(function() { $('#right').removeClass(); $('#right').addClass('animation39'); return false; }); $('#css40').click(function() { $('#right').removeClass(); $('#right').addClass('animation40'); return false; }); $('#css41').click(function() { $('#right').removeClass(); $('#right').addClass('animation41'); return false; }); $('#css42').click(function() { $('#right').removeClass(); $('#right').addClass('animation42'); return false; }); $('#css43').click(function() { $('#right').removeClass(); $('#right').addClass('animation43'); return false; }); $('#css44').click(function() { $('#right').removeClass(); $('#right').addClass('animation44'); return false; }); $('#css45').click(function() { $('#right').removeClass(); $('#right').addClass('animation45'); return false; }); $('#css46').click(function() { $('#right').removeClass(); $('#right').addClass('animation46'); return false; }); $('#css47').click(function() { $('#right').removeClass(); $('#right').addClass('animation47'); return false; }); $('#css48').click(function() { $('#right').removeClass(); $('#right').addClass('animation48'); return false; }); $('#css49').click(function() { $('#right').removeClass(); $('#right').addClass('animation49'); return false; }); $('#css50').click(function() { $('#right').removeClass(); $('#right').addClass('animation50'); return false; }); $('#css51').click(function() { $('#right').removeClass(); $('#right').addClass('animation51'); return false; }); $('#css52').click(function() { $('#right').removeClass(); $('#right').addClass('slideDown'); return false; }); $('#css53').click(function() { $('#right').removeClass(); $('#right').addClass('slideUp'); return false; }); $('#css54').click(function() { $('#right').removeClass(); $('#right').addClass('slideLeft'); return false; }); $('#css55').click(function() { $('#right').removeClass(); $('#right').addClass('slideRight'); return false; }); $('#css56').click(function() { $('#right').removeClass(); $('#right').addClass('slideExpandUp'); return false; }); $('#css57').click(function() { $('#right').removeClass(); $('#right').addClass('expandUp'); return false; }); $('#css58').click(function() { $('#right').removeClass(); $('#right').addClass('bounce'); return false; }); $('#css59').click(function() { $('#right').removeClass(); $('#right').addClass('pulse'); return false; }); $('#css60').click(function() { $('#right').removeClass(); $('#right').addClass('bigEntrance'); return false; }); $('#css61').click(function() { $('#right').removeClass(); $('#right').addClass('expandOpen'); return false; }); $('#css62').click(function() { $('#right').removeClass(); $('#right').addClass('fadeIn'); return false; }); $('#css63').click(function() { $('#right').removeClass(); $('#right').addClass('hatch'); return false; }); $('#css64').click(function() { $('#right').removeClass(); $('#right').addClass('floating'); return false; }); $('#css65').click(function() { $('#right').removeClass(); $('#right').addClass('tossing'); return false; }); $('#css66').click(function() { $('#right').removeClass(); $('#right').addClass('pullUp'); return false; }); $('#css67').click(function() { $('#right').removeClass(); $('#right').addClass('pullDown'); return false; }); $('#css68').click(function() { $('#right').removeClass(); $('#right').addClass('stretchLeft'); return false; }); $('#css69').click(function() { $('#right').removeClass(); $('#right').addClass('stretchRight'); return false; }); }) </script> </head> <body> <div class="left"> <ul class="nav"> <h2>CSS3图片动画展示</h2> <a href="http://www.100sucai.com/css3/1.html" target="_blank">100素材网 CSS3动画</a> <br /><br /><br /> <li><a id="css1" href="#" href="#" title="闪光灯">1、闪光灯</a></li> <li><a id="css2" href="#" title="弹起">2、弹起</a></li> <li><a id="css3" href="#" title="摇摆">3、摇摆</a></li> <li><a id="css4" href="#" title="秋千">4、秋千</a></li> <li><a id="css5" href="#" title="swing">5、swing</a></li> <li><a id="css6" href="#" title="疯狂摆动">6、疯狂摆动</a></li> <li><a id="css7" href="#" title="脉冲">7、脉冲</a></li> <li><a id="css8" href="#" title="翻转">8、翻转</a></li> <li><a id="css9" href="#" title="X轴淡入">9、X轴淡入</a></li> <li><a id="css10" href="#" title="X轴淡出">10、X轴淡出</a></li> <li><a id="css11" href="#" title="Y轴淡入">11、Y轴淡入</a></li> <li><a id="css12" href="#" title="Y轴淡出">12、Y轴淡出</a></li> <li><a id="css13" href="#" title="下方淡入">13、下方淡入</a></li> <li><a id="css14" href="#" title="上方淡入">14、上方淡入</a></li> <li><a id="css15" href="#" title="左边淡入">15、左边淡入</a></li> <li><a id="css16" href="#" title="右边淡入">16、右边淡入</a></li> <li><a id="css17" href="#" title="底部淡入">17、底部淡入</a></li> <li><a id="css18" href="#" title="顶部淡入">18、顶部淡入</a></li> <li><a id="css19" href="#" title="页面左边淡入">19、页面左边淡入</a></li> <li><a id="css20" href="#" title="页面右边淡入">20、页面右边淡入</a></li> <li><a id="css21" href="#" title="向上淡出">21、向上淡出</a></li> <li><a id="css22" href="#" title="向下淡出">22、向下淡出</a></li> <li><a id="css23" href="#" title="向左淡出">23、向左淡出</a></li> <li><a id="css24" href="#" title="向右淡出">24、向右淡出</a></li> <li><a id="css25" href="#" title="顶部淡出">25、顶部淡出</a></li> <li><a id="css26" href="#" title="底部淡出">26、底部淡出</a></li> <li><a id="css27" href="#" title="页面左边淡出">27、页面左边淡出</a></li> <li><a id="css28" href="#" title="页面右边淡出">28、页面右边淡出</a></li> <li><a id="css29" href="#" title="bounceIn">29、bounceIn</a></li> <li><a id="css30" href="#" title="bounceInDown">30、bounceInDown</a></li> <li><a id="css31" href="#" title="bounceInUp">31、bounceInUp</a></li> <li><a id="css32" href="#" title="bounceInLeft">32、bounceInLeft</a></li> <li><a id="css33" href="#" title="bounceInRight">33、bounceInRight</a></li> <li><a id="css34" href="#" title="bounceOut">34、bounceOut</a></li> <li><a id="css35" href="#" title="bounceOutDown">35、bounceOutDown</a></li> <li><a id="css36" href="#" title="bounceOutUp">36、bounceOutUp</a></li> <li><a id="css37" href="#" title="bounceOutLeft">37、bounceOutLeft</a></li> <li><a id="css38" href="#" title="bounceOutRight">38、bounceOutRight</a></li> <li><a id="css39" href="#" title="rotateIn">39、rotateIn</a></li> <li><a id="css40" href="#" title="rotateInDownLeft">40、rotateInDownLeft</a></li> <li><a id="css41" href="#" title="rotateInDownRight">41、rotateInDownRight</a></li> <li><a id="css42" href="#" title="rotateInUpLeft">42、rotateInUpLeft</a></li> <li><a id="css43" href="#" title="rotateInUpRight">43、rotateInUpRight</a></li> <li><a id="css44" href="#" title="rotateOut">44、rotateOut</a></li> <li><a id="css45" href="#" title="rotateOutDownLeft">45、rotateOutDownLeft</a></li> <li><a id="css46" href="#" title="rotateOutDownRight">46、rotateOutDownRight</a></li> <li><a id="css47" href="#" title="rotateOutUpLeft">47、rotateOutUpLeft</a></li> <li><a id="css48" href="#" title="rotateOutUpRight">48、rotateOutUpRight</a></li> <li><a id="css49" href="#" title="hinge">49、hinge</a></li> <li><a id="css50" href="#" title="rollIn">50、rollIn</a></li> <li><a id="css51" href="#" title="rollOut">51、rollOut</a></li> <li><a id="css52" href="#" title="slideDown">52、slideDown</a></li> <li><a id="css53" href="#" title="slideUp">53、slideUp</a></li> <li><a id="css54" href="#" title="slideLeft">54、slideLeft</a></li> <li><a id="css55" href="#" title="slideRight">55、slideRight</a></li> <li><a id="css56" href="#" title="slideExpandUp">56、slideExpandUp</a></li> <li><a id="css57" href="#" title="expandUp">57、expandUp</a></li> <li><a id="css58" href="#" title="bounce">58、bounce</a></li> <li><a id="css59" href="#" title="pulse">59、pulse</a></li> <li><a id="css60" href="#" title="bigEntrance">60、bigEntrance</a></li> <li><a id="css61" href="#" title="expandOpen">61、expandOpen</a></li> <li><a id="css62" href="#" title="fadeIn">62、fadeIn</a></li> <li><a id="css63" href="#" title="hatch">63、hatch</a></li> <li><a id="css64" href="#" title="floating">64、floating</a></li> <li><a id="css65" href="#" title="tossing">65、tossing</a></li> <li><a id="css66" href="#" title="pullUp">66、pullUp</a></li> <li><a id="css67" href="#" title="pullDown">67、pullDown</a></li> <li><a id="css68" href="#" title="stretchLeft">68、stretchLeft</a></li> <li><a id="css69" href="#" title="stretchRight">69、stretchRight</a></li> </ul> </div> <div id="right"></div> </body> </html> 我整理的： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; } html, body { width: 100%; } #div1 { width: 1000px; height: 500px; margin: 0 auto; border: 1px solid green; position: relative; } #div1 div { width: 100px; height: 100px; background-color: red; } #div1 div.div1 { position: absolute; top: 200px; left: 200px; } #div1 div.div2 { position: absolute; bottom: 200px; right: 200px; } /****************************************************/ #div1 div.div1 { animation: linkWord 12s ease-out 0s normal; } @keyframes linkWord { from { top: 0px; left: 0px; opacity: 0; } to { opacity: 1; } } /****************************************************/ #div1 div.div2 { animation: textAni 12s ease-out 0s normal; } @keyframes textAni { from { right: 0px; bottom: 0; opacity: 0; } to { opacity: 1; } } /****************************************************/ #div2 { width: 1000px; height: 800px; margin: 0 auto; border: 1px solid blue; } #div2 div { width: 100px; height: 100px; background-color: red; float: left; margin: 70px; } /****************************************************/ #div2 div.div3 { /*infinite 规定动画应该无限次播放。/* /*alternate 动画应该轮流反向播放。*/ animation: imgJump 1s ease-out infinite 0s alternate; } @keyframes imgJump { to { transform: scale(1.45); } } /****************************************************/ #div2 div.div4 { animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; } @keyframes fadeIn { 0% { transform: scale(0); opacity: 0.0; } 60% { transform: scale(1.1); } 80% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /****************************************************/ #div2 div.div5 { animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; } @keyframes slideLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } /****************************************************/ #div2 div.div6 { animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; } @keyframes slideRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } /****************************************************/ #div2 div.div7 { animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; } @keyframes slideUp { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } /****************************************************/ #div2 div.div8 { animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; } @keyframes slideDown { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } /****************************************************/ #div2 div.div9 { animation-name: rotateIn1; -webkit-animation-name: rotateIn1; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; } @keyframes rotateIn1 { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } /****************************************************/ #div2 div.div10 { animation-name: zoomIn; -webkit-animation-name: zoomIn; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } /****************************************************/ #div2 div.div11 { animation-name: heartBeat; -webkit-animation-name: heartBeat; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes heartBeat { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } /****************************************************/ #div2 div.div12 { animation-name: rollInLeft; -webkit-animation-name: rollInLeft; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; } @keyframes rollInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } /****************************************************/ #div2 div.div13 { animation-name: rollInRight; -webkit-animation-name: rollInRight; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; } @keyframes rollInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } /****************************************************/ #div2 div.div14 { animation: shake 1s .2s ease both; } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); } } </style> </head> <body> <div id="div1"> <div class="div1">div1</div> <div class="div2">div2</div> </div> <div id="div2"> <div class="div3">div3</div> <div class="div4">div4</div> <div class="div5">div5</div> <div class="div6">div6</div> <div class="div7">div7</div> <div class="div8">div8</div> <div class="div9">div9</div> <div class="div10">div10</div> <div class="div11">div11</div> <div class="div12">div12</div> <div class="div13">div13</div> <div class="div14">div14</div> </div> </body> </html> jQuery之动画效果 1、show()显示效果　　语法：show(speed,callback)　　Number/String,Function　speend为动画执行时间，单位为毫秒。也可以为slow","normal","fast"　callback可选,为当动画完成时执行的函数。　　　　 show(speed,[easing],callback)　　Number/String　　easing默认是swing,可选linear; 　　　　　$("#div1").show(3000,function(){ alert("动画显示完成!"); });　　　　　　 2、hide()隐藏效果　　语法:hide(speed,callback)　　Number/String,Function 　　　　 hide(speed,easing,callback)　　Number/String 　　　　 $("#div1").hide(3000,function(){ alert("动画隐藏完成") }); 3、toggle()隐藏显示自动切换，当目前为显示则隐藏，当目前为隐藏则显示　　语法：toggle(speed,callback)　　Number/String,Function 　　　　 toggle(speed,callback)　　Number/String,String,Function 　　　　 $("#div1").toggle(3000,function(){ alert("动画效果切换完成") }); 　　　　　 4、slideDown()向下显示，slow()是水平与垂直方向同时展开，而slideDown是仅仅在垂直方向向下展开　语法:slideDown(speed,callback)　　Number/String,Function 　　　　 slideDown(speed,[easing],callback)　　Number/String,Function 　　　　 $("#div1").slideDown(3000,function(){ alert("向下展开显示成功!"); }); 5、slideUp()向上隐藏,　　hide()是水平与垂直两个方向的，而slideUp()仅仅是垂直方向向上收起隐藏　　语法:slideUp(speed,callback)　　Number/String,Function 　　　　 slideUp(speed,[easing],callback)　　Number/String,String,Function 　　　　 $("#div1").slideUp(3000,function(){ alert("向上收起隐藏成功!"); }) 6、slideToggle垂直方向上切换,toggle是水平与垂直两个方向上的，而slideToggle是仅仅垂直方向的。　　语法:slideToggle(speed,callback)　　Number/String,Function 　　　　 slideToggle(speed,[easing],callback)　　Number/String,String,Function 　　　　 $("#div1").slideToggle(3000,function(){ alert("水平方向上切换成功"); }); 　　　　 7、fadeIn() 以改变透明度来显示　　语法：fadeIn(speed,callback)　　　　Number/String,Function 　　　　 fadeIn(speed,[easing],callback)　　Number/String,Function 　　　　　$("#div1").FadeIn(3000,function(){ alert("淡入显示成功!"); }); 8、fadeOut() 以改变透明度来隐藏　　语法：fadeOut(speed,callback)　　 Number/String,Function 　　　　 fadeOut(speed,[easing],callcack)　　 Number/String,String,Function 　　　　 $("#div1").fadeOut(3000,function(){ alert("淡出隐藏成功!"); }); 9、fadeToggle() 以改变透明度来切换显示隐藏状态　　语法: fadeToggle(speed,callback)　　Number/String,Function 　　　　 fadeToggle(speed,[easing],callback)　　　　Number/String,Function 　　　　 $("#div1").fadeToggle(3000,function(){ alert("淡入淡出切换成功!"); }); 10、fadeTo() 由指定的时间将透明度改变到指定的透明度　　语法：fadeTo(speed,callback)　　　　Number/String,Function 　　　　　fadeTo([speed],opacity,[easing],[fn])　　Number/String,Float,String,Function 　　　　　$("#div1").fadeTo(3000,0.22,function(){ alert("透明度改变成功!"); }); 11、animate() 自定义动画，一般来说数字变动都可以用于动画。　　语法：animate(params,speed,easing,callback);　　样式参数，时间，可选择，函数　　　　　$("#div1").animate({ width:300px,height,300px },3000); 　　　　　其中params要用中括号括起来，可以使用的css样式参数。注意要采用骆驼法则，如font-size要写成fontSize。颜色渐变不支持。 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight maxWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent 12、stop() 停止正在执行动画　　 stop([clearQueue],[gotoEnd]);　　两个参数均为布尔值，第一个表示，是否停止动画执行、第二个表示，如果停止，是否立即变为执行完成的状态，如果设置为否，则停留在执行一半的状态。　　$("#div1").hide(5000)　　//此动画正在执行　　$("#div1").stop();　　　　//上一行代码指定的动画停止在一半状态　　$("#div1").stop(true,true);　　//停止当前动画，同时动画切换到完成执行状态。 13、delay() 延迟执行动画　　当一个动画stop()了之后还能够用delay()来延迟执行。从停止位置继续执行。当然用原来的方法继续执行也不可，不过没有延时效果。　　delay(duration,[queueName])　　设置一个延迟值来执行动画　　Integer,String 　　$("#div1").delay(3000).hide(3000);　　//表示在3000毫秒后执行hide(3000); 14、jQuery.fx.off　　//该属性只是是否关闭当前页面上的动画,关闭动画之后，没有动画效果，所有设置了执行时间的动画会瞬间完成。注意此属性出现的位置。出现的位置不同影响的范围也不同。　　$(function(){ 　　　　jQuery.fx.off = true;　　//属性在事件外面，对页面加载后执行的所有动画有效　　　　$("#div1").click(function(){　　//属性如果写在这里，仅仅对当前点击事件无效，不影响其他事件的动画　　　　　　$("#div1").hide(3000);　　//注意由于jQuery.fx.off设置为了true,因此3000毫秒失效，相当于hide(); 　　　　 }); 　　}) 15、jQuery.fx.interval　　//该属性设置动画的帧速，单位是毫秒，如果设置的时间越小，就越平滑。，属性出现的位置同样有影响范围　　 $(function(){ 　　　　jQuery.fx.interval = 1000; 　　　　$("#div1").click(function(){　　　　　　　　$("#div1").hide(3000);　　　//jQuery.fx.interval设置为1000，也就是1秒钟，改变一次效果。　　　　　 }); 　　 })

发表了文章 2016-03-18

解密Animate.css之CSS3动画实现方式大全源码（6星级）

摇摆效果：http://www.100sucai.com/css3/3.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>摇摆</title> <style> .div { width:300px; height:200px; margin:100px auto; background:url(http://www.100sucai.com/img/demo/1373.png) } #animation { -webkit-animation:shake 1s .2s ease both; -moz-animation:shake 1s .2s ease both; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform:translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform:translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform:translateX(10px); } } @-moz-keyframes shake { 0%, 100% { -moz-transform:translateX(0); } 10%, 30%, 50%, 70%, 90% { -moz-transform:translateX(-10px); } 20%, 40%, 60%, 80% { -moz-transform:translateX(10px); } } </style> </head> <body> <div id="animation" class="div"></div> </body> </html>

发表了文章 2016-03-18

12个实用的 Javascript 奇淫技巧

取整同时转成数值型： ‘10.567890’|0 结果: 10 ‘10.567890’^0 结果: 10 -2.23456789|0 结果: -2 ~~-2.23456789 结果: -2 日期转数值： var d = +new Date(); //1295698416792 3. 类数组对象转数组： var arr = [].slice.call(arguments) 4. 漂亮的随机码： Math.random().toString(16).substring(2); //14位 Math.random().toString(36).substring(2); //11位 5. 合并数组： var a = [1,2,3]; var b = [4,5,6]; Array.prototype.push.apply(a, b); uneval(a); //[1,2,3,4,5,6] 6. 用0补全位数： function prefixInteger(num, length) { return (num / Math.pow(10, length)).toFixed(length).substr(2); } 7. 交换值： a= [b, b=a][0]; 8. 将一个数组插入另一个数组的指定位置： var a = [1,2,3,7,8,9]; var b = [4,5,6]; var insertIndex = 3; a.splice.apply(a, Array.concat(insertIndex, 0, b)); // a: 1,2,3,4,5,6,7,8,9 9. 删除数组元素： var a = [1,2,3,4,5]; a.splice(3,1); 10. 快速取数组最大和最小值 Math.max.apply(Math, [1,2,3]) //3 Math.min.apply(Math, [1,2,3]) //1 (出自http://ejohn.org/blog/fast-javascript-maxmin/) 条件判断： var a = b && 1; 相当于 if (b) { a = 1 } var a = b || 1; 相当于 if (b) { a = b; } else { a = 1; } 12. 判断IE: var ie = /@cc_on !@/false; 还有吗？欢迎回应

发表了文章 2016-03-17

转盘抽奖

<!DOCTYPE html>  <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> </head> <body> <style> .box{ width:400px; height:400px; top:50%; left:50%; margin-left:-200px; margin-top:-200px; position:absolute; background:#C4C4C4; border-radius: 200px; box-shadow:1px 1px 20px 15px #C5BFBF; font-family:'黑体'; font-weight:bold; font-size:14px;} .child{ width:198px; height:198px; float:left; border:1px #193EB3 solid; background:#DAEB33; line-height:198px; text-align:center;} .list1 { border-radius: 199px 0px 0px 0px; border-left:1px #eee solid;border-top:1px #eee solid; line-height:230px;} .list2 { border-radius: 0px 199px 0px 0px; border-right:1px #eee solid;border-top:1px #eee solid; line-height:230px;} .list4 { border-radius: 0px 0px 0px 199px; border-left:1px #eee solid;border-bottom:1px #eee solid; line-height:150px;} .list3 { border-radius: 0px 0px 199px 0px ; border-right:1px #eee solid;border-bottom:1px #eee solid; line-height:150px;} .button{ position:absolute; width:80px; height:80px; left:50%; top:50%; margin-left:-40px; font-size:18px; border:none; font-weight:bold; margin-top:-40px; border-radius:40px; background:#2BC73D; line-height:80px; text-align:center; cursor:pointer;} .button:hover{box-shadow:1px 1px 20px 15px #C5BFBF;background:red;} </style>  <div class="box grad"> <div class="list"> <div class="child list1" style="background: rgb(218, 235, 51);">一等奖：空气清新器</div> <div class="child list2" style="background: red;">二等奖：精美四件套</div> <div class="child list4" style="background: rgb(218, 235, 51);">鼓励奖：肴肉蘸醋</div> <div class="child list3" style="background: rgb(218, 235, 51);">三等奖：多功能足浴盆</div> </div> <button class="button" style="background: rgb(43, 199, 61);">抽奖</button> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script> <script> $(function() { // 中奖概率数组 var array1 = new Array(4,4,2,4,4,3,4,1,4); var cishu = 40;// 默认先转40次 var yushu = 0; // 除4余数 var miao = 100;// 初始转速 var num = 0; // 随机数 var count = 0; // 计数器 $(".button").click(function(){ $(this).attr({"disabled":"disabled"}); $(this).css('background','#c4c4c4'); yushu = 0; // 除4余数 miao = 100;// 初始转速 var len = array1.length; var irandom = parseInt(Math.random()*len+1); num = cishu + array1[irandom-1];// 取1-30的随机数 count = 0; setTimeout(zhuandong, 300); //if(array1[irandom-1] != 4) { var newarry = new Array(); var bremove = false; for(var i=0;i<array1.length; i++) { if( (array1[i]!=array1[irandom-1]) || bremove) newarry.push(array1[i]); if(array1[i]==array1[irandom-1]) bremove = true; } array1 = newarry; } }); function zhuandong(){ count++; yushu = count%4; if(yushu==0) { yushu = 4; if(count>30) { miao = miao<250?miao+50:miao;} else { miao = miao>100?miao-50:miao;} } $(".child").css('background','#DAEB33'); $(".list"+yushu).css('background','red'); num--; if(num<=0) { setTimeout(function(){ alert("恭喜您喜中："+$(".list"+yushu).html()); $(".button").removeAttr("disabled"); $(".button").css('background','#2BC73D'); }, 500); } else{ setTimeout(zhuandong, miao); } } }); </script> </body></html>

发表了文章 2016-03-17

移动端HTML5实现打电话，发短信，发邮件，文件上传

<a href="tel:400-888-6633">拨打电话<a> <a href="sms:19956321564">发送短信<a> <a href="mailto:mail@mail.com">发送邮件<a> 兄弟文章：http://blog.csdn.net/libin_1/article/details/50433863 PC端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目里面需要做图片上传的功能，既然H5已经有相关的接口且兼容性良好，当然优先考虑用H5来实现。用的技术主要是： ajax FileReader FormData HTML结构： XML/HTML Code复制内容到剪贴板 <div class="camera-area"> <form enctype="multipart/form-data" method="post"> <input type="file" name="fileToUpload" class="fileToUpload" accept="image/*" capture="camera"/> <div class="upload-progress"><span></span></div> </form> <div class="thumb"></div> </div> 已经封装好的upload.js，依赖zepto JavaScript Code复制内容到剪贴板 (function($) { $.extend($.fn, { fileUpload: function(opts) { this.each(function() { var $self = $(this); var doms = { "fileToUpload": $self.find(".fileToUpload"), "thumb": $self.find(".thumb"), "progress": $self.find(".upload-progress") }; var funs = { //选择文件，获取文件大小，也可以在这里获取文件格式，限制用户上传非要求格式的文件 "fileSelected": function() { var files = (doms.fileToUpload)[0].files; var count = files.length; for (var index = 0; index < count; index++) { var file = files[index]; var fileSize = 0; if (file.size > 1024 * 1024) fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB'; else fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB'; } funs.uploadFile(); }, //异步上传文件 uploadFile: function() { var fd = new FormData();//创建表单数据对象 var files = (doms.fileToUpload)[0].files; var count = files.length; for (var index = 0; index < count; index++) { var file = files[index]; fd.append(opts.file, file);//将文件添加到表单数据中 funs.previewImage(file);//上传前预览图片，也可以通过其他方法预览txt } var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", funs.uploadProgress, false);//监听上传进度 xhr.addEventListener("load", funs.uploadComplete, false); xhr.addEventListener("error", opts.uploadFailed, false); xhr.open("POST", opts.url); xhr.send(fd); }, //文件预览 previewImage: function(file) { var gallery = doms.thumb; var img = document.createElement("img"); img.file = file; doms.thumb.html(img); // 使用FileReader方法显示图片内容 var reader = new FileReader(); reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); }, uploadProgress: function(evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); doms.progress.html(percentComplete.toString() + '%'); } }, "uploadComplete": function(evt) { alert(evt.target.responseText) } }; doms.fileToUpload.on("change", function() { doms.progress.find("span").width("0"); funs.fileSelected(); }); }); } }); })(Zepto); 调用方法： JavaScript Code复制内容到剪贴板 $(".camera-area").fileUpload({ "url": "savetofile.php", "file": "myFile" }); PHP部分： PHP Code复制内容到剪贴板 <?php if (isset($_FILES['myFile'])) { // Example: writeLog($_FILES); move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']); echo 'successful'; } function writeLog($log){ if(is_array($log) || is_object($log)){ $log = json_encode($log); } $log = $log."\r\n"; file_put_contents('log.log', $log,FILE_APPEND); } ?> 以上就是本文的全部内容，希望对大家的学习有所帮助。

发表了文章 2016-03-16

深入理解RGBA、Math ceil()、floor()、round()、toFixed()随机数，取整方法

Math.ceil() 功能：对一个数进行上取整。语法：Math.ceil(x) 参数： x：一个数值。返回值：返回大于或等于x，并且与之最接近的整数。注：如果x是正数，则把小数“入”；如果x是负数，则把小数“舍”。例： <script type="text/javascript"> document.write( Math.ceil(1.2)+", "+Math.ceil(1.8)+", "+Math.ceil(-1.2)+", "+Math.ceil(-1.8) ); </script> 输出结果为： document.write( Math.ceil(1.2)+", "+Math.ceil(1.8)+", "+Math.ceil(-1.2)+", "+Math.ceil(-1.8) ); 2, 2, -1, -1 Math.floor() 功能：对一个数进行下取整。语法：Math.floor(x) 参数： x：一个数值。返回值：返回小于或等于x，并且与之最接近的整数。注：如果x是正数，则把小数“舍”；如果x是负数，则把小数“入”。例： <script type="text/javascript"> document.write( Math.floor(1.2)+", "+Math.floor(1.8)+", "+Math.floor(-1.2)+", "+Math.floor(-1.8) ); </script> 输出结果为： document.write( Math.floor(1.2)+", "+Math.floor(1.8)+", "+Math.floor(-1.2)+", "+Math.floor(-1.8) ); 1, 1, -2, -2 Math.round() 功能：四舍五入取整。语法：Math.round(x) 参数： x：一个数值。返回值：与x最接近的整数。例： <script type="text/javascript"> document.write( Math.round(1.2)+", "+Math.round(1.8)+", "+Math.round(-1.2)+", "+Math.round(-1.8) ); </script> 输出结果为： document.write( Math.round(1.2)+", "+Math.round(1.8)+", "+Math.round(-1.2)+", "+Math.round(-1.8) ); 1, 2, -1, -2 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script> <style type="text/css"> .no1 { width: 200px; height: 200px; border: 1px solid red; margin-right: 10px; display: block; float: left; text-align: center; } .num { clear: both; } </style> <script type="text/javascript"> $(function() { $('.num').text("RGBA(0,0,0,0)"); $(".no1").click(function() { alert(1); }); $(".no1").click(function() { alert(2); }); $(".no1").click(function() { alert(3); }); var setint = setInterval(function() { var r = Math.floor(Math.random() * 255); var g = Math.floor(Math.random() * 255); var b = Math.floor(Math.random() * 255); var a = Math.random().toFixed(2); $('.num').text("RGBA(" + r + "," + g + "," + b + "," + a + ")"); $(".no1").css("background", "rgba(" + r + "," + g + "," + b + "," + a + ")"); }, 500); }) </script> </head> <body> <span class="no1">aaa</span> <span class="no1">bbb</span> <div class="num"></div> </body> </html>

发表了文章 2016-03-16

jquery省市区插件

下载地址：http://jasonlong-7.github.io/jquery-city/ 1.动画效果使用的是animate.css 2.支持选择和键盘输入（中英文输入） 3.服务端返回的json格式复制代码 { "provinces": [ { "code": "1000", "name": "北京" }], "citys": [ { "code": "100001", "name": "北京", "fullPY": "BEIJING", "firstPY": "BJ", "provinceCode": "1000", "provinceName": "北京", "hotCity": true }], "areas": [ { "code": "10000101", "name": " 东城区", "cityId": "100001", "fullPY": " DONGCHENGOU", "firstPY": " DCO", "provinceCode": "1000", "provinceName": "北京", "cityCode": "100001", "cityName": "北京" }] } 复制代码 4.如何使用？　　1).在里面引用下面css资源 <link href="../css/jquery.city.css" rel="stylesheet" /> <link href="../css/animate.min.css" rel="stylesheet" />  　　2).在里引用下面的js资源 <script src="../js/jquery-1.10.2.js"></script> <script src="../js/jquery.city.js"></script> 　　3).使用示例复制代码 1 <script> 2 $(function () { 3 $('#txt_city').jcity({ 4 urlOrData: '/js/citydata.json', 5 animate: { showClass: 'animated flipInX', hideClass: 'animated flipOutX' }, // 需要第一步引用的animate.min.css文件，也可以自己定义动画 6 onChoice: function (data) { 7 console.log(data); 8 } 9 }); 10 }); 11 </script> 复制代码转载请标注原文地址：http://www.cnblogs.com/JasonLong/p/5278955.html

发表了文章 2016-03-15

轻量级jQuery带底栏轮播(焦点图)插件slideBox

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery图片轮播(焦点图)插件</title> <link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="js/jquery.slideBox.js" type="text/javascript"></script> <script> jQuery(function($){ $('#demo1').slideBox(); $('#demo2').slideBox({ direction : 'top',//left,top#方向 duration : 0.3,//滚动持续时间，单位：秒 easing : 'linear',//swing,linear//滚动特效 delay : 5,//滚动延迟时间，单位：秒 startIndex : 1//初始焦点顺序 }); $('#demo3').slideBox({ duration : 0.3,//滚动持续时间，单位：秒 easing : 'linear',//swing,linear//滚动特效 delay : 5,//滚动延迟时间，单位：秒 hideClickBar : false,//不自动隐藏点选按键 clickBarRadius : 10 }); $('#demo4').slideBox({ hideBottomBar : true//隐藏底栏 }); }); </script> </head> <body> <h3>一、左右轮播，滚动持续0.6秒，滚动延迟3秒，滚动效果swing，初始焦点第1张，点选按键自动隐藏，按键边框半径（IE8-只方不圆）5px（以上各项为默认设置值）</h3> <div id="demo1" class="slideBox"> <ul class="items"> <li><a href="http://www.jq22.com/" title="这里是测试标题一"><img src="img/1.jpg"></a></li> <li><a href="http://www.jq22.com/" title="这里是测试标题二"><img src="img/2.jpg"></a></li> <li><a href="http://www.jq22.com/" title="这里是测试标题三"><img src="img/3.jpg"></a></li> <li><a href="http://www.jq22.com/" title="这里是测试标题四"><img src="img/4.jpg"></a></li> <li><a href="http://www.jq22.com/" title="这里是测试标题五"><img src="img/5.jpg"></a></li> </ul> </div> <h3>二、上下轮播，滚动持续0.3秒，滚动延迟5秒，滚动效果linear，初始焦点第2张，点选按键自动隐藏</h3> <div id="demo2" class="slideBox"> <ul class="items"> <li><a href="http://www.jq22.com/" title="这里是测试标题一"><img src="img/1.jpg"></a></li> <li><a href="http://www.jq22.com/" title="这里是测试标题二"><img src="img/2.jpg"></a></li> <li><a href="http://www.jq22.com/" title="这里是测试标题三"><img src="img/3.jpg"></a></li> <li><a href="http://www.jq22.com/" title="这里是测试标题四"><img src="img/4.jpg"></a></li> <li><a href="http://www.jq22.com/" title="这里是测试标题五"><img src="img/5.jpg"></a></li> </ul> </div> <h3>三、左右轮播，滚动持续0.3秒，滚动延迟5秒，滚动效果linear，初始焦点第1张，点选按键不隐藏，按键边框半径10px（圆形）</h3> <div id="demo3" class="slideBox"> <ul class="items"> <li><a href="http://www.jq22.com/" title="这里是测试标题一"><img src="img/1.jpg"></a></li> <li><a href="http://www.jq22.com/" title="这里是测试标题二"><img src="img/2.jpg"></a></li> <li><a href="http://www.jq22.com/" title="这里是测试标题三"><img src="img/3.jpg"></a></li> <li><a href="http://www.jq22.com/" title="这里是测试标题四"><img src="img/4.jpg"></a></li> <li><a href="http://www.jq22.com/" title="这里是测试标题五"><img src="img/5.jpg"></a></li> </ul> </div> <h3>四、隐藏底栏</h3> <div id="demo4" class="slideBox"> <ul class="items"> <li><a href="http://www.jq22.com/" title="这里是测试标题一"><img src="img/1.jpg"></a></li> <li><a href="http://www.jq22.com/" title="这里是测试标题二"><img src="img/2.jpg"></a></li> <li><a href="http://www.jq22.com/" title="这里是测试标题三"><img src="img/3.jpg"></a></li> <li><a href="http://www.jq22.com/" title="这里是测试标题四"><img src="img/4.jpg"></a></li> <li><a href="http://www.jq22.com/" title="这里是测试标题五"><img src="img/5.jpg"></a></li> </ul> </div>  <script src="http://www.jq22.com/js/jq.js"></script>  </body> </html>

发表了文章 2016-03-15

简单的个人博客日历代码，时钟演示

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="Html日历插件，Html精美日历插件，Jquery多功能日历插件" /> <meta name="description" content="Html日历插件，多功能-彭亚欧个人博客代码演示中心" /> <title>Html日历插件</title> <style type="text/css"> body { background-color: #efefef; } #CalendarMain { width: 300px; height: 300px; border: 1px solid #ccc; margin: 0 auto; margin-top: 100px; } #title { width: 100%; height: 30px; background-color: #b9121b; } .selectBtn { font-weight: 900; font-size: 15px; color: #fff; cursor: pointer; text-decoration: none; padding: 7px 10px 6px 10px; } .selectBtn:hover { background-color: #1d953f; } .selectYear { float: left; margin-left: 50px; position: absolute; } .selectMonth { float: left; margin-left: 120px; position: absolute; } .month { float: left; position: absolute; } .nextMonth { float: right; } .currentDay { float: right; } #context { background-color: #fff; width: 100%; } .week { width: 100%; height: 30px; } .week>h3 { float: left; color: #808080; text-align: center; margin: 0; padding: 0; margin-top: 5px; font-size: 16px; } .dayItem { float: left; } .lastItem { color: #d1c7b7 !important; } .item { color: #333; float: left; text-align: center; cursor: pointer; margin: 0; font-family: "微软雅黑"; font-size: 13px; } .item:hover { color: #b9121b; } .currentItem>a { background-color: #b9121b; width: 25px; line-height: 25px; float: left; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: #fff; } #foots { width: 100%; height: 35px; background-color: #fff; border-top: 1px solid #ccc; margin-top: -1px; } #footNow { float: left; margin: 6px 0 0 5px; color: #009ad6; font-family: "微软雅黑"; } #Container { overflow: hidden; float: left; } #center { width: 100%; overflow: hidden; } #centerMain { width: 300%; margin-left: -100%; } #selectYearDiv { float: left; background-color: #fff; } #selectYearDiv>div { float: left; text-align: center; font-family: "微软雅黑"; font-size: 16px; border: 1px solid #ccc; margin-left: -1px; margin-top: -1px; cursor: pointer; color: #909090; } .currentYearSd, .currentMontSd { color: #ff4400 !important; } #selectMonthDiv { float: left; background-color: #fff; } #selectMonthDiv>div { color: #909090; float: left; text-align: center; font-family: "微软雅黑"; font-size: 16px; border: 1px solid #ccc; margin-left: -1px; margin-top: -1px; cursor: pointer; } #selectYearDiv>div:hover, #selectMonthDiv>div:hover { background-color: #efefef; } #centerCalendarMain { float: left; } </style> </head> <body> <div id="Demo"> <div id="CalendarMain"> <div id="title"> <a class="selectBtn month" href="javascript:" onclick="CalendarHandler.CalculateLastMonthDays();"><</a><a class="selectBtn selectYear" href="javascript:" onClick="CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart);">2014年</a><a class="selectBtn selectMonth" onClick="CalendarHandler.CreateSelectMonth()">6月</a> <a class="selectBtn nextMonth" href="javascript:" onClick="CalendarHandler.CalculateNextMonthDays();">></a><a class="selectBtn currentDay" href="javascript:" onClick="CalendarHandler.CreateCurrentCalendar(0,0,0);">今天</a></div> <div id="context"> <div class="week"> <h3> 一 </h3> <h3> 二 </h3> <h3> 三 </h3> <h3> 四 </h3> <h3> 五 </h3> <h3> 六 </h3> <h3> 日 </h3> </div> <div id="center"> <div id="centerMain"> <div id="selectYearDiv"></div> <div id="centerCalendarMain"> <div id="Container"></div> </div> <div id="selectMonthDiv"></div> </div> </div> <div id="foots"><a id="footNow">19:14:34</a></div> </div> </div> </body> <script type="text/javascript" src="http://www.pengyaou.com/jquery-1.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) { CalendarHandler.initialize(); }); var CalendarHandler = { currentYear: 0, currentMonth: 0, isRunning: false, showYearStart:2009, tag:0, initialize: function() { $calendarItem = this.CreateCalendar(0, 0, 0); $("#Container").append($calendarItem); $("#context").css("height", $("#CalendarMain").height() - 65 + "px"); $("#center").css("height", $("#context").height() - 30 + "px"); $("#selectYearDiv").css("height", $("#context").height() - 30 + "px").css("width", $("#context").width() + "px"); $("#selectMonthDiv").css("height", $("#context").height() - 30 + "px").css("width", $("#context").width() + "px"); $("#centerCalendarMain").css("height", $("#context").height() - 30 + "px").css("width", $("#context").width() + "px"); $calendarItem.css("height", $("#context").height() - 30 + "px"); //.css("visibility","hidden"); $("#Container").css("height", "0px").css("width", "0px").css("margin-left", $("#context").width() / 2 + "px").css("margin-top", ($("#context").height() - 30) / 2 + "px"); $("#Container").animate({ width: $("#context").width() + "px", height: ($("#context").height() - 30) * 2 + "px", marginLeft: "0px", marginTop: "0px" }, 300, function() { $calendarItem.css("visibility", "visible"); }); $(".dayItem").css("width", $("#context").width() + "px"); var itemPaddintTop = $(".dayItem").height() / 6; $(".item").css({ "width": $(".week").width() / 7 + "px", "line-height": itemPaddintTop + "px", "height": itemPaddintTop + "px" }); $(".currentItem>a").css("margin-left", ($(".item").width() - 25) / 2 + "px").css("margin-top", ($(".item").height() - 25) / 2 + "px"); $(".week>h3").css("width", $(".week").width() / 7 + "px"); this.RunningTime(); }, CreateSelectYear: function(showYearStart) { CalendarHandler.showYearStart=showYearStart; $(".currentDay").show(); $("#selectYearDiv").children().remove(); var yearindex = 0; for (var i = showYearStart; i < showYearStart+12; i++) { yearindex++; if(i==showYearStart){ $last=$("<div>往前</div>"); $("#selectYearDiv").append($last); $last.click(function(){ CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart-10); }); continue; } if(i==showYearStart+11){ $next=$("<div>往后</div>"); $("#selectYearDiv").append($next); $next.click(function(){ CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart+10); }); continue; } if (i == this.currentYear) { $yearItem=$("<div class=\"currentYearSd\" id=\"" + yearindex + "\">" + i + "</div>") } else{ $yearItem=$("<div id=\"" + yearindex + "\">" + i + "</div>"); } $("#selectYearDiv").append($yearItem); $yearItem.click(function(){ $calendarItem=CalendarHandler.CreateCalendar(Number($(this).html()),1,1); $("#Container").append($calendarItem); CalendarHandler.CSS() CalendarHandler.isRunning = true; $($("#Container").find(".dayItem")[0]).animate({ height: "0px" }, 300, function() { $(this).remove(); CalendarHandler.isRunning = false; }); $("#centerMain").animate({ marginLeft: -$("#center").width() + "px" }, 500); }); if (yearindex == 1 || yearindex == 5 || yearindex == 9) $("#selectYearDiv").find("#" + yearindex).css("border-left-color", "#fff"); if (yearindex == 4 || yearindex == 8 || yearindex == 12) $("#selectYearDiv").find("#" + yearindex).css("border-right-color", "#fff"); } $("#selectYearDiv>div").css("width", ($("#center").width() - 4) / 4 + "px").css("line-height", ($("#center").height() - 4) / 3 + "px"); $("#centerMain").animate({ marginLeft: "0px" }, 300); }, CreateSelectMonth: function() { $(".currentDay").show(); $("#selectMonthDiv").children().remove(); for (var i = 1; i < 13; i++) { if (i == this.currentMonth) $monthItem=$("<div class=\"currentMontSd\" id=\"" + i + "\">" + i + "月</div>"); else $monthItem=$("<div id=\"" + i + "\">" + i + "月</div>"); $("#selectMonthDiv").append($monthItem); $monthItem.click(function(){ $calendarItem=CalendarHandler.CreateCalendar(CalendarHandler.currentYear,Number($(this).attr("id")),1); $("#Container").append($calendarItem); CalendarHandler.CSS() CalendarHandler.isRunning = true; $($("#Container").find(".dayItem")[0]).animate({ height: "0px" }, 300, function() { $(this).remove(); CalendarHandler.isRunning = false; }); $("#centerMain").animate({ marginLeft: -$("#center").width() + "px" }, 500); }); if (i == 1 || i == 5 || i == 9) $("#selectMonthDiv").find("#" + i).css("border-left-color", "#fff"); if (i == 4 || i == 8 || i == 12) $("#selectMonthDiv").find("#" + i).css("border-right-color", "#fff"); } $("#selectMonthDiv>div").css("width", ($("#center").width() - 4) / 4 + "px").css("line-height", ($("#center").height() - 4) / 3 + "px"); $("#centerMain").animate({ marginLeft: -$("#center").width() * 2 + "px" }, 300); }, IsRuiYear: function(aDate) { return (0 == aDate % 4 && (aDate % 100 != 0 || aDate % 400 == 0)); }, CalculateWeek: function(y, m, d) { var arr = "7123456".split(""); with(document.all) { var vYear = parseInt(y, 10); var vMonth = parseInt(m, 10); var vDay = parseInt(d, 10); } var week =arr[new Date(y,m-1,vDay).getDay()]; return week; }, CalculateMonthDays: function(m, y) { var mDay = 0; if (m == 0 || m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) { mDay = 31; } else { if (m == 2) { //判断是否为芮年 var isRn = this.IsRuiYear(y); if (isRn == true) { mDay = 29; } else { mDay = 28; } } else { mDay = 30; } } return mDay; }, CreateCalendar: function(y, m, d) { $dayItem = $("<div class=\"dayItem\"></div>"); //获取当前月份的天数 var nowDate = new Date(); if(y==nowDate.getFullYear()&&m==nowDate.getMonth()+1||(y==0&&m==0)) $(".currentDay").hide(); var nowYear = y == 0 ? nowDate.getFullYear() : y; this.currentYear = nowYear; var nowMonth = m == 0 ? nowDate.getMonth() + 1 : m; this.currentMonth = nowMonth; var nowDay = d == 0 ? nowDate.getDate() : d; $(".selectYear").html(nowYear + "年"); $(".selectMonth").html(nowMonth + "月"); var nowDaysNub = this.CalculateMonthDays(nowMonth, nowYear); //获取当月第一天是星期几 //var weekDate = new Date(nowYear+"-"+nowMonth+"-"+1); //alert(weekDate.getDay()); var nowWeek = parseInt(this.CalculateWeek(nowYear, nowMonth, 1)); //nowWeek=weekDate.getDay()==0?7:weekDate.getDay(); //var nowWeek=weekDate.getDay(); //获取上个月的天数 var lastMonthDaysNub = this.CalculateMonthDays((nowMonth - 1), nowYear); if (nowWeek != 0) { //生成上月剩下的日期 for (var i = (lastMonthDaysNub - (nowWeek - 1)); i < lastMonthDaysNub; i++) { $dayItem.append("<div class=\"item lastItem\"><a>" + (i + 1) + "</a></div>"); } } //生成当月的日期 for (var i = 0; i < nowDaysNub; i++) { if (i == (nowDay - 1)) $dayItem.append("<div class=\"item currentItem\"><a>" + (i + 1) + "</a></div>"); else $dayItem.append("<div class=\"item\"><a>" + (i + 1) + "</a></div>"); } //获取总共已经生成的天数 var hasCreateDaysNub = nowWeek + nowDaysNub; //如果小于42，往下个月推算 if (hasCreateDaysNub < 42) { for (var i = 0; i <= (42 - hasCreateDaysNub); i++) { $dayItem.append("<div class=\"item lastItem\"><a>" + (i + 1) + "</a></div>"); } } return $dayItem; }, CSS: function() { var itemPaddintTop = $(".dayItem").height() / 6; $(".item").css({ "width": $(".week").width() / 7 + "px", "line-height": itemPaddintTop + "px", "height": itemPaddintTop + "px" }); $(".currentItem>a").css("margin-left", ($(".item").width() - 25) / 2 + "px").css("margin-top", ($(".item").height() - 25) / 2 + "px"); }, CalculateNextMonthDays: function() { if (this.isRunning == false) { $(".currentDay").show(); var m = this.currentMonth == 12 ? 1 : this.currentMonth + 1; var y = this.currentMonth == 12 ? (this.currentYear + 1) : this.currentYear; var d = 0; var nowDate = new Date(); if (y == nowDate.getFullYear() && m == nowDate.getMonth() + 1) d = nowDate.getDate(); else d = 1; $calendarItem = this.CreateCalendar(y, m, d); $("#Container").append($calendarItem); this.CSS(); this.isRunning = true; $($("#Container").find(".dayItem")[0]).animate({ height: "0px" }, 300, function() { $(this).remove(); CalendarHandler.isRunning = false; }); } }, CalculateLastMonthDays: function() { if (this.isRunning == false) { $(".currentDay").show(); var nowDate = new Date(); var m = this.currentMonth == 1 ? 12 : this.currentMonth - 1; var y = this.currentMonth == 1 ? (this.currentYear - 1) : this.currentYear; var d = 0; if (y == nowDate.getFullYear() && m == nowDate.getMonth() + 1) d = nowDate.getDate(); else d = 1; $calendarItem = this.CreateCalendar(y, m, d); $("#Container").append($calendarItem); var itemPaddintTop = $(".dayItem").height() / 6; this.CSS(); this.isRunning = true; $($("#Container").find(".dayItem")[0]).animate({ height: "0px" }, 300, function() { $(this).remove(); CalendarHandler.isRunning = false; }); } }, CreateCurrentCalendar: function() { if (this.isRunning == false) { $(".currentDay").hide(); $calendarItem = this.CreateCalendar(0, 0, 0); $("#Container").append($calendarItem); this.isRunning = true; $($("#Container").find(".dayItem")[0]).animate({ height: "0px" }, 300, function() { $(this).remove(); CalendarHandler.isRunning = false; }); this.CSS(); $("#centerMain").animate({ marginLeft: -$("#center").width() + "px" }, 500); } }, RunningTime: function() { var mTiming = setInterval(function() { var nowDate = new Date(); var h=nowDate.getHours()<10?"0"+nowDate.getHours():nowDate.getHours(); var m=nowDate.getMinutes()<10?"0"+nowDate.getMinutes():nowDate.getMinutes(); var s=nowDate.getSeconds()<10?"0"+nowDate.getSeconds():nowDate.getSeconds(); var nowTime = h + ":" + m + ":" + s; $("#footNow").html(nowTime); }, 1000); } } </script>  </html> <!doctype html> <html> <head> <meta charset="utf-8"> <link href="fliptimer.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.pengyaou.com/Content/Front/js/jquery-1.8.0.min.js"></script> <title>无标题文档</title> </head> <body> <div class="butns"><a href="index1.html">时钟效果</a><a href="index2.html">倒计时</a><a href="index.html">10秒倒计时（回调函数）</a></div> <div class="dowebok"> <div class="hours"></div> <div class="minutes"></div> <div class="seconds"></div> </div> <script src="jquery.fliptimer.js"></script> <script> $(function(){ var d = new Date(); var myDate = d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + (d.getSeconds() + 10); $('.dowebok').flipTimer({ direction: 'down', date: myDate, callback: function(){ alert('倒计时结束！'); } }); }); </script> </body> </html>

发表了文章 2016-03-15

CSS，Jquery精美进度条和滑动条（滑块）插件

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="Jquery精美进度条和滑动条插件，CSS精美进度条和滑动条插件,Html进度条插件，html滑动条插件"/> <meta name="description" content="CSS3和Jq制作的Html滑动条和进度条插件-彭亚欧个人博客代码演示中心" /> <link rel="stylesheet" href="http://www.pengyaou.com/LegendsZ/Design/DemoShow.css"/> <title>CSS，Jquery精美进度条和滑动条插件</title> <style type="text/css"> #Main { width: 70%; height: 300px; margin: 0 auto; margin-top: 100px; } #scrollBar { width: 80%; height: 10px; background-color: #ccc; margin: 0 auto; margin-top: 50px; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; cursor: pointer; } #scroll_Track { width: 0px; height: 10px; background-color: #ff4400; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } #scroll_Thumb { height: 25px; width: 25px; background-color: #efefef; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; border: 1px solid #ccc; -webkit-box-shadow: 0px 0px 5px #ccc; -moz-box-shadow: 0px 0px 5px #ccc; box-shadow: 0px 0px 5px #ccc; position: absolute; margin-top: -18px; cursor: pointer; } #scroll_Thumb:hover { background-color: #ff4400; border: 1px solid #fff; } #progressBar { width: 80%; height: 10px; background-color: #ccc; margin: 0 auto; margin-top: 50px; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } #progressBar_Track { width: 200px; height: 10px; background-color: #ff4400; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } #beian { text-align: center; float: left; width: 100%; margin-top: 50px } #beian a { color: gray; font: 13px "微软雅黑", Arial, Helvetica, sans-serif; } </style> </head> <body> <div id="Demo"> <div id="Main"> <div id="scrollBar"> <div id="scroll_Track"></div> <div id="scroll_Thumb"></div> </div> <p id="scrollBarTxt" style="text-align:center;"></p> <div id="progressBar"> <div id="progressBar_Track"></div> </div> <p id="progressBarTxt" style="text-align:center;"></p> </div> </div> </body> <script type="text/javascript" src="http://www.pengyaou.com/jquery-1.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) { //设置最大值 ScrollBar.maxValue=100; //初始化 ScrollBar.Initialize(); //设置最大值 ProgressBar.maxValue=100; //设置当前刻度 var index=0; var mProgressTimer=setInterval(function(){ index+=2; ProgressBar.SetValue(index); },100); }); var ScrollBar = { value: 20, maxValue: 100, step: 1, currentX: 0, Initialize: function() { if (this.value > this.maxValue) { alert("给定当前值大于了最大值"); return; } this.GetValue(); $("#scroll_Track").css("width", this.currentX + 2 + "px"); $("#scroll_Thumb").css("margin-left", this.currentX + "px"); this.Value(); $("#scrollBarTxt").html(ScrollBar.value + "/" + ScrollBar.maxValue); }, Value: function() { var valite = false; var currentValue; $("#scroll_Thumb").mousedown(function() { valite = true; $(document.body).mousemove(function(event) { if (valite == false) return; var changeX = event.clientX - ScrollBar.currentX; currentValue = changeX - ScrollBar.currentX-$("#Demo").offset().left; $("#scroll_Thumb").css("margin-left", currentValue + "px"); $("#scroll_Track").css("width", currentValue + 2 + "px"); if ((currentValue + 25) >= $("#scrollBar").width()) { $("#scroll_Thumb").css("margin-left", $("#scrollBar").width() - 25 + "px"); $("#scroll_Track").css("width", $("#scrollBar").width() + 2 + "px"); ScrollBar.value = ScrollBar.maxValue; } else if (currentValue <= 0) { $("#scroll_Thumb").css("margin-left", "0px"); $("#scroll_Track").css("width", "0px"); } else { ScrollBar.value = Math.round(100 * (currentValue / $("#scrollBar").width())); } $("#scrollBarTxt").html(ScrollBar.value + "/" + ScrollBar.maxValue); }); }); $(document.body).mouseup(function() { ScrollBar.value = Math.round(100 * (currentValue / $("#scrollBar").width())); valite = false; if (ScrollBar.value >= ScrollBar.maxValue) ScrollBar.value = ScrollBar.maxValue; if (ScrollBar.value <= 0) ScrollBar.value = 0; $("#scrollBarTxt").html(ScrollBar.value + "/" + ScrollBar.maxValue); }); }, GetValue: function() { this.currentX = $("#scrollBar").width() * (this.value / this.maxValue); } } var ProgressBar = { maxValue: 100, value: 20, SetValue: function(aValue) { this.value=aValue; if (this.value >= this.maxValue) this.value = this.maxValue; if (this.value <= 0) this.value = 0; var mWidth=this.value/this.maxValue*$("#progressBar").width()+"px"; $("#progressBar_Track").css("width",mWidth); $("#progressBarTxt").html(this.value+"/"+this.maxValue); } } </script>  </html>

发表了文章 2016-03-14

SVG特效&canvas特效

SVG特效 <!DOCTYPE html> <meta charset="utf-8"> <style> rect { fill: #fff; stroke: #000; } </style> <svg width="960" height="500"> <defs> <clipPath id="clip-upper"> <rect width="960" height="305" x="-480" y="-305"></rect> </clipPath> <clipPath id="clip-lower"> <rect width="960" height="195" x="-480" y="0"></rect> </clipPath> </defs> <g clip-path="url(#clip-upper)" transform="translate(480,305)"></g> <g clip-path="url(#clip-lower)" transform="translate(480,305)"></g> </svg> <script src="//d3js.org/d3.v3.min.js"></script> <script> var width = 960, height = 500, triangleSize = 400, squareCount = 71, squareSize = 90, speed = .08; var square = d3.selectAll("g") .selectAll("g") .data(function(d, i) { return i ? [0, 1, 2] : [2, 0, 1]; }) .enter().append("g") .attr("transform", function(i) { return "rotate(" + (i * 120 + 60) + ")translate(0," + -triangleSize / Math.sqrt(12) + ")"; }) .selectAll("rect") .data(d3.range(squareCount)) .enter().append("rect") .datum(function(i) { return i / squareCount; }) .attr({ width: squareSize, height: squareSize, x: -squareSize / 2, y: -squareSize / 2 }); d3.timer(function(elapsed) { square .attr("transform", function(t) { return "translate(" + (t - .5) * triangleSize + ",0)rotate(" + (t * 120 + elapsed * speed) + ")"; }); }); </script> canvas特效下载地址：http://download.csdn.net/detail/cometwo/9462522 滤镜 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body style="background: black;"> <canvas id="canvas" style="display:block;margin:60px auto;border:1px solid red;"> 您的浏览器尚不支持canvas </canvas> <input type="range" id="scale-range" min="0.5" max="3.0" step="0.01" value="1.0" style="display:block;margin:20px auto;width:500px" /> <script> var canvas = document.getElementById("canvas") var context = canvas.getContext("2d") var slider = document.getElementById("scale-range") var image = new Image() window.onload = function(){ canvas.width = 900 canvas.height = 400 var scale = slider.value image.src = "img-lg.jpg" image.onload = function(){ drawImageByScale( scale ) // slider.onchange = function(){ // scale = slider.value // drawImage( image , scale ) // } slider.onmousemove = function(){ scale = slider.value drawImageByScale( scale ) } } } function drawImageByScale( scale ){ var imageWidth = 1152 * scale var imageHeight = 768 * scale //var sx = imageWidth / 2 - canvas.width / 2 //var sy = imageHeight / 2 - canvas.height / 2 //context.drawImage( image , sx , sy , canvas.width , canvas.height , 0 , 0 , canvas.width , canvas.height ) x = canvas.width /2 - imageWidth / 2 y = canvas.height / 2 - imageHeight / 2 context.clearRect( 0 , 0 , canvas.width , canvas.height ) context.drawImage( image , x , y , imageWidth , imageHeight ) } </script> </body> </html>

发表了文章 2016-03-13

自己动手丰衣足食之鼠标悬浮特效

button特效：下载地址：http://download.csdn.net/detail/cometwo/9460245 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script> <title>基于jquery hover图片遮罩层滑动 </title> <style type="text/css"> * { margin: 0; padding: 0; list-style-type: none; } .con { width: 950px; height: 435px; background: pink; margin: 0px auto; border: 1px solid blue; padding-left: 25px; padding-top: 25px; } .con ul li { width: 297px; height: 198px; float: left; margin-right: 15px; margin-bottom: 15px; position: relative; overflow: hidden; cursor: pointer; border: 1px solid red; } .txt { width: 297px; height: 45px; background: rgba(0, 0, 0, 0.6); position: absolute; left: 0; bottom: 0; color: #fff; font-family: "微软雅黑"; } .txt h3 { font-size: 20px; font-weight: 100; height: 45px; text-align: center; line-height: 45px; border: 1px solid blue; } .txt p { font-size: 14px; text-align: center; border: 1px solid green; } </style> <script type="text/javascript"> $(function() { $(".con ul li").hover(function() { $(this).find(".txt").stop().animate({ height: "198px" }, 400); $(this).find(".txt h3").stop().animate({ paddingTop: "60px" }, 400); }, function() { $(this).find(".txt").stop().animate({ height: "45px" }, 400); $(this).find(".txt h3").stop().animate({ paddingTop: "0px" }, 400); }) }) </script> </head> <body> <div class="con"> <ul> <li> <img src="images/class1.jpg" /> <div class="txt"> <h3>IT培训</h3> <p>为您铺就成为IT大神的在线学习之路</p> </div> </li> <li> <img src="images/class2.jpg" /> <div class="txt"> <h3>语言学习</h3> <p>英语、韩语、日语各类语言课程一网打尽</p> </div> </li> <li> <img src="images/class3.jpg" /> <div class="txt"> <h3>职业技能</h3> <p>传授会计师、建筑师等各类考证学习宝典</p> </div> </li> <li> <img src="images/class4.jpg" /> <div class="txt"> <h3>中小学/大学</h3> <p>小学、初中、高中各科课程在线辅导</p> </div> </li> <li> <img src="images/class5.jpg" /> <div class="txt"> <h3>兴趣爱好</h3> <p>吉他、摄影等各类兴趣教程让你成为生活达人</p> </div> </li> <li> <img src="images/class6.jpg" /> <div class="txt"> <h3>亲子学堂</h3> <p>教你如何和宝宝一起成长</p> </div> </li> </ul> </div> </body> </html>

发表了文章 2016-03-13

深入理解position: fixed

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>深入理解position: fixed;</title> <style type="text/css"> * { padding: 0px; margin: 0px; } #header { position: fixed; width: 900px; height: 100px; background: red; top: 0px; left: 0px; /*居中办法*/ right: 0px; margin: 0 auto; } #mian { width: 900px; height: auto; background: #000000; padding-top: 10px; padding-bottom: 10px; margin: 100px auto 0px; } h1 { width: 95%; text-align: center; color: yellow; background: blue; margin: 0px auto 10px; } h1:nth-child(2n) { background: green; } h1:last-child { margin-bottom: 0px; } .wbd { width: 300px; height: 50px; line-height: 50px; border-radius: 10px; background: green; text-align: center; margin-top: 25px; font-size: 38px; margin-left: 300px; box-shadow: 0px 0px 115px blue; text-shadow: 0px 0px 15px red; } </style> </head> <body> <div id="header"> <div class="wbd">我不动</div> </div> <div id="mian"> <h1>1</h1> <h1>2</h1> <h1>3</h1> <h1>4</h1> <h1>5</h1> <h1>6</h1> <h1>7</h1> <h1>8</h1> <h1>9</h1> <h1>10</h1> <h1>11</h1> <h1>12</h1> <h1>13</h1> <h1>14</h1> <h1>15</h1> <h1>16</h1> <h1>17</h1> <h1>18</h1> <h1>19</h1> <h1>20</h1> </div> </body> </html>

发表了文章 2016-03-12

深入理解transform属性之翻转效果

DEMO下载：http://download.csdn.net/detail/cometwo/9459617 纯CSS3实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> a { display: block; float: left; margin: 10px 50px 10px 50px; color: red; border: 1px solid blue; } .a { transition: All 1s ease-in-out; width: 200px; height: 200px; background-color: #000000; display: block; text-align: center; line-height: 200px; font-size: 20px; font-weight: bold; } .a:hover { transform: rotate(360deg); } .b { transition: All 0.4s ease-in-out; width: 200px; height: 200px; background-color: #000000; display: block; text-align: center; line-height: 200px; font-size: 20px; font-weight: bold; } .b:hover { transform: scale(1.2); } .c { transition: All 0.4s ease-in-out; width: 200px; height: 200px; background-color: #000000; display: block; text-align: center; line-height: 200px; font-size: 20px; font-weight: bold; } .c:hover { transform: rotate(360deg) scale(1.2); } .d { transition: All 0.4s ease-in-out; width: 200px; height: 200px; background-color: #000000; display: block; text-align: center; line-height: 200px; font-size: 20px; font-weight: bold; } .d:hover { transform: translate(0, -10px); } /*****************************************/ .flip-container { perspective: 1000; clear: both; border: 1px solid red; margin-top: 50px; margin-left: 50px; } .flip-container:hover .flipper { transform: rotateY(-180deg); } .flip-container, .front, .back { width: 200px; height: 200px; } .flipper { transition: 2s; transform-style: preserve-3d; position: relative; } .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } img { width: 200px; height: 200px; overflow: hidden; } .front { background: red; z-index: 2; } .back { background: blue; transform: rotateY(-180deg); } /***********************************/ .flip-container1 { perspective: 1000; border: 1px solid red; margin-top: 50px; margin-left: 50px; } .flip-container1:hover .flipper1 { transform: rotateX(-180deg); } .flip-container1, .front1, .back1 { width: 200px; height: 200px; } .flipper1 { transition: 2s; transform-style: preserve-3d; position: relative; transform-origin: 100% 100px; /* 高的一半 */ } .front1, .back1 { backface-visibility: hidden; position: absolute; top: 0; left: 0; } img { width: 200px; height: 200px; overflow: hidden; } .front1 { background: red; z-index: 2; } .back1 { background: blue; transform: rotateX(-180deg); } </style> </head> <body> <a class="a">360度旋转</a> <a class="b">悬浮放大效果</a> <a class="c">旋转放大</a> <a class="d">上下移动</a> <h1 style="clear: both;">垂直翻转</h1> <div class="flip-container"> <div class="flipper"> <div class="front"> <img src="img/1.jpg" /> </div> <div class="back"> <img src="img/2.jpg" /> </div> </div> </div> <h1>水平翻转</h1> <div class="flip-container1"> <div class="flipper1"> <div class="front1"> <img src="img/1.jpg" /> </div> <div class="back1"> <img src="img/2.jpg" /> </div> </div> </div> </body> </html> JS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="js/jquery-2.1.0.min.js"></script> <title>CSS3 翻转效果 </title> <link rel="stylesheet" href="css/fanzhuan.css" type="text/css" /> <style> #box { width: 355px; height: 500px; margin: 30px auto; position: relative; border: 1px solid red; } .list { position: absolute; } .list img { border-radius: 2px; } </style> <script> $(function() { // 在前面显示的元素，隐藏在后面的元素 var eleBack = null, eleFront = null, // 纸牌元素们 eleList = $(".list"); // 确定前面与后面元素 var funBackOrFront = function() { eleList.each(function() { if ($(this).hasClass("out")) { eleBack = $(this); } else { eleFront = $(this); } }); }; funBackOrFront(); $("#box").hover(function() { // 切换的顺序如下 // 1. 当前在前显示的元素翻转90度隐藏, 动画时间225毫秒 // 2. 结束后，之前显示在后面的元素逆向90度翻转显示在前 // 3. 完成翻面效果 eleFront.addClass("out").removeClass("in"); setTimeout(function() { eleBack.addClass("in").removeClass("out"); // 重新确定正反元素 funBackOrFront(); }, 225); return false; }); }) </script> </head> <body> <h1>必须给要翻转的添加flip类</h1> <div id="box"> <span class="list flip out"><img src="img/puke-back.png" alt="纸牌正面" /></span> <span class="list flip"><img src="img/puke-k.png" alt="纸牌背面" /> </span> </div> </body> </html> 需要fanzhuan.css支持 /* * jQuery Mobile Framework * Copyright (c) jQuery Project * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. */ .in { -webkit-animation-timing-function: ease-out; -webkit-animation-duration: 350ms; animation-timing-function: ease-out; animation-duration: 350ms; } .out { -webkit-animation-timing-function: ease-in; -webkit-animation-duration: 225ms; animation-timing-function: ease-in; animation-duration: 225ms; } @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } .fade.out { opacity: 0; -webkit-animation-duration: 125ms; -webkit-animation-name: fadeout; animation-duration: 125ms; animation-name: fadeout; } .fade.in { opacity: 1; -webkit-animation-duration: 225ms; -webkit-animation-name: fadein; animation-duration: 225ms; animation-name: fadein; } .pop { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } .pop.in { -webkit-transform: scale(1); -webkit-animation-name: popin; -webkit-animation-duration: 350ms; transform: scale(1); animation-name: popin; animation-duration: 350ms; opacity: 1; } .pop.out { -webkit-animation-name: fadeout; -webkit-animation-duration: 100ms; animation-name: fadeout; animation-duration: 100ms; opacity: 0; } .pop.in.reverse { -webkit-animation-name: fadein; animation-name: fadein; } .pop.out.reverse { -webkit-transform: scale(.8); -webkit-animation-name: popout; transform: scale(.8); animation-name: popout; } @-webkit-keyframes popin { from { -webkit-transform: scale(.8); opacity: 0; } to { -webkit-transform: scale(1); opacity: 1; } } @keyframes popin { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } @-webkit-keyframes popout { from { -webkit-transform: scale(1); opacity: 1; } to { -webkit-transform: scale(.8); opacity: 0; } } @keyframes popout { from { transform: scale(1); opacity: 1; } to { transform: scale(.8); opacity: 0; } } /* keyframes for slidein from sides */ @-webkit-keyframes slideinfromright { from { -webkit-transform: translate3d(100%,0,0); } to { -webkit-transform: translate3d(0,0,0); } } @keyframes slideinfromright { from { transform: translateX(100%); } to { transform: translateX(0); } } @-webkit-keyframes slideinfromleft { from { -webkit-transform: translate3d(-100%,0,0); } to { -webkit-transform: translate3d(0,0,0); } } @keyframes slideinfromleft { from { transform: translateX(-100%); } to { transform: translateX(0); } } /* keyframes for slideout to sides */ @-webkit-keyframes slideouttoleft { from { -webkit-transform: translate3d(0,0,0); } to { -webkit-transform: translate3d(-100%,0,0); } } @keyframes slideouttoleft { from { transform: translateX(0); } to { transform: translateX(-100%); } } @-webkit-keyframes slideouttoright { from { -webkit-transform: translate3d(0,0,0); } to { -webkit-transform: translate3d(100%,0,0); } } @keyframes slideouttoright { from { transform: translateX(0); } to { transform: translateX(100%); } } .slide.out, .slide.in { -webkit-animation-timing-function: ease-out; -webkit-animation-duration: 350ms; animation-timing-function: ease-out; animation-duration: 350ms; } .slide.out { -webkit-transform: translate3d(-100%,0,0); -webkit-animation-name: slideouttoleft; transform: translateX(-100%); animation-name: slideouttoleft; } .slide.in { -webkit-transform: translate3d(0,0,0); -webkit-animation-name: slideinfromright; transform: translateX(0); animation-name: slideinfromright; } .slide.out.reverse { -webkit-transform: translate3d(100%,0,0); -webkit-animation-name: slideouttoright; transform: translateX(100%); animation-name: slideouttoright; } .slide.in.reverse { -webkit-transform: translate3d(0,0,0); -webkit-animation-name: slideinfromleft; transform: translateX(0); animation-name: slideinfromleft; } .slidefade.out { -webkit-transform: translateX(-100%); -webkit-animation-name: slideouttoleft; -webkit-animation-duration: 225ms; transform: translateX(-100%); animation-name: slideouttoleft; animation-duration: 225ms; } .slidefade.in { -webkit-transform: translateX(0); -webkit-animation-name: fadein; -webkit-animation-duration: 200ms; transform: translateX(0); animation-name: fadein; animation-duration: 200ms; } .slidefade.out.reverse { -webkit-transform: translateX(100%); -webkit-animation-name: slideouttoright; -webkit-animation-duration: 200ms; transform: translateX(100%); animation-name: slideouttoright; animation-duration: 200ms; } .slidefade.in.reverse { -webkit-transform: translateX(0); -webkit-animation-name: fadein; -webkit-animation-duration: 200ms; transform: translateX(0); animation-name: fadein; animation-duration: 200ms; } /* slide down */ .slidedown.out { -webkit-animation-name: fadeout; -webkit-animation-duration: 100ms; animation-name: fadeout; animation-duration: 100ms; } .slidedown.in { -webkit-transform: translateY(0); -webkit-animation-name: slideinfromtop; -webkit-animation-duration: 250ms; transform: translateY(0); animation-name: slideinfromtop; animation-duration: 250ms; } .slidedown.in.reverse { -webkit-animation-name: fadein; -webkit-animation-duration: 150ms; animation-name: fadein; animation-duration: 150ms; } .slidedown.out.reverse { -webkit-transform: translateY(-100%); -webkit-animation-name: slideouttotop; -webkit-animation-duration: 200ms; transform: translateY(-100%); animation-name: slideouttotop; animation-duration: 200ms; } @-webkit-keyframes slideinfromtop { from { -webkit-transform: translateY(-100%); } to { -webkit-transform: translateY(0); } } @keyframes slideinfromtop { from { transform: translateY(-100%); } to { transform: translateY(0); } } @-webkit-keyframes slideouttotop { from { -webkit-transform: translateY(0); } to { -webkit-transform: translateY(-100%); } } @keyframes slideouttotop { from { transform: translateY(0); } to { transform: translateY(-100%); } } /* slide up */ .slideup.out { -webkit-animation-name: fadeout; -webkit-animation-duration: 100ms; animation-name: fadeout; animation-duration: 100ms; } .slideup.in { -webkit-transform: translateY(0); -webkit-animation-name: slideinfrombottom; -webkit-animation-duration: 250ms; transform: translateY(0); animation-name: slideinfrombottom; animation-duration: 250ms; } .slideup.in.reverse { -webkit-animation-name: fadein; -webkit-animation-duration: 150ms; animation-name: fadein; animation-duration: 150ms; } .slideup.out.reverse { -webkit-transform: translateY(100%); -webkit-animation-name: slideouttobottom; -webkit-animation-duration: 200ms; transform: translateY(100%); animation-name: slideouttobottom; animation-duration: 200ms; } @-webkit-keyframes slideinfrombottom { from { -webkit-transform: translateY(100%); } to { -webkit-transform: translateY(0); } } @keyframes slideinfrombottom { from { transform: translateY(100%); } to { transform: translateY(0); } } @-webkit-keyframes slideouttobottom { from { -webkit-transform: translateY(0); } to { -webkit-transform: translateY(100%); } } @keyframes slideouttobottom { from { transform: translateY(0); } to { transform: translateY(100%); } } /* The properties in this rule are only necessary for the 'flip' transition. * We need specify the perspective to create a projection matrix. This will add * some depth as the element flips. The depth number represents the distance of * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate * value. */ .viewport-flip { -webkit-perspective: 1000; perspective: 1000; position: absolute; } .flip { -webkit-backface-visibility: hidden; -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ backface-visibility: hidden; transform: translateX(0); } .flip.out { -webkit-transform: rotateY(-90deg) scale(.9); -webkit-animation-name: flipouttoleft; -webkit-animation-duration: 175ms; transform: rotateY(-90deg) scale(.9); animation-name: flipouttoleft; animation-duration: 175ms; } .flip.in { -webkit-animation-name: flipintoright; -webkit-animation-duration: 225ms; animation-name: flipintoright; animation-duration: 225ms; } .flip.out.reverse { -webkit-transform: rotateY(90deg) scale(.9); -webkit-animation-name: flipouttoright; transform: rotateY(90deg) scale(.9); animation-name: flipouttoright; } .flip.in.reverse { -webkit-animation-name: flipintoleft; animation-name: flipintoleft; } @-webkit-keyframes flipouttoleft { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-90deg) scale(.9); } } @keyframes flipouttoleft { from { transform: rotateY(0); } to { transform: rotateY(-90deg) scale(.9); } } @-webkit-keyframes flipouttoright { from { -webkit-transform: rotateY(0) ; } to { -webkit-transform: rotateY(90deg) scale(.9); } } @keyframes flipouttoright { from { transform: rotateY(0); } to { transform: rotateY(90deg) scale(.9); } } @-webkit-keyframes flipintoleft { from { -webkit-transform: rotateY(-90deg) scale(.9); } to { -webkit-transform: rotateY(0); } } @keyframes flipintoleft { from { transform: rotateY(-90deg) scale(.9); } to { transform: rotateY(0); } } @-webkit-keyframes flipintoright { from { -webkit-transform: rotateY(90deg) scale(.9); } to { -webkit-transform: rotateY(0); } } @keyframes flipintoright { from { transform: rotateY(90deg) scale(.9); } to { transform: rotateY(0); } } /* The properties in this rule are only necessary for the 'flip' transition. * We need specify the perspective to create a projection matrix. This will add * some depth as the element flips. The depth number represents the distance of * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate * value. */ .viewport-turn { -webkit-perspective: 200px; perspective: 200px; position: absolute; } .turn { -webkit-backface-visibility: hidden; -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ -webkit-transform-origin: 0; backface-visibility :hidden; transform: translateX(0); transform-origin: 0; } .turn.out { -webkit-transform: rotateY(-90deg) scale(.9); -webkit-animation-name: flipouttoleft; -webkit-animation-duration: 125ms; transform: rotateY(-90deg) scale(.9); animation-name: flipouttoleft; animation-duration: 125ms; } .turn.in { -webkit-animation-name: flipintoright; -webkit-animation-duration: 250ms; animation-name: flipintoright; animation-duration: 250ms; } .turn.out.reverse { -webkit-transform: rotateY(90deg) scale(.9); -webkit-animation-name: flipouttoright; transform: rotateY(90deg) scale(.9); animation-name: flipouttoright; } .turn.in.reverse { -webkit-animation-name: flipintoleft; animation-name: flipintoleft; } @-webkit-keyframes flipouttoleft { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-90deg) scale(.9); } } @keyframes flipouttoleft { from { transform: rotateY(0); } to { transform: rotateY(-90deg) scale(.9); } } @-webkit-keyframes flipouttoright { from { -webkit-transform: rotateY(0) ; } to { -webkit-transform: rotateY(90deg) scale(.9); } } @keyframes flipouttoright { from { transform: rotateY(0); } to { transform: rotateY(90deg) scale(.9); } } @-webkit-keyframes flipintoleft { from { -webkit-transform: rotateY(-90deg) scale(.9); } to { -webkit-transform: rotateY(0); } } @keyframes flipintoleft { from { transform: rotateY(-90deg) scale(.9); } to { transform: rotateY(0); } } @-webkit-keyframes flipintoright { from { -webkit-transform: rotateY(90deg) scale(.9); } to { -webkit-transform: rotateY(0); } } @keyframes flipintoright { from { transform: rotateY(90deg) scale(.9); } to { transform: rotateY(0); } } /* flow transition */ .flow { -webkit-transform-origin: 50% 30%; transform-origin: 50% 30%; } .flow.out { -webkit-transform: translateX(-100%) scale(.7); -webkit-animation-name: flowouttoleft; -webkit-animation-timing-function: ease; -webkit-animation-duration: 350ms; transform: translateX(-100%) scale(.7); animation-name: flowouttoleft; animation-timing-function: ease; animation-duration: 350ms; } .flow.in { -webkit-transform: translateX(0) scale(1); -webkit-animation-name: flowinfromright; -webkit-animation-timing-function: ease; -webkit-animation-duration: 350ms; transform: translateX(0) scale(1); animation-name: flowinfromright; animation-timing-function: ease; animation-duration: 350ms; } .flow.out.reverse { -webkit-transform: translateX(100%); -webkit-animation-name: flowouttoright; transform: translateX(100%); animation-name: flowouttoright; } .flow.in.reverse { -webkit-animation-name: flowinfromleft; animation-name: flowinfromleft; } @-webkit-keyframes flowouttoleft { 0% { -webkit-transform: translateX(0) scale(1); } 60%, 70% { -webkit-transform: translateX(0) scale(.7); } 100% { -webkit-transform: translateX(-100%) scale(.7); } } @keyframes flowouttoleft { 0% { transform: translateX(0) scale(1); } 60%, 70% { transform: translateX(0) scale(.7); } 100% { transform: translateX(-100%) scale(.7); } } @-webkit-keyframes flowouttoright { 0% { -webkit-transform: translateX(0) scale(1); } 60%, 70% { -webkit-transform: translateX(0) scale(.7); } 100% { -webkit-transform: translateX(100%) scale(.7); } } @keyframes flowouttoright { 0% { transform: translateX(0) scale(1); } 60%, 70% { transform: translateX(0) scale(.7); } 100% { transform: translateX(100%) scale(.7); } } @-webkit-keyframes flowinfromleft { 0% { -webkit-transform: translateX(-100%) scale(.7); } 30%, 40% { -webkit-transform: translateX(0) scale(.7); } 100% { -webkit-transform: translateX(0) scale(1); } } @keyframes flowinfromleft { 0% { transform: translateX(-100%) scale(.7); } 30%, 40% { transform: translateX(0) scale(.7); } 100% { transform: translateX(0) scale(1); } } @-webkit-keyframes flowinfromright { 0% { -webkit-transform: translateX(100%) scale(.7); } 30%, 40% { -webkit-transform: translateX(0) scale(.7); } 100% { -webkit-transform: translateX(0) scale(1); } } @keyframes flowinfromright { 0% { transform: translateX(100%) scale(.7); } 30%, 40% { transform: translateX(0) scale(.7); } 100% { transform: translateX(0) scale(1); } }

发表了文章 2016-03-10

自己动手丰衣足食之三级联动

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 省： <select style="width: 100px;" id="pre" onchange="chg(this);"> <option value="-1">请选择</option> </select> 市： <select style="width: 100px;" id="city" onchange="chg2(this)" ;></select> 区： <select style="width: 100px;" id="area"></select> </body> <script> //声明省 var pres = ["北京", "上海", "山东"]; //直接声明Array //声明市 var cities = [ ["东城", "昌平", "海淀"], ["浦东", "高区"], ["济南", "青岛"] ]; var areas = [ [ ["东城1", "东城2", "东城3"], ["昌平1", "昌平2", "昌平3"], ["海淀1", "海淀2", "海淀3"] ], [ ["浦东1", "浦东2", "浦东3"], ["高区1", "高区2", "高区3"] ], [ ["济南1", "济南2"], ["青岛1", "青岛2"] ] ] //设置一个省的公共下标 var pIndex = -1; var preEle = document.getElementById("pre"); var cityEle = document.getElementById("city"); var areaEle = document.getElementById("area"); //先设置省的值 for (var i = 0; i < pres.length; i++) { //声明option.<option value="pres[i]">Pres[i]</option> var op = new Option(pres[i], i); //添加 preEle.options.add(op); } function chg(obj) { if (obj.value == -1) { cityEle.options.length = 0; areaEle.options.length = 0; } //获取值 var val = obj.value; pIndex = obj.value; //获取ctiry var cs = cities[val]; //获取默认区 var as = areas[val][0]; //先清空市 cityEle.options.length = 0; areaEle.options.length = 0; for (var i = 0; i < cs.length; i++) { var op = new Option(cs[i], i); cityEle.options.add(op); } for (var i = 0; i < as.length; i++) { var op = new Option(as[i], i); areaEle.options.add(op); } } function chg2(obj) { var val = obj.selectedIndex; var as = areas[pIndex][val]; areaEle.options.length = 0; for (var i = 0; i < as.length; i++) { var op = new Option(as[i], i); areaEle.options.add(op); } } </script> </html>

发表了文章 2016-03-02

认识jQuery的两个API：attr和data

参考文档：https://segmentfault.com/a/1190000000626031 从语义上看，这两个API之间毫不相干，作用也是各有不同。单纯方法名称看，attr()用来修改和增加DOM元素的属性，以及获得属性值。data()用来将数据绑定在DOM元素上。在实际项目中我发现，这两个API都被用来将存储服务器端数据和传递到JavaScript，可以说是JavaScript使用服务器段数据的一个桥梁。如果不考虑attr()修改DOM元素属性可能引起UI变化这一方面，只考虑其作为传递数据的桥梁，那么attr()和data()有什么共同点和差异？如果用其中任何一个都能达到目的，是不是其中一个更为适合？ attr()的用法 attr()获得属性值通过attr()获得属性时，可以这样$(selector).attr(attrName)。注意，其返回值始终是string型！看下面的例子。通过attr()得到的属性age的值是"31"，属性isstd的值是"false"。另外需要注意的是，attr()对传入的attrName大小写不敏感，就是说attr('name')和attr('NAME')都能得到期望的返回值。 [html] view plain copy <div class="box" id="jquery-api-attr" name="chen" AGE="31" isStd="false"></div> [javascript] view plain copy $('#jquery-api-attr').attr('age'); // "31" $('#jquery-api-attr').attr('isstd'); // "false" attr()添加和修改属性 attr修改属性支持三种方式，即可以向API传递三种形参：attr(attrName, value)，attr(attrName, function)，attr(obj)。如果第二个参数是function，那么该function会被执行，并将执行结果作为attr()的返回值。attr(obj)等同于多次调用attr(attrName, value)，比如attr({attr1: value1, attr2: value2})等同于attr(attr1, value1).attr(attr1, value2); 在JavaScript代码，可以通过attr()动态修改属性值和添加新属性，如果传入value是对象，我们最终会获得什么呢？看下面几个例子。 [javascript] view plain copy var $el = $('#jquery-api-attr'); $el.attr('newAttr1', {name: 'chen'}); $el.attr('newAttr1'); // "[object Object]" $el.attr('newAttr2', [1, 2, 3]); $el.attr('newAttr2'); // "1, 2, 3" $el.attr('newAttr3', null); $el.attr('newAttr3'); // "undefined" $el.attr('newAttr4', undefined); $el.attr('newAttr4'); // "undefined" 可以看出，如果value是基本数据类型的一种，那么直接返回相应的字符串，但是null value返回的是“undefined"并非"null"。如果value是一个对象，那么对象的toString()会被调用，执行结果即attr()的返回值。 data()的用法 data()修改数据和绑定新数据和attr()类似，可以在页面生成时绑定数据，实际上是给元素添加名称为data-*的属性。 [html] view plain copy <div class="box" id="jquery-api-attr" data-name="chen" data-AGE="31" isStd="false"></div> 在JavaScript里，data()修改数据可以这样：data(key, value)和data(obj)。后者等同于data(key1, value1).data(key2, value2)。还有一种方式，如下 [javascript] view plain copy var data = $el.data(); data.newAttr = 10; 在使用data()修改数据时，如果value是undefined类型，那么数据不会保存或更新。 [javascript] view plain copy $el.data('school', undefined); $el.data().hasOwnProperty('school'); // false $el.data('newAttr ', undefined); $el.data('newAttr '); // 10 data()获取数据往data()传入一个string称之为key的参数即data(key)，或者data()[key]来获得与key对应的value。但是注意一点，data()可能会返回undefined如果没有任何数据绑定，所以data(key)的方式更为安全。和attr()值返回string类型的值不一样，data()会对静态绑定的数字、布尔、对象、数组和null进行转换。看下面几个例子。 [html] view plain copy <div class="box" id="jquery-api-data" data-name="chen" data-AGE="31" data-isStd="false" data-func="function(){}" data-list='{"listname":"eric chen"}' data-undefinedkey="undefined" data-nullkey="null" data-last-value="43"></div> [javascript] view plain copy var $el = $('#jquery-api-data'); $el.data('age'); // 31 $el.data('AGE'); // undefined $el.data('isstd'); // false $el.data('func'); // "function() {}" $el.data('list'); // obj {"listname": "eric chen"} $el.data('undefinedkey'); // "undefined" $el.data('nullkey'); // null $el.data('lastValue'); // 43 $el.data('lastvalue'); // undefined 如果在HTML里静态绑定了数据，通过data()来获取数据时，key必须全小写，比如绑定data-AGE="31"，只能通过data('age')而不是data('AGE')。另外注意data-last-value="43"，只能通过data('lastValue')或者data('last-value')。在JavaScript里通过data()修改数据，再获取值时，须严格按照指定的key。比如data('AGE', 20)，这时data('age')是31，data('AGE')返回20。这时因为，在JS里第一调用data()时，会将HTML里静态绑定的数据，复制到jQuery.cache变量里，复制时key中的字符都转换为对应的小写字母。再次使用data()修改数据或添加新数据时，对key不会转换为小写字母，也不会对存入的数据做类型转换！通常，data('lastValue', value)和data('last-value', value)修改的是同一数据。但是如果是这样子呢？不给data()传入任何参数来获得绑定在$el上的所有数据即一个JSON对象，然后修改这个对象的属性值。 [javascript] view plain copy var dt= $el.data(); dt['last-value'] = 12; dt.lastValue = 13; $el.data('last-value'); // ? $el.data('lastValue'); // ? 你会发现$el.data('last-value')返回12，而$el.data('lastValue')返回13。另外一种方式与此等价： [javascript] view plain copy $el.data({'last-value': 12, 'lastValue': 13}); 小结如果是为了存储和传递页面元素相关的数据，data()比attr()是更好的选择。了解data()的工作方式，才能正确使用这个API。 [javascript] view plain copy <pre code_snippet_id="155762" snippet_file_name="blog_20140114_8_4085715"></pre> <pre></pre> <pre></pre> <pre></pre> <pre></pre>

发表了文章 2016-02-28

自己动手丰衣足食之表格排序插件jquery.tableSort.js

下载地址：http://download.csdn.net/detail/cometwo/9446935 1.一定要引jQuery包，所有jq插件都是基于jQuery包的 2.如果想指定哪一栏不排序这样写 $(“#mytable”).tablesorter({headers:{5:{sorter:false}}}); 第5列的sorter为false就OK了参考：http://my.oschina.net/u/1421430/blog/192885 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> <script type="text/javascript" src="js/jquery.tablesort.js"></script> <style type="text/css"> #tip { border: solid 1px black; width: 358px; line-height: 21px; height: 21px; padding: 2px 10px; background-color: pink; font-size: 12px; text-align: center; margin: 10px auto 10px; } .table { width: 380px; margin: 0 auto; border-collapse: collapse; text-align: center; } .table tr td, .table tr th { background: greenyellow; border: solid 1px red; color: #666; height: 30px; /*line-height: 30px;*/ } .table tr th { background: #89AFB1; color: red; text-align: center; font-size: 14px; } .table a, .table a:visited { color: red; text-decoration: none } .table a:hover, .table a:active { color: blue; text-decoration: none } </style> <script type="text/javascript"> $(function() { $('table').tablesort().data('tablesort'); var i = 0; $(".table tr th a").click(function() { if (i % 2 == 0) { $(".sj").text('升序'); i++; } else { $(".sj").text('降序'); i++; } }) }) </script> </script> </head> <body> <div id="tip">默认无排列规则(<span class="sj">----</span>)</div> <table id="tbStudent" class="table"> <tr> <th><a class="num" href="javascript:">编号</a></th> <th><a href="javascript:">姓名</a></th> <th><a href="javascript:">性别</a></th> <th><a href="javascript:">总分</a></th> </tr> <tr> <td>1031</td> <td>李渊</td> <td>男</td> <td>654</td> </tr> <tr> <td>1021</td> <td>张扬</td> <td>男</td> <td>624</td> </tr> <tr> <td>1011</td> <td>吴敏</td> <td>女</td> <td>632</td> </tr> <tr> <td>1026</td> <td>李小明</td> <td>男</td> <td>610</td> </tr> <tr> <td>1016</td> <td>周谨</td> <td>女</td> <td>690</td> </tr> <tr> <td>1041</td> <td>谢小敏</td> <td>女</td> <td>632</td> </tr> <tr> <td>1072</td> <td>刘明明</td> <td>男</td> <td>633</td> </tr> <tr> <td>1063</td> <td>蒋忠公</td> <td>男</td> <td>675</td> </tr> </table> </body> </html>

发表了文章 2016-02-27

深入理解jquery新的绑定事件机制on方法的使用

jQuery 推出on()的目的有2个，一是为了统一接口，二是为了提高性能，所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了，因为它已经处于不推荐使用列表了，随时会被干掉。如果只绑定一次事件，那接着用one()吧，这个没有变化。开始的时候写的代码如下，发现新生成的元素删除和添加点击都没反应，： $('.add a').on('click', function() { $('tbody').append('<tr><td>1</td><td class="del">111</td><td class="del"><a href="#">删除</a></td><td class="add"><a href="#">添加</a></td></tr>') for (var i = 0; i < $('tbody>tr').length; i++) { $('tbody>tr>td:first-child:eq(' + i + ')').text(i + 1); }; }); 修改代码如下，发现有效果了： $('tbody').on('click','.add a', function() { $('tbody').append('<tr><td>1</td><td class="del">111</td><td class="del"><a href="#">删除</a></td><td class="add"><a href="#">添加</a></td></tr>') for (var i = 0; i < $('tbody>tr').length; i++) { $('tbody>tr>td:first-child:eq(' + i + ')').text(i + 1); }; }); 最终代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>table 排序</title> <script type="text/javascript" src="js/jquery-2.2.1.min.js"></script> <style> table { border: 1px solid red; } th, td { padding: 10px; text-align: center; } </style> <script> $(function() { var hang = $('tbody>tr').length; for (var i = 0; i < $('tbody>tr').length; i++) { $('tbody>tr>td:first-child:eq(' + i + ')').text(i + 1); }; $('tbody').on('click','.del a', function() { $(this).parent().parent().remove(); for (var i = 0; i < $('tbody>tr').length; i++) { $('tbody>tr>td:first-child:eq(' + i + ')').text(i + 1); }; }); $('tbody').on('click','.add a', function() { $('tbody').append('<tr><td>1</td><td class="del">111</td><td class="del"><a href="#">删除</a></td><td class="add"><a href="#">添加</a></td></tr>') for (var i = 0; i < $('tbody>tr').length; i++) { $('tbody>tr>td:first-child:eq(' + i + ')').text(i + 1); }; }); }) </script> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>num</th> <th>main</th> <th>del</th> <th>add</th> </tr> </thead> <tbody> <tr> <td>1</td> <td class="del">111</td> <td class="del"><a href="#">删除</a></td> <td class="add"><a href="#">添加</a></td> </tr> <tr> <td>1</td> <td class="del">222</td> <td class="del"><a href="#">删除</a></td> <td class="add"><a href="#">添加</a></td> </tr> <tr> <td>1</td> <td class="del">333</td> <td class="del"><a href="#">删除</a></td> <td class="add"><a href="#">添加</a></td> </tr> </tbody> </table> </body> </html>

发表了文章 2016-02-27

获取时间的方法及常用时间类

$(function(){ var mydate = new Date(); var t=mydate.toLocaleString(); /*alert(t);*/ $("#time").text(t); $("#time").load("Untitled-1.html"); }); <P id="time">afwef</P> 取JavaScript 的时间使用内置的Date函数完成 var mydate = new Date(); mydate.getYear(); //获取当前年份(2位) mydate.getFullYear(); //获取完整的年份(4位,1970-????) mydate.getMonth(); //获取当前月份(0-11,0代表1月) mydate.getDate(); //获取当前日(1-31) mydate.getDay(); //获取当前星期X(0-6,0代表星期天) mydate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) mydate.getHours(); //获取当前小时数(0-23) mydate.getMinutes(); //获取当前分钟数(0-59) mydate.getSeconds(); //获取当前秒数(0-59) mydate.getMilliseconds(); //获取当前毫秒数(0-999) mydate.toLocaleDateString(); //获取当前日期 var mytime=mydate.toLocaleTimeString(); //获取当前时间 mydate.toLocaleString( ); //获取日期与时间日期时间脚本库方法列表 Date.prototype.isLeapYear 判断闰年 Date.prototype.Format 日期格式化 Date.prototype.DateAdd 日期计算 Date.prototype.DateDiff 比较日期差 Date.prototype.toString 日期转字符串 Date.prototype.toArray 日期分割为数组 Date.prototype.DatePart 取日期的部分信息 Date.prototype.MaxDayOfDate 取日期所在月的最大天数 Date.prototype.WeekNumOfYear 判断日期所在年的第几周 StringToDate 字符串转日期型 IsValidDate 验证日期有效性 CheckDateTime 完整日期时间检查 daysBetween 日期天数差 //--------------------------------------------------- // 判断闰年 //--------------------------------------------------- Date.prototype.isLeapYear = function() { return (0==this.getYear()%4&&((this.getYear()0!=0)||(this.getYear()@0==0))); } //--------------------------------------------------- // 日期格式化 // 格式 YYYY/yyyy/YY/yy 表示年份 // MM/M 月份 // W/w 星期 // dd/DD/d/D 日期 // hh/HH/h/H 时间 // mm/m 分钟 // ss/SS/s/S 秒 //--------------------------------------------------- Date.prototype.Format = function(formatStr) { var str = formatStr; var Week = ['日','一','二','三','四','五','六']; str=str.replace(/yyyy|YYYY/,this.getFullYear()); str=str.replace(/yy|YY/,(this.getYear() % 100)>9?(this.getYear() % 100).toString():'0' + (this.getYear() % 100)); str=str.replace(/MM/,this.getMonth()>9?this.getMonth().toString():'0' + this.getMonth()); str=str.replace(/M/g,this.getMonth()); str=str.replace(/w|W/g,Week[this.getDay()]); str=str.replace(/dd|DD/,this.getDate()>9?this.getDate().toString():'0' + this.getDate()); str=str.replace(/d|D/g,this.getDate()); str=str.replace(/hh|HH/,this.getHours()>9?this.getHours().toString():'0' + this.getHours()); str=str.replace(/h|H/g,this.getHours()); str=str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():'0' + this.getMinutes()); str=str.replace(/m/g,this.getMinutes()); str=str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():'0' + this.getSeconds()); str=str.replace(/s|S/g,this.getSeconds()); return str; } //+--------------------------------------------------- //| 求两个时间的天数差日期格式为 YYYY-MM-dd //+--------------------------------------------------- function daysBetween(DateOne,DateTwo) { var OneMonth = DateOne.substring(5,DateOne.lastIndexOf ('-')); var OneDay = DateOne.substring(DateOne.length,DateOne.lastIndexOf ('-')+1); var OneYear = DateOne.substring(0,DateOne.indexOf ('-')); var TwoMonth = DateTwo.substring(5,DateTwo.lastIndexOf ('-')); var TwoDay = DateTwo.substring(DateTwo.length,DateTwo.lastIndexOf ('-')+1); var TwoYear = DateTwo.substring(0,DateTwo.indexOf ('-')); var cha=((Date.parse(OneMonth+'/'+OneDay+'/'+OneYear)- Date.parse(TwoMonth+'/'+TwoDay+'/'+TwoYear))/86400000); return Math.abs(cha); } //+--------------------------------------------------- //| 日期计算 //+--------------------------------------------------- Date.prototype.DateAdd = function(strInterval, Number) { var dtTmp = this; switch (strInterval) { case 's' :return new Date(Date.parse(dtTmp) + (1000 * Number)); case 'n' :return new Date(Date.parse(dtTmp) + (60000 * Number)); case 'h' :return new Date(Date.parse(dtTmp) + (3600000 * Number)); case 'd' :return new Date(Date.parse(dtTmp) + (86400000 * Number)); case 'w' :return new Date(Date.parse(dtTmp) + ((86400000 * 7) * Number)); case 'q' :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number*3, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds()); case 'm' :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds()); case 'y' :return new Date((dtTmp.getFullYear() + Number), dtTmp.getMonth(), dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds()); } } //+--------------------------------------------------- //| 比较日期差 dtEnd 格式为日期型或者有效日期格式字符串 //+--------------------------------------------------- Date.prototype.DateDiff = function(strInterval, dtEnd) { var dtStart = this; if (typeof dtEnd == 'string' )//如果是字符串转换为日期型 { dtEnd = StringToDate(dtEnd); } switch (strInterval) { case 's' :return parseInt((dtEnd - dtStart) / 1000); case 'n' :return parseInt((dtEnd - dtStart) / 60000); case 'h' :return parseInt((dtEnd - dtStart) / 3600000); case 'd' :return parseInt((dtEnd - dtStart) / 86400000); case 'w' :return parseInt((dtEnd - dtStart) / (86400000 * 7)); case 'm' :return (dtEnd.getMonth()+1)+((dtEnd.getFullYear()-dtStart.getFullYear())*12) - (dtStart.getMonth()+1); case 'y' :return dtEnd.getFullYear() - dtStart.getFullYear(); } } //+--------------------------------------------------- //| 日期输出字符串，重载了系统的toString方法 //+--------------------------------------------------- Date.prototype.toString = function(showWeek) { var myDate= this; var str = myDate.toLocaleDateString(); if (showWeek) { var Week = ['日','一','二','三','四','五','六']; str += ' 星期' + Week[myDate.getDay()]; } return str; } //+--------------------------------------------------- //| 日期合法性验证 //| 格式为：YYYY-MM-DD或YYYY/MM/DD //+--------------------------------------------------- function IsValidDate(DateStr) { var sDate=DateStr.replace(/(^\s+|\s+$)/g,''); //去两边空格; if(sDate=='') return true; //如果格式满足YYYY-(/)MM-(/)DD或YYYY-(/)M-(/)DD或YYYY-(/)M-(/)D或YYYY-(/)MM-(/)D就替换为'' //数据库中，合法日期可以是:YYYY-MM/DD(2003-3/21),数据库会自动转换为YYYY-MM-DD格式 var s = sDate.replace(/[\d]{ 4,4 }[\-/]{ 1 }[\d]{ 1,2 }[\-/]{ 1 }[\d]{ 1,2 }/g,''); if (s=='') //说明格式满足YYYY-MM-DD或YYYY-M-DD或YYYY-M-D或YYYY-MM-D { var t=new Date(sDate.replace(/\-/g,'/')); var ar = sDate.split(/[-/:]/); if(ar[0] != t.getYear() || ar[1] != t.getMonth()+1 || ar[2] != t.getDate()) { //alert('错误的日期格式！格式为：YYYY-MM-DD或YYYY/MM/DD。注意闰年。'); return false; } } else { //alert('错误的日期格式！格式为：YYYY-MM-DD或YYYY/MM/DD。注意闰年。'); return false; } return true; } //+--------------------------------------------------- //| 日期时间检查 //| 格式为：YYYY-MM-DD HH:MM:SS //+--------------------------------------------------- function CheckDateTime(str) { var reg = /^(\d+)-(\d{ 1,2 })-(\d{ 1,2 }) (\d{ 1,2 }):(\d{ 1,2 }):(\d{ 1,2 })$/; var r = str.match(reg); if(r==null)return false; r[2]=r[2]-1; var d= new Date(r[1],r[2],r[3],r[4],r[5],r[6]); if(d.getFullYear()!=r[1])return false; if(d.getMonth()!=r[2])return false; if(d.getDate()!=r[3])return false; if(d.getHours()!=r[4])return false; if(d.getMinutes()!=r[5])return false; if(d.getSeconds()!=r[6])return false; return true; } //+--------------------------------------------------- //| 把日期分割成数组 //+--------------------------------------------------- Date.prototype.toArray = function() { var myDate = this; var myArray = Array(); myArray[0] = myDate.getFullYear(); myArray[1] = myDate.getMonth(); myArray[2] = myDate.getDate(); myArray[3] = myDate.getHours(); myArray[4] = myDate.getMinutes(); myArray[5] = myDate.getSeconds(); return myArray; } //+--------------------------------------------------- //| 取得日期数据信息 //| 参数 interval 表示数据类型 //| y 年 m月 d日 w星期 ww周 h时 n分 s秒 //+--------------------------------------------------- Date.prototype.DatePart = function(interval) { var myDate = this; var partStr=''; var Week = ['日','一','二','三','四','五','六']; switch (interval) { case 'y' :partStr = myDate.getFullYear();break; case 'm' :partStr = myDate.getMonth()+1;break; case 'd' :partStr = myDate.getDate();break; case 'w' :partStr = Week[myDate.getDay()];break; case 'ww' :partStr = myDate.WeekNumOfYear();break; case 'h' :partStr = myDate.getHours();break; case 'n' :partStr = myDate.getMinutes();break; case 's' :partStr = myDate.getSeconds();break; } return partStr; } //+--------------------------------------------------- //| 取得当前日期所在月的最大天数 //+--------------------------------------------------- Date.prototype.MaxDayOfDate = function() { var myDate = this; var ary = myDate.toArray(); var date1 = (new Date(ary[0],ary[1]+1,1)); var date2 = date1.dateAdd(1,'m',1); var result = dateDiff(date1.Format('yyyy-MM-dd'),date2.Format('yyyy-MM-dd')); return result; } //+--------------------------------------------------- //| 取得当前日期所在周是一年中的第几周 //+--------------------------------------------------- Date.prototype.WeekNumOfYear = function() { var myDate = this; var ary = myDate.toArray(); var year = ary[0]; var month = ary[1]+1; var day = ary[2]; document.write('< script language=VBScript\> \n'); document.write('myDate = DateValue(''+month+'-'+day+'-'+year+'') \n'); document.write('result = DatePart('ww', myDate) \n'); document.write(' \n'); return result; } //+--------------------------------------------------- //| 字符串转成日期类型 //| 格式 MM/dd/YYYY MM-dd-YYYY YYYY/MM/dd YYYY-MM-dd //+--------------------------------------------------- function StringToDate(DateStr) { var converted = Date.parse(DateStr); var myDate = new Date(converted); if (isNaN(myDate)) { //var delimCahar = DateStr.indexOf('/')!=-1?'/':'-'; var arys= DateStr.split('-'); myDate = new Date(arys[0],--arys[1],arys[2]); } return myDate; } DEMO: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-2.2.1.min.js"></script> <title></title> <script> $(function() { setInterval(function() { var mydate = new Date(); $("#time").html(mydate.toLocaleString()+' <br /> 当前时间：'+mydate.toLocaleTimeString()); //获取当前时间); },10) }); $(function() { function checktime(val) { if (val < 10) { val = "0" + val; } return val } setInterval(function() { var tm = new Date(); var YY=tm.getFullYear(); var MM=tm.getMonth()+1; var DD=tm.getDate(); var XQ=tm.getDay(); var H = checktime(tm.getHours()); var M = checktime(tm.getMinutes()); var S = checktime(tm.getSeconds()); $("#shijian").text(YY + '/' + MM + '/' +DD+' 星期'+XQ+'--'+H + ':' + M + ':' + S); },10) }) </script> </head> <body> <p id="time"></p> <p id="shijian"></p> </body> </html>

发表了文章 2016-02-27

easyUI tabs 初探

下载地址：http://download.csdn.net/detail/cometwo/9445748 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/easyui.css" /> <link rel="stylesheet" href="css/icon.css" /> <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.min.js"></script> <script type="text/javascript" src="js/tabs.js"></script> <title>easyUI</title> <script type="text/javascript"> $(function() { $("#menu a").click(function() { var title = $(this).text(); var url = $(this).attr("rel"); var icon = $(this).attr("icon"); OpenTab(title, url, icon); return false; //使超链接的单击事件失效 }); }); </script> <style></style> </head> <body class="easyui-layout"> <div region="north" style="height:80px;background: green;">  <h1>***管理系统</h1> </div> <div region="west" split="true" style="width:220px;" title="导航菜单"> <div id="menu"> <a href="#" rel="http://www.baidu.com">百度搜索</a> <br /> <a href="#" rel="http://www.google.com">Google搜索</a> <br /> <a href="#" rel="http://www.cnblogs.com">cnblogs</a> <br /> </div> </div> <div region="center"> <div id="tabs" class="easyui-tabs" fit="true" border="false">  <div title="欢迎使用"> <h1 style="font-size: 24px;">欢迎使用</h1> <h1 style="font-size: 24px;">欢迎使用</h1> </div>  </div> </div> </body> </html> 　一般来说，系统框架的主内容区会引入另一个独立的 Web 页面来实现系统的功能，所以在在 Tabs 里的每一个标签页里使用 iframe 标签来引入子页面。所以这里可以将 Tabs 的 Content 属性值设为一个 <iframe> 标签即可。比如： $("#tabs").tabs('add',{ title: "百度搜索", content: '<iframe style="width:100%;height:100%;" scrolling="auto" frameborder="0" src="http://www.baidu.com"></iframe>', closable: true, icon: '' }); 执行以后，效果如图：　　根据上面代码，我们可以将代码进行简单封装，写成一个独立的函数，使用参数来实现该功能。代码如下： function OpenTab(title,url,icon){ $("#tabs").tabs('add',{ title: title, content: '<iframe style="width:100%;height:100%;" scrolling="auto" frameborder="0" src="' + url + '"></iframe>', closable: true, icon: icon }); } 　　当然，我们还要考虑到标签重复打开的问题，而且组织标签内容 content 的代码在这里也不多美观，可以独立出来，这里我们修改代码，如下： /* 打开一个标签 */function OpenTab(title, url, icon){/** 如果这个标题的标签存在，则选择该标签否则添加一个标签到标签组*/if($("#tabs").tabs('exists', title)){ $("#tabs").tabs('select', title); }else{ $("#tabs").tabs('add',{ title: title, content: createTabContent(url), closable: true, icon: icon }); } }/* 生成标签内容 */function createTabContent(url){return '<iframe style="width:100%;height:100%;" scrolling="auto" frameborder="0" src="' + url + '"></iframe>';} 　　这样，我们就可以将这段JS代码保存到一个单独的 JS 文件中，在需要使用的页面引用即可。（这里命名为tabs.js）　　然后，我们回到 untitled.html 页面，在页面左侧添加几个超链接。然后编写代码，在单击这几个超链接的时候获取超链接标签的相应属性，并在 Tabs 中打开一个新的 Tab。代码如下： <!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>EasyUI Demo</title><link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css"/><link rel="stylesheet" type="text/css" href="js/themes/icon.css"/><script type="text/javascript" src="js/jquery-1.6.min.js"></script><script type="text/javascript" src="js/jquery.easyui.min.js"></script><script type="text/javascript" src="js/tabs.js"></script><script type="text/javascript">$(function(){ $("#menu a").click(function(){var title=$(this).text();var url=$(this).attr("rel");var icon=$(this).attr("icon"); OpenTab(title,url,icon);return false; //使超链接的单击事件失效 });});</script><style></style></head><body class="easyui-layout" ><div region="north" style="height:80px;"><h1>***管理系统</h1></div><div region="west" split="true" style="width:220px;" title="导航菜单"><div id="menu"><a href="#" rel="http://www.baidu.com">百度搜索</a><br /><a href="#" rel="http://www.google.com">Google搜索</a><br /><a href="#" rel="http://www.cnblogs.com">cnblogs</a><br /></div></div><div region="center"><div id="tabs" class="easyui-tabs" fit="true" border="false"><div title="欢迎使用"><h1 style="font-size: 24px;">asdfasd</h1><h1 style="font-size: 24px;"></h1></div></div></div></body></html> 　　运行该页面，然后单击左侧的“百度搜索”链接，打开百度，然后再单击 “cnblogs”链接，打开cnblogs，然后再次单击“百度搜索”链接，Tabs 切换到“百度搜索”标页面中，如图：

发表了文章 2016-02-26

黑客帝国效果

<!DOCTYPE html> <html> <head>  <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="c"></canvas> <script> var c=document.getElementById("c"); var ctx=c.getContext("2d"); c.width=window.innerWidth; c.height=window.innerHeight; // ctx.fillRect(0,0,100,100); // a,b,c,d分别代表x方向偏移,y方向偏移,宽，高 var string1 = "abcdefghijklmnopqrstuvwxyz"; string1.split(""); var fontsize=20; columns=c.width/fontsize; var drop = []; for(var x=0;x<columns;x++) { drop[x]=0; } function drap(){ ctx.fillStyle="rgba(0,0,0,0.07)"; ctx.fillRect(0,0,c.width,c.height); ctx.fillStyle="#0F0"; ctx.font=fontsize+"px arial"; for(var i=0;i<drop.length;i++){ var text1=string1[Math.floor(Math.random()*string1.length)]; ctx.fillText(text1,i*fontsize,drop[i]*fontsize); drop[i]++; if(drop[i]*fontsize>c.height&&Math.random()>0.9){//90%的几率掉落 drop[i]=0; } } } setInterval(drap,20); </script> </body> </html>

发表了文章 2016-02-26

js冒泡

什么是JS事件冒泡？：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。如何来阻止Jquery事件冒泡？通过一个小例子来解释 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5"%> <!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 runat="server"> <title>Porschev---Jquery 事件冒泡</title> <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div id="divOne" onclick="alert('我是最外层');"> <div id="divTwo" onclick="alert('我是中间层！')"> <a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com" onclick="alert('我是最里层！')">点击我</a> </div> </div> </form> </body> </html> 比如上面这个页面，分为三层：divOne是第外层，divTwo中间层，hr_three是最里层; 他们都有各自的click事件，最里层a标签还有href属性。运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层 ---->然后再链接到百度. 这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。事件冒泡过程（以标签ID表示）：hr_three----> divTwo----> divOne 。从最里层冒泡到最外层。如何来阻止? 1.event.stopPropagation(); <script type="text/javascript"> $(function() { $("#hr_three").click(function(event) { event.stopPropagation(); }); }); <script> 再点击“点击我”，会弹出：我是最里层，然后链接到百度 2.return false; 如果头部加入的是以下代码 <script type="text/javascript"> $(function() { $("#hr_three").click(function(event) { return false; }); }); <script> 再点击“点击我”，会弹出：我是最里层，但不会执行链接到百度页面由此可以看出： 1.event.stopPropagation(); 事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转） 2.return false; 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）还有一种有冒泡有关的： 3.event.preventDefault(); 如果把它放在头部A标签的click事件中，点击“点击我”。会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

发表了文章 2016-02-26

彻底理解js中this

相关博文：http://blog.csdn.net/libin_1/article/details/49996815 彻底理解js中this的指向，不必硬背。　　首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），那么接下来我会深入的探讨这个问题。　　为什么要学习this？如果你学过函数式编程，面向对象编程，那你肯定知道干什么用的，如果你没有学过，那么暂时可以不用看这篇文章，当然如果你有兴趣也可以看看，毕竟这是js中必须要掌握的东西。例子1： function a(){ var user = "追梦子"; console.log(this.user); //undefined console.log(this); //Window } a(); 按照我们上面说的this最终指向的是调用它的对象，这里的函数a实际是被Window对象所点出来的，下面的代码就可以证明。 function a(){ var user = "追梦子"; console.log(this.user); //undefined console.log(this);　　//Window } window.a(); 和上面代码一样吧，其实alert也是window的一个属性，也是window点出来的。例子2： var o = { user:"追梦子", fn:function(){ console.log(this.user); //追梦子 } } o.fn(); 　　这里的this指向的是对象o，因为你调用这个fn是通过o.fn()执行的，那自然指向就是对象o，这里再次强调一点，this的指向在函数创建的时候是决定不了的，在调用的时候才能决定，谁调用的就指向谁，一定要搞清楚这个。其实例子1和例子2说的并不够准确，下面这个例子就可以推翻上面的理论。如果要彻底的搞懂this必须看接下来的几个例子本文出处：追梦子博客例子3： var o = { user:"追梦子", fn:function(){ console.log(this.user); //追梦子 } } window.o.fn(); 　　这段代码和上面的那段代码几乎是一样的，但是这里的this为什么不是指向window，如果按照上面的理论，最终this指向的是调用它的对象，这里先说个而外话，window是js中的全局对象，我们创建的变量实际上是给window添加属性，所以这里可以用window点o对象。　　这里先不解释为什么上面的那段代码this为什么没有指向window，我们再来看一段代码。 var o = { a:10, b:{ a:12, fn:function(){ console.log(this.a); //12 } } } o.b.fn(); 　　这里同样也是对象o点出来的，但是同样this并没有执行它，那你肯定会说我一开始说的那些不就都是错误的吗？其实也不是，只是一开始说的不准确，接下来我将补充一句话，我相信你就可以彻底的理解this的指向的问题。　　情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题，你想了解可以自行上网查找。　　情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。　　情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象，例子3可以证明，如果不相信，那么接下来我们继续看几个例子。 var o = { a:10, b:{ // a:12, fn:function(){ console.log(this.a); //undefined } } } o.b.fn(); 尽管对象b中没有属性a，这个this指向的也是对象b，因为this只会指向它的上一级对象，不管这个对象中有没有this要的东西。还有一种比较特殊的情况，例子4： var o = { a:10, b:{ a:12, fn:function(){ console.log(this.a); //undefined console.log(this); //window } } } var j = o.b.fn; j(); 这里this指向的是window，是不是有些蒙了？其实是因为你没有理解一句话，这句话同样至关重要。　　this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的，例子4中虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window，这和例子3是不一样的，例子3是直接执行了fn。　　this讲来讲去其实就是那么一回事，只不过在不同的情况下指向的会有些不同，上面的总结每个地方都有些小错误，也不能说是错误，而是在不同环境下情况就会有不同，所以我也没有办法一次解释清楚，只能你慢慢地的去体会。构造函数版this： function Fn(){ this.user = "追梦子"; } var a = new Fn(); console.log(a.user); //追梦子　　这里之所以对象a可以点出函数Fn里面的user是因为new关键字可以改变this的指向，将这个this指向对象a，为什么我说a是对象，因为用了new关键字就是创建一个对象实例，理解这句话可以想想我们的例子3，我们这里用变量a创建了一个Fn的实例（相当于复制了一份Fn到对象a里面），此时仅仅只是创建，并没有执行，而调用这个函数Fn的是对象a，那么this指向的自然是对象a，那么为什么对象Fn中会有user，因为你已经复制了一份Fn函数到对象a中，用了new关键字就等同于复制了一份。　　除了上面的这些以外，我们还可以自行改变this的指向，关于自行改变this的指向请看JavaScript中call,apply,bind方法的总结这篇文章，详细的说明了我们如何手动更改this的指向。更新一个小问题当this碰到return时 function fn() { this.user = '追梦子'; return {}; } var a = new fn; console.log(a.user); //undefined 再看一个 function fn() { this.user = '追梦子'; return function(){}; } var a = new fn; console.log(a.user); //undefined 再来 function fn() { this.user = '追梦子'; return 1; } var a = new fn; console.log(a.user); //追梦子 function fn() { this.user = '追梦子'; return undefined; } var a = new fn; console.log(a.user); //追梦子什么意思呢？　　如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。 function fn() { this.user = '追梦子'; return undefined; } var a = new fn; console.log(a); //fn {user: "追梦子"} 　　还有一点就是虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊。 function fn() { this.user = '追梦子'; return null; } var a = new fn; console.log(a.user); //追梦子知识点补充：　　1.在严格版中的默认的this不再是window，而是undefined。　　2.new操作符会改变函数this的指向问题，虽然我们上面讲解过了，但是并没有深入的讨论这个问题，网上也很少说，所以在这里有必要说一下。 function fn(){ this.num = 1; } var a = new fn(); console.log(a.num); //1 　　为什么this会指向a？首先new关键字会创建一个空的对象，然后会自动调用一个函数apply方法，将this指向这个空对象，这样的话函数内部的this就会被这个空的对象替代。

发表了文章 2016-02-25

jQuery判断checkbox，radio是否选中的3种方法

jQuery判断checkbox是否选中的3种方法方法一： if ($("#checkbox-id").get(0).checked) { // do something } 方法二： if($('#checkbox-id').is(':checked')) { // do something } 方法三： if ($('#checkbox-id').attr('checked')) { // do something } function checkInfo(){ $("input[name='org3.otherValues']").each( function(){ if($(this).get(0).checked){ return true; } }); var org3_ids=$("#org3_ids").val(); if(org3_ids!=''){ return true; } alertMsg.warn("请选择接收人！"); return false; } jquery如何判断checkbox（复选框）是否被选中谁都知道在html 如果一个复选框被选中是 checked="checked"。但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked 所以很多朋友判断 if($("#id").attr("checked")=="true") 这个是错误的，其实应该是 if($("#id").attr("checked")==true) 例子里面包括了一下几个功能。 <input type="button" id="btn1" value="全选"> <input type="button" id="btn2" value="取消全选"> <input type="button" id="btn3" value="选中所有奇数"> <input type="button" id="btn4" value="反选"> <input type="button" id="btn5" value="获得选中的所有值"> 代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <SCRIPT LANGUAGE="JavaScript" src="http://www.cnjquery.com/demo/jquery.js"></script> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <form name="form1" method="post" action=""> <input type="button" id="btn1" value="全选"> <input type="button" id="btn2" value="取消全选"> <input type="button" id="btn3" value="选中所有奇数"> <input type="button" id="btn4" value="反选"> <input type="button" id="btn5" value="获得选中的所有值"> <br> <input type="checkbox" name="checkbox" value="checkbox1"> checkbox1 <input type="checkbox" name="checkbox" value="checkbox2"> checkbox2 <input type="checkbox" name="checkbox" value="checkbox3"> checkbox3 <input type="checkbox" name="checkbox" value="checkbox4"> checkbox4 <input type="checkbox" name="checkbox" value="checkbox5"> checkbox5 <input type="checkbox" name="checkbox" value="checkbox6"> checkbox6 <input type="checkbox" name="checkbox" value="checkbox7"> checkbox7 <input type="checkbox" name="checkbox" value="checkbox8"> checkbox8 </form> JQuery判断radio是否选中，获取选中值 <!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>JQuery radio</title> <script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script> <script type="text/javascript" language="javascript"> /*------判断radio是否有选中，获取选中的值--------*/ $(function(){ $("#btnSubmit").click(function(){ var val=$('input:radio[name="sex"]:checked').val(); if(val==null){ alert("什么也没选中!"); return false; } else{ alert(val); } var list= $('input:radio[name="list"]:checked').val(); if(list==null){ alert("请选中一个!"); return false; } else{ alert(list); } }); }); </script> </head> <body> <form id="form1" > <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 <br /> <input type="radio" name="list" value="十分满意" />十分满意 <input type="radio" name="list" value="满意" />满意 <input type="radio" name="list" value="不满意" />不满意 <input type="radio" name="list" value="非常差" />非常差 <br /> <input type="submit" value="submit" id="btnSubmit" /> </form> </body> </html>

发表了文章 2016-02-24

jQuery显示隐藏密码插件jquery.toggle-password演示

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>jQuery显示隐藏密码插件jquery.toggle-password演示_dowebok</title> <style> * { margin: 0; padding: 0; } body { font: 14px Arial, sans-serif; color: red; } input { font-family: Arial, sans-serif; } .login { width: 270px; margin: 0 auto; padding: 10px 70px; background-color: pink; border: 1px solid green; border-radius: 32px; } .login ul { list-style-type: none; } .login li { padding: 10px 0; overflow: hidden; } .login .li3, .login .li5 { text-align: right; font-size: 12px; border: 1px solid red; padding: 10px; } .login .li3 input { /*width: 13px; height: 13px;*/ margin: 0 3px 0 20px; vertical-align: middle; border: 11px solid blue; } .login .submit { display: block; width: 100%; padding: 16px 0; border: 1px solid red; color: green; background-color: greenyellow; cursor: pointer; border-radius: 10px; } #email, #password { width: 214px; padding: 5px; border: 1px solid red; } .forgot { color: blue; } </style> <script src="js/jquery-1.9.0.min.js"></script> <script src="js/jquery.toggle-password.js"></script> <script> $(function() { $('#password').togglePassword({ el: '#togglePassword' }); }); </script> </head> <body> <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery显示隐藏密码插件jquery.toggle-password演示</h1> <div class="login"> <ul> <li><span><label for="email">邮箱：</label></span> <input id="email" type="text"> </li> <li><span><label for="password">密码：</label></span> <input id="password" type="password"> </li> <li class="li3"> <input type="checkbox" id="remember"> <label for="remember">记住密码</label> <input type="checkbox" id="togglePassword"> <label for="togglePassword">显示密码</label> </li> <li class="li4"> <input class="submit" type="submit" value="登录"> </li> <li class="li5"><a class="forgot" href="javascript:">忘记密码？</a></li> </ul> </div> </body> </html> jquery.toggle-password.js： (function ( $ ) { $.fn.togglePassword = function( options ) { var s = $.extend( $.fn.togglePassword.defaults, options ), input = $( this ); $( s.el ).bind( s.ev, function() { "password" == $( input ).attr( "type" ) ? $( input ).attr( "type", "text" ) : $( input ).attr( "type", "password" ); }); }; $.fn.togglePassword.defaults = { ev: "click" }; }( jQuery ));

发表了文章 2016-02-24

垂直竖向，水平滚动插件插件

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>jQuery内容滚动/滑动插件BoxSlider演示-垂直/竖向_dowebok</title> <style> .box-slider { width: 900px; margin: 0 auto;} .box-slider .box-slider-seta-up { display: block; height: 30px; margin: 0 5px; background: url(img/seta-up.png) no-repeat center center #674172;} .box-slider .box-slider-seta-down { display: block; height: 30px; margin: 0 5px; background: url(img/seta-down.png) no-repeat center center #674172;} .box-slider .box-slider-content { height: 420px; margin: 10px 0; overflow: hidden;} .box-slider .box-slider-move { position: relative; top: 0; left: 0;} .box-slider .item { float: left; width: 33.3%;} .box-slider .item span { display: block; height: 200px; background-color: #aea8d3; margin: 5px 5px;} .box-slider .last-item span { background-color: red; text-align: center; font-family: Arial, Helvetica, sans-serif; color: #fff;} .box-slider-move { overflow: hidden; *zoom:1;} </style> </head> <body> <h1>垂直/竖向</h1> <div class="box-slider" id="dowebok"> <a href="#" class="box-slider-seta-up"></a> <div class="box-slider-content"> <div class="box-slider-move"> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item last-item"><span></span></div> </div> </div> <a href="#" class="box-slider-seta-down"></a> </div> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/jquery-boxSlider.js"></script> <script> $(function() { $('#dowebok').boxSlider({ orientation: 'vertical', }); }); </script>  <style> body { margin: 0; border-left: 200px solid #ccc;} h1 { margin: 40px 0; font: 32px "Microsoft Yahei"; text-align: center;} .menu { position: absolute; left: 0; top: 0; bottom: 0; width: 200px; padding-top: 100px; font-family: Consolas,arial,"宋体"; background-color: #ccc;} .menu a { display: block; height: 40px; margin: 0 0 1px 2px; padding-left: 10px; line-height: 40px; font-size: 14px; color: #333; text-decoration: none;} .menu a:hover { background-color: #eee;} .menu .cur { color: #000; background-color: #fff !important;} .vad { margin: 50px 0 10px; font-family: Consolas,arial,宋体,sans-serif; text-align:center;} .vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;} .vad a:hover { color: #fff; background-color: #000;} .thead { width: 728px; height: 90px; margin: 0 auto; border-bottom: 40px solid transparent;} </style> <p class="vad"> <a href="http://www.dowebok.com/" target="_blank">dowebok.com</a> <a href="http://www.dowebok.com/183.html" target="_blank">说明</a> <a href="http://www.dowebok.com/183.html" target="_blank">下载</a> </p> <div class="menu"> <a class="cur" href="index.html">1、垂直/竖向</a> <a href="index2.html">2、水平/横向</a> <a href="index3.html">3、回调函数</a> </div> </body> </html>

发表了文章 2016-02-24

轻巧的jQuery提示框插件Tipso演示

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>轻巧的jQuery提示框插件Tipso演示_dowebok</title> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/tipso.min.js"></script> <link rel="stylesheet" href="css/tipso.min.css"> <style> * { margin: 0; padding: 0; } body { font-family: "Microsoft Yahei"; } h1 { padding: 45px 0; font: 32px "Microsoft Yahei"; text-align: center; border: 1px solid red; } .dowebok { width: 500px; margin: 30px auto 0; border: 1px solid red; } .dowebok h2 { padding: 20px; font-size: 16px; font-weight: 400; background-color: #f5f5f5; border: 1px solid blue; } .dowebok .inner { padding: 100px; text-align: center; border: 3px solid black; } .dowebok p { position: relative; font-size: 14px; color: blueviolet; border: 1px solid red; height: 30px; } .dowebok input { position: absolute; top: 0px; left: 20px; margin-left: 40px; padding: 5px; border: 1px solid green; font-family: "Microsoft Yahei"; } .dowebok a{ margin-top: 4px; float: right; margin-right: 30px; } img{ border: 2px solid blueviolet; } </style> </head> <body> <h1>轻巧的jQuery提示框插件Tipso演示</h1> <div class="dowebok"> <h2>1、默认</h2> <div class="inner"><span id="tip1" data-tipso="dowebok.com1">Tipso</span></div> </div> <div class="dowebok"> <h2>2、左边显示</h2> <div class="inner"><span id="tip2" data-tipso="dowebok.com">Tipso</span></div> </div> <div class="dowebok"> <h2>3、背景颜色</h2> <div class="inner"><span id="tip3" data-tipso="dowebok.com">Tipso</span></div> </div> <div class="dowebok"> <h2>4、使用title属性</h2> <div class="inner"><span id="tip4" title="内容来自 title 属性">Tipso</span></div> </div> <div class="dowebok"> <h2>5、单击显示/隐藏</h2> <div class="inner"> <span id="tip5" data-tipso="dowebok">Tipso</span> <p><a id="btn5" href="javascript:">显示</a></p> </div> </div> <div class="dowebok"> <h2>6、更新内容</h2> <div class="inner"> <span id="tip6" data-tipso="dowebok.com2">Tipso</span> <p> <input type="text"><a id="btn6" href="javascript:">更新</a> </p> </div> </div> <div class="dowebok"> <h2>7、在图片上使用</h2> <div class="inner"> <img id="tip7" src="images/tipso.png" alt="111" data-tipso="dowebok.com"> </div> </div> <div class="dowebok"> <h2>8、回调函数</h2> <div class="inner"> <span id="tip8" data-tipso="dowebok.com">Tipso</span> <p>状态：<em id="status"></em></p> </div> </div> <script> $(function() { // 1 $('#tip1').tipso({ useTitle: false }); // 2 $('#tip2').tipso({ useTitle: false, position: 'bottom' // position: 'left' //right,top }); // 3 $('#tip3').tipso({ useTitle: false, background: 'tomato' }); // 4 $('#tip4').tipso(); // 5 $('#tip5').tipso({ useTitle: false }); $('#btn5').on({ click: function(e) { if ($(this).text() == '显示') { $(this).text('隐藏'); $('#tip5').tipso('show'); } else { $(this).text('显示'); $('#tip5').tipso('hide'); } e.preventDefault(); } }); // 6 $('#tip6').tipso({ useTitle: false }); $('#btn6').on('click', function() { var $val = $(this).prev().val(); if ($val) { $('#tip6').tipso('update', 'content', $val); } }); // 7 $('#tip7').tipso({ useTitle: false }); // 8 $('#tip8').tipso({ useTitle: false, onBeforeShow: function() { alert(1); $('#status').html('beforeShow'); }, onShow: function() { alert(2); $('#status').html('show'); }, onHide: function() { $('#status').html('hide'); alert(3); } }); }); </script> <p class="vad"> <a href="http://www.dowebok.com/" target="_blank">dowebok.com</a> <a href="http://www.dowebok.com/147.html" target="_blank">说明</a> <a href="http://www.dowebok.com/147.html" target="_blank">下载</a> </p>  <style> .vad { margin: 50px 0 30px; font-family: Consolas, arial, 宋体, sans-serif; text-align: center; } .vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align: center; color: #eee; text-decoration: none; background-color: #222; } .vad a:hover { color: #fff; background-color: #000; } </style> </body> </html>

发表了文章 2016-02-24

让div左右对齐自适应高度的网页特效（常看）

原文：http://www.360doc.com/content/13/0723/09/8445249_301885130.shtml <!DOCTYPE HTML > <html> <head> <meta charset="utf-8"> <style type="text/css"> .box { border:1px solid #006699; width:500px; overflow: hidden; } .box .left { float:left; width:30%; background:red; padding-bottom:3000px; margin-bottom:-3000px; } .box .right { float:right; width:70%; background:green; padding-bottom:3000px; margin-bottom:-3000px; } </style> </head> <body> <div class="box"> <div class="left"> <h1>wo</h1> <h1>wo</h1> <h1>wo</h1> </div> <div class="right"> <h1>wo</h1> </div> </div> </body> </html>

发表了文章 2016-02-23

基于layer mobile手机端弹出框，询问框（PC端推荐layer和artDialog：http://download.csdn.net/download/cometwo/9437895）

layer mobile是为移动设备（手机、平板等webkit内核浏览器/webview）量身定做的弹层支撑，采用Native JavaScript编写，完全独立于PC版的layer，您需要按照场景选择使用。官方地址：http://layer.layui.com/mobile/ 下载地址：http://download.csdn.net/detail/cometwo/9441001 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <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 content="email=no" name="format-detection"> <meta http-equiv="refresh" content="100"> <title>手机</title> <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script> <link rel="stylesheet" href="css/layer.css" /> <script type="text/javascript" src="js/fastclick.js"></script> <script type="text/javascript" src="js/layer.js"></script> <style type="text/css"> input { width: auto; padding: 10px; line-height: 20px; background: red; border: 1px solid blue; margin: 10px; } </style> <script type="text/javascript"> FastClick.attach(document.body); $(function() { $('.btn1').click(function() { layer.open({ content: '您好', anim: true, time: 2 //2秒后自动关闭 }); }); $('.btn2').click(function() { layer.open({ content: '通过style设置你想要的样式', style: 'background-color:#09C1FF; color:#fff; border:none;margin: 0px;', time: 2 }); }); $('.btn3').click(function() { layer.open({ title: [ '我是标题', 'background-color:#fff; color:#000;' ], cancel: function() { layer.open({ content: '你点了x', time: 1 }); }, btn: ['确认', '取消'], shadeClose: false, //默认：true，是否点击遮罩时关闭层 yes: function() { layer.open({ content: '你点了确认', time: 1 }); }, no: function() { layer.open({ content: '你选择了取消', time: 1 }); }, content: '标题风格任你定义。。' }); }); $('.btn4').click(function() { layer.open({ // title: [ // '我是标题', // 'background-color:#8DCE16; color:#fff;' // ], content: '通过style设置你想要的样式', btn: ['OK'] }); }); $('.btn5').click(function() { layer.open({ content: '你是想确认呢，还是想取消呢？你是想确认呢，还是想取消呢？你是想确认呢，还是想取消呢？', btn: ['确认', '取消'], shadeClose: false, //默认：true，是否点击遮罩时关闭层 yes: function() { layer.open({ content: '你点了确认', time: 1 }); }, no: function() { layer.open({ content: '你选择了取消', time: 1 }); } }); }); $('.btn6').click(function() { layer.open({ title: '信息', content: '移动版和PC版不能同时使用在同一页面。' }); }); $('.btn7').click(function() { layer.open({ title: '提示', content: '您确定要刷新一下本页面吗？', btn: ['嗯', '不要'], yes: function(index) { location.reload(); layer.close(index); } }); }); $('.btn8').click(function() { layer.open({ type: 1, content: '<img src="img/layer-mobile.png">' }) }); $('.btn9').click(function() { layer.open({ type: 1, content: '可传入任何内容，支持html。一般用于手机页面中', anim: 0, style: 'position:fixed; bottom:0; left:0; width:100%; height:150px; padding:10px 30px; border:none;color:red' }); }); $('.btn10').click(function() { layer.open({ type: 2 //,shade: false , time: 5 //,content: '加载测试中…' }); }); }) </script> </head> <body> <input type="button" class="btn1" value="弹出框1" /> <input type="button" class="btn2" value="弹出框2" /> <input type="button" class="btn3" value="弹出框3" /> <input type="button" class="btn4" value="弹出框4" /> <input type="button" class="btn5" value="弹出框5" /> <input type="button" class="btn6" value="信息框" /> <input type="button" class="btn7" value="询问框" /> <input type="button" class="btn8" value="二维码" /> <input type="button" class="btn9" value="页面层" /> <input type="button" class="btn10" value="加载条" /> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <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 content="email=no" name="format-detection"> <meta http-equiv="refresh" content="100"> <title>手机</title> <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script> <link rel="stylesheet" href="css/layer.css" /> <script type="text/javascript" src="js/fastclick.js"></script> <script type="text/javascript" src="js/layer.js"></script> <style type="text/css"> input { width: auto; padding: 10px; line-height: 20px; background: red; border: 1px solid blue; margin: 10px; } </style> <script type="text/javascript"> FastClick.attach(document.body); $(function() { $('.btn1').click(function() { layer.open({ content: '您好', anim: true, time: 2 //2秒后自动关闭 }); }); $('.btn2').click(function() { layer.open({ content: '通过style设置你想要的样式', style: 'background-color:#09C1FF; color:#fff; border:none;margin: 0px;', time: 2 }); }); $('.btn3').click(function() { layer.open({ title: [ '我是标题', 'background-color:#fff; color:#000;' ], cancel: function() { layer.open({ content: '你点了x', time: 1 }); }, btn: ['确认', '取消'], shadeClose: false, //默认：true，是否点击遮罩时关闭层 yes: function() { layer.open({ content: '你点了确认', time: 1 }); }, no: function() { layer.open({ content: '你选择了取消', time: 1 }); }, content: '标题风格任你定义。。' }); }); $('.btn4').click(function() { layer.open({ // title: [ // '我是标题', // 'background-color:#8DCE16; color:#fff;' // ], content: '通过style设置你想要的样式', btn: ['OK'] }); }); $('.btn5').click(function() { layer.open({ content: '你是想确认呢，还是想取消呢？你是想确认呢，还是想取消呢？你是想确认呢，还是想取消呢？', btn: ['确认', '取消'], shadeClose: false, //默认：true，是否点击遮罩时关闭层 yes: function() { layer.open({ content: '你点了确认', time: 1 }); }, no: function() { layer.open({ content: '你选择了取消', time: 1 }); } }); }); $('.btn6').click(function() { layer.open({ title: '信息', content: '移动版和PC版不能同时使用在同一页面。' }); }); $('.btn7').click(function() { layer.open({ title: '提示', content: '您确定要刷新一下本页面吗？', btn: ['嗯', '不要'], yes: function(index) { location.reload(); layer.close(index); } }); }); $('.btn8').click(function() { layer.open({ type: 1, content: '<img src="img/layer-mobile.png">' }) }); $('.btn9').click(function() { layer.open({ type: 1, content: '可传入任何内容，支持html。一般用于手机页面中', anim: 0, style: 'position:fixed; bottom:0; left:0; width:100%; height:150px; padding:10px 30px; border:none;color:red' }); }); $('.btn10').click(function() { layer.open({ type: 2 //,shade: false , time: 5 //,content: '加载测试中…' }); }); }) </script> </head> <body> <input type="button" class="btn1" value="弹出框1" /> <input type="button" class="btn2" value="弹出框2" /> <input type="button" class="btn3" value="弹出框3" /> <input type="button" class="btn4" value="弹出框4" /> <input type="button" class="btn5" value="弹出框5" /> <input type="button" class="btn6" value="信息框" /> <input type="button" class="btn7" value="询问框" /> <input type="button" class="btn8" value="二维码" /> <input type="button" class="btn9" value="页面层" /> <input type="button" class="btn10" value="加载条" /> </body> </html>

发表了文章 2016-02-22

JS中的“！！”

var o={flag:true}; var test=!!o.flag;//等效于var test=o.flag||false; alert(test); 由于对null与undefined用!操作符时都会产生true的结果，所以用两个感叹号的作用就在于，如果明确设置了o中flag的值（非 null/undefined/0""/等值），自然test就会取跟o.flag一样的值；如果没有设置，test就会默认为false，而不是 null或undefined。

发表了文章 2016-02-22

初识js中的闭包

今天看了关于js闭包方面的文章，还是有些云里雾里，对于一个菜鸟来说，学习闭包确实有一定的难度，不说别的，能够在网上找到一篇优秀的是那样的不易。　　当然之所以闭包难理解，个人觉得是基础知识掌握的不牢，因为闭包牵扯到一些前面的东西，比如作用域\等等，如果连基本的作用域都没有弄清楚，自然不可能搞懂闭包，还有就是对js的实践比较少，因为你根本就不知道什么时候要用这东西，自然谈不上对闭包的深刻理解。　　今天我就简单的说说我目前所理解的闭包，当然可能不完全正确，但是我相信会给你一定的启发。　　首先我们来谈谈js中的变量，如果你不知道我为什么要说这些，那么你根本没有掌握js的基础，建议回头复习。 js中分：全局变量和局部变量　　全局变量：可以在任意位置访问的量就叫全局变量　　　　 1 var age = 20; 2 function a(){ 3 console.log(age); >>20 4 } 5 a(); 　　局部变量：函数中用var定义的变量，只能在函数中访问这个变量，函数外部访问不了。 1 function a(){ 2 var age = 20; 3 } 4 a(); 5 console.log(age); >> Uncaught ReferenceError: age is not defined 注意点1：在函数中如果不使用var定义变量那么js引擎会自动添加成全局变量。注意点2：全局变量从创建的那一刻起就会一直保存在内存中，除非你关闭这个页面，局部变量当函数运行完以后就会销毁这个变量，假如有多次调用这个函数它下一次调用的时候又会重新创建那个变量，既运行完就销毁，回到最初的状态，简单来说局部变量是一次性的，用完就扔，下次要我再重新创建。函数的相关知识点： 1. 一个函数内可以嵌套多个函数　　 2. 函数里面的子函数可以访问它上级定义的变量，注意不只是一级，如果上级没有会继续往上级找，直到找到为止，如果找到全局变量到找不到就会报错。　　　　 1 function a(){ 2 var name = "追梦子"; 3 function b(){ 4 console.log(name); >> "追梦子" 5 } 6 b(); 7 } 8 a(); 　　 3. 函数的另外一种调用形式，你可以把它叫做自调用，自己调用自己，达到自执行的效果。　　　 1 var a = 0; 2 (function(){ 3 console.log(++a); >>1 4 })() 这种方式用()把内容包裹起来，后面的（）表示执行这个函数，可能你会问为什么要把函数包起来，如果不包裹起来，js会把它当作函数声明来处理，如果包裹起来就是表达式，还没有看懂就上网查吧。开始我们正式闭包部分---------------------------- 币包 ---------------像钱包一样的东西，可以把东西包裹起来---------- 首先我们来看看为什么需要学习闭包，加以理解 -- 0 v 0- - 1 function a(){ 2 var num = 0; 3 console.log(++num); 4 } 5 a(); >>1 6 a(); >>1 上面代码输出了两次1，为什么呢？如果你有看我上面的关于变量部分肯定能够想到个大概。　　前面我们说过了函数执行完以后，里面的变量（即局部变量）就会销毁，下一次运行又会重新创建那个变量，所以虽然你第一次++num了但是这个变量在第一次执行完毕以后就被销毁了。那么我们怎么样才能确保第一次的变量不被销毁，那么就需要我们的闭包出场了。温馨提示：JavaScript中有回收机制，函数没有被引用执行完以后这个函数的作用域就会被销毁，如果一个函数被其他变量引用，这个函数的作用域将不会被销毁，（简单来说就是函数里面的变量会被保存下来，你可以理解成全局变量。） …………………………………………………………………………………… 当当当 ................. 下面有请我们的币包同志 function a(){ var aa = 0; function b(){ aa ++; console.log(aa); } return b; } var ab = a(); ab(); //1 ab(); //2 看到了吧里面的变量的值没有被销毁，因为函数a被外部的变量ab引用，所以变量aa没有被回收。如果某个函数被它的父函数之外的一个变量引用，就形成了一个闭包还有一种更为常用的闭包写法 var bi = (function(){ var a = 0; function b(){ a ++; console.log(a); } return b; })(); bi(); //1 bi(); //2 bi(); //3 执行过程分析：　　首先把一个自执行函数赋值给了bi，这个自执行函数运行完成以后就bi的值就变成了 function b(){ a ++; console.log(a); } 　　因为我们在上面的代码return回去了b，然后因为这个自执行函数被bi引用所以里面的变量a并没有因为这个自执行函数执完而销毁，而是保存到了内存中，所以我们多次打印bi（）就成了1、2、3 下面我来说一个闭包的使用场景吧。　　没有使用闭包的版本 window.onload = function(){ var ul = document.getElementsByTagName("ul")[0]; var li = ul.getElementsByTagName("li"); for(var i=0;i<li.length;i++){ li[i].onclick = function(){ console.log(i); //不管我怎么点都是返回6 } } } 　　使用了闭包的版本 window.onload = function(){ var ul = document.getElementsByTagName("ul")[0]; var li = ul.getElementsByTagName("li"); for(var i=0;i<li.length;i++){ (function(i){ li[i].onclick = function(){ console.log(i); //点击第几个返回第几个 } })(i) } } 、、、、、如果你不理解这个，你只要这样子用就能够达到效果。这也只是简单的介绍了一下，后面将会在闭包的高级部分讲解。如果你对闭包有更深的理解可以pm我。

发表了文章 2016-02-22

jquery中事件委派代码分析以及jQuery中delegate和on的用法与区别详细解析

jquery中事件委派我们会使用到delegate与live方法了，下面我就以delegate与live方法为例子给各位分析一下jquery 事件委派的例子吧，希望例子能帮助到各位朋友。什么是jquery中的事件委派？在jquery中有一个很重要的概念——事件委派，相信很多搞前端开发的人都听说过，零度逍遥本来对此不是十分理解，但经过一个高人的指点后，才发现这个功能还是蛮强大的，今天就给大家分享一下。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。说的有点抽象，按照惯例，还是举个例子说明：代码如下复制代码 <ul class="list"> <li>11111<li> <li>222222<li> <li>3333<li> <li>4444<li> </ul> 这是一个ul，里面包含4个li，如果想要给li加上点击事件，弹出一些内容，我们一般这样写： $('.list li').click(function(){ alert(1111); }) 这样当我们点击list里面的任何一个li都可以弹出‘1111’，但这样做有两个弊端： 1.很耗费资源，因为这种方式是给每个li都加上了事件，li的个数少的话还没事，如果li多的话会很耗费资源。 2.如果后期动态添加li，不会拥有这个弹出事件。针对以上问题，可以用事件委派来解决，我们完全可以写出这样一段代码：代码如下复制代码 $(".list").delegate("li", "click", function(){ alert(1111); }); 这个就是jquery的事件委派，有的时候还是很能派上用场的，骚年们，玩起来吧！ .live()与流行的liveQuery插件很像，但有以下几个主要区别： * .live 目前只支持所有事件的子集，支持列表参考上面的说明。 * .live 不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。 * .live 没有"setup"和"cleanup"的过程。因为所有的事件是委派而不是直接绑定在元素上的。 HTML 代码: 代码如下复制代码 <p>Click me!</p> $("p").live("click", function(){ $(this).after("<p>Another paragraph!</p>"); }); 事件委派一次绑定多种事件一次性绑定多个事件，根据事件类别委派相应的操作为了更好地优化上面的代码，可以通过事件委派来修改代码，修改后的代码如下：代码如下复制代码 jQuery(function($) { var $liveTip = $('<div id="livetip"></div>').hide().appendTo('body'); var tipTitle = ''; $('#mytable').bind('mouseover mouseout mousemove', function(event) { var $link = $(event.target).closest('a'); if (!$link.length) { return; } var link = $link[0]; if (event.type == 'mouseover' || event.type == 'mousemove') { $liveTip.css({ top: event.pageY + 12, left: event.pageX + 12 }); }; if (event.type == 'mouseover') { tipTitle = link.title; link.title = ''; $liveTip.html('<div>' + tipTitle + '</div><div>' + link.href + '</div>') .show(); }; if (event.type == 'mouseout') { $liveTip.hide(); if (tipTitle) { link.title = tipTitle; }; }; }); }); 该段代码中一次性地将多个事件绑定到一个待处理的DOM对象之上，在代码的内部通过判断事件的类别来委派不同的处理代码。这样可以避免代码的重复定义，以达到避免时间冗余的效果。事件委派、传递当列表里的一列被点击，新的列被加入列表。如果想让新加入的列也具有相同的事件控制，我们可以使用事件委派，把事件处理方法传递给新的列。代码如下复制代码 $(document).ready(function() { $('#list2').click(function(event) {//注意：这里加入了参数：event var $newLi = $('<li class="special"><button>新按钮</button></li>'); var $tgt = $(event.target); //注意：这里用到target函数 if ($tgt.is('button')) { $tgt.parent().after($newLi); }//这里用到，is()函数来判断当前点击元素的属性，如果是按钮就触发事件。 }); }); 在jQuery1.7中 .delegate()已被.on()取代。对于早期版本，它仍然使用事件委托的最有效手段。在事件绑定和委派，delegate()和on在一般情况下，这两种方法是等效的。 .delegate() 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。复制代码代码如下: // jQuery 1.4.3+ $( elements ).delegate( selector, events, data, handler ); // jQuery 1.7+ $( elements ).on( events, [selector], data, handler ); 例如：.delegate() code: 复制代码代码如下: $("table").delegate("td","click",function(){ alert("hello"); }); .on() code: 复制代码代码如下: $("table").on("click", "td", function() { alert("hi"); }); PS: 两者区别是seleter和events顺序不同 delegate和on方法被选元素的子元素必须是"合法的"子元素。比如复制代码代码如下: $("table").delegate("button","click",function(){...}); $("table").on("click", "p", function(){...}); 就不起作用，因为正常情况下，table子元素应为tr,td... on(events,[selector],[data],fn)，参数[selector]是可选，一个选择器字符串用于过滤器的触发事件的选择器元素的后代。例如：复制代码代码如下: $("table").on("click", ".td1", function() { alert("hi"); }); 过滤class为td1的table子元素而delegate的selector是必需的。浅谈jquery中delegate()与live() delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序例如给id是showspan的div中的span标签添加事件 ? 1 2 3 4 5 6 7 8 9 10 <div id="showspan"><span>showspan**showspan</span></div> <span>outspan</span> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> live() 方法为被选元素附加一个或多个事件处理程序（不能给其子元素添加事件）例如给p标签添加事件 ? 1 2 3 4 5 6 7 8 <p class="showp">pppppppp</p> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> 以上所述就是本文的全部内容了，希望大家能够喜欢。

发表了文章 2016-02-21

自己动手丰衣足食之下拉列表

源代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script> <title>Document</title> <style> .box { font-size: 14px; list-style: none; margin: 15px auto; padding: 0px; width: 1000px; color: white; } .box li { font-size: 14px; float: left; width: 200px; height: 35px; line-height: 35px; text-align: center; cursor: pointer; background: #333; } .box li .pox { list-style: none; margin: 0px; padding: 0px; display: none; color: red; } .box li .pox li{ background: blueviolet; } </style> <script> $(function(){ $('.box li').hover(function(){ $(this).find('.pox').slideDown('normal'); },function(){ $(this).find('.pox').stop().slideUp('normal'); }); }) </script> </head> <body> <ul class="box"> <li>导航列表1 <ul class="pox"> <li> 导航列表11</li> <li>导航列表11</li> <li>导航列表11</li> <li>导航列表11</li> <li>导航列表11</li> </ul> </li> <li>导航列表2 <ul class="pox"> <li>导航列表22</li> <li>导航列表22</li> <li>导航列表22</li> <li>导航列表22</li> <li>导航列表22</li> </ul> </li> <li>导航列表3 <ul class="pox"> <li>导航列表33</li> <li>导航列表33</li> <li>导航列表33</li> <li>导航列表33</li> <li>导航列表33</li> </ul> </li> <li>导航列表4 <ul class="pox"> <li>导航列表44</li> <li>导航列表44</li> <li>导航列表44</li> <li>导航列表44</li> <li>导航列表44</li> </ul> </li> <li>导航列表5 <ul class="pox"> <li>导航列表55</li> <li>导航列表55</li> <li>导航列表55</li> <li>导航列表55</li> <li>导航列表55</li> </ul> </li> </ul> </body> </html> 三级下拉菜单 <!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <title>CSS样式三级下拉菜单</title> <style> @charset "utf-8"; body{margin:0px; padding:0px; font-family:Verdana, Geneva, sans-serif;background: wheat;font-size:12px; color:#FFF;} body a{color:red;} .box{margin:13px auto; padding:0px; width:1000px;} .box ul{margin:0px; padding:0px; list-style:none;} .box ul li{margin:0px 2px 0px 0px; padding:0px; width:120px; height:35px; display:inline; float:left;; border-radius:4px; box-shadow:#000 0px 0px 1px;} .box ul li:hover ul{display:block;} .box ul li a{text-align:center; width:121px; height:37px; line-height:35px; display:block; text-decoration:none;} .box ul li ul{display:none;} .box ul li ul li{margin:0px 0px 2px 0px; padding:0px; background:blue;} .box ul li ul li:hover{background:green;} .box ul li ul li:hover ul{visibility:visible;} .box ul li ul li ul{visibility:hidden; position:relative; top:-37px; left:121px;} .box ul li ul li ul li{background:white;} .box ul li ul li ul li:hover{background:yellow;} </style> </head> <body> <div class="box"> <ul> <li><a href="#">源码爱好者</a> <ul> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">技术文章</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">源码下载</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> </ul> </li> <li><a href="#">广告联系</a> <ul> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> </ul> </li> <li><a href="#">最新更新</a> <ul> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> </ul> </li> <li><a href="#">源代码下载</a> <ul> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> </ul> </li> <li><a href="#">编程技巧</a> <ul> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> </ul> </li> <li><a href="/dll">编程控件</a> <ul> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">电子书籍</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> </ul> </li> <li><a href="#">网页特效</a> <ul> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> <li><a href="#">Two-level menu</a> <ul> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> <li><a href="#">Three-level menu</a></li> </ul> </li> </ul> </li> </ul> </div> </body> </html>

发表了文章 2016-02-21

自己动手丰衣足食之tab选项卡（第一个可拓展轮播图）

下载地址http://download.csdn.net/detail/cometwo/9393614 （用这个）下载地址：http://download.csdn.net/detail/cometwo/9467997 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>tab标签选项卡切换jQuery特效</title> <style> * { margin: 0; padding: 0; list-style: none; } body { font-size: 12px; color: #666; text-align: left; } h1 { text-align: center; border: 1px solid red; } h1 a{ text-decoration: none; } .tabbox { width: 500px; height: 140px; margin: 100px auto; background: #f0f0f0; font-family: '微软雅黑'; border: 1px solid red; } .tabbox .tab { overflow: hidden; background: yellow; } .tabbox .tab a { display: block; padding: 10px 20px; float: left; text-decoration: none; color: blue; } .tabbox .tab a:hover { background: red; color: green; text-decoration: none; } .tabbox .tab a.on { background: red; color: green; text-decoration: none; } .tabbox .content { overflow: hidden; width: 500px; height: 100px; position: relative; } .tabbox .content ul { position: absolute; left: 0; top: 0; width: 500px; height: 100px; } .tabbox .content li { width: 500px; height: 100px; float: left; } .tabbox .content li p { padding: 30px; } </style> </head> <body>  <div class="tabbox"> <div class="tab"> <a href="javascript:;" class="on">tab1</a> <a href="javascript:;">tab2</a> <a href="javascript:;">tab3</a> <a href="javascript:;">tab4</a> </div> <div class="content"> <ul> <li> <p>tab1内容1</p> </li> <li> <p>tab1内容2</p> </li> <li> <p>tab1内容3</p> </li> <li> <p>tab1内容4</p> </li> </ul> </div> </div> <h1><a href="index.html">效果一</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="index2.html">效果二</a></h1> <script src="js/jquery-1.8.3.min.js"></script> <script> $(function() { $('.tabbox .content ul').width(500 * $('.tabbox .content li').length + 'px'); $(".tabbox .tab a").mouseover(function() { $(this).addClass('on').siblings().removeClass('on'); var index = $(this).index(); //检索当前元素的位置是第几个 number = index; //定义全局变量 var distance = -500 * index; $('.tabbox .content ul').stop().animate({ left: distance }); }); var auto = 1; //等于1则自动切换，其他任意数字则不自动切换，轮播图的原理就是这样做的 if (auto == 1) { var number = 0; var maxNumber = $('.tabbox .tab a').length; function autotab() { number++; number == maxNumber ? number = 0 : number; $('.tabbox .tab a:eq(' + number + ')').addClass('on').siblings().removeClass('on'); var distance = -500 * number; $('.tabbox .content ul').stop().animate({ left: distance }); } var tabChange = setInterval(autotab, 3000); //鼠标悬停暂停切换 $('.tabbox').mouseover(function() { clearInterval(tabChange); }); $('.tabbox').mouseout(function() { tabChange = setInterval(autotab, 3000); }); } }); </script>  </body> </html> 拓展：增加滑动选项卡下过http://blog.csdn.net/libin_1/article/details/50379286 源码： <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>实例：jQuery弹性滑动导航菜单</title> <style type="text/css"> body { font-size: 100%; font-family: "Microsoft YaHei", "Arial"; background: #fff; } #nav { position: relative; width: 832px; border: 1px solid green; margin: 100px auto 0 auto; border-bottom: 3px solid #00FFFF; } #nav .nav-menu { height: 50px; } #nav .nav-menu a { display: block; float: left; height: 50px; padding: 0 40px; line-height: 50px; color: black; font-size: 16px; text-decoration: none; } #nav .nav-current { position: absolute; bottom: -3px; height: 3px; overflow: hidden; background: red; } </style> <script id="jquery_172" type="text/javascript" class="library" src="js/jquery-2.1.0.min.js"></script> <script type="text/javascript"> $(function() { (function() { // var $navcur = $(".nav-current"); // var $nav = $("#nav"); // var current = ".current"; var itemW = $("#nav").find(".current").innerWidth(); //默认当前位置宽度 var defLeftW = $("#nav").find(".current").position().left; //默认当前位置Left值 alert(itemW + '' + defLeftW); //添加默认下划线 $(".nav-current").css({ width: itemW, left: defLeftW }); //hover事件 $("#nav").find("a").hover(function() { var index = $(this).index(); //获取滑过元素索引值 var leftW = $(this).position().left; //获取滑过元素Left值 var currentW = $("#nav").find("a").eq(index).innerWidth(); //获取滑过元素Width值 $(".nav-current").stop().animate({ left: leftW, width: currentW }, 300); }, function() { $(".nav-current").stop().animate({ // left: defLeftW, // width: itemW left: leftW, width: currentW //鼠标离开不动 }, 300) }) })(); }); </script> </head> <body> <div id="nav"> <div class="nav-menu"> <a href="#" class="current">首页</a> <a href="#">了解我们</a> <a href="#">产品展示</a> <a href="#">服务报价</a> <a href="#">最新消息</a> <a href="#">联系方式</a> </div> <div class="nav-current"></div> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>鼠标滑过Tab选项卡切换特效</title> <style type="text/css"> /*reset*/ html, body, p, h1, h2, h3, h4, h5, h6, form, input, textarea, select, button, fieldset, legend, img, ul, ol, li, dl, dt, dd, th, td, pre, blockquote { margin: 0; padding: 0 } html { height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased } body { background-color: #eee; color: #666; min-height: 100%; height: auto!important; height: 100% } body, button, input, select, textarea, h1, h2, h3, h4, h5, h6 { font: 12px/1 "宋体", "Microsoft Yahei", arial, simhei } table { border-collapse: collapse; border-spacing: 0 } img, fieldset { border: 0; vertical-align: middle } a { text-decoration: none } a:visited {} a:hover { text-decoration: underline } a:active {} ul, li, ol { list-style: none } strong, b { font-weight: normal } em, i { font-style: normal } iframe { display: block } fieldset { border: 1px solid #c0c0c0; margin: 0 2px 18px; padding: 0.35em 0.625em 0.75em } legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px } sup { vertical-align: text-top } sub { vertical-align: text-bottom } s { text-decoration: none; } /*public*/ .fl { display: inline; float: left } .fr { display: inline; float: right } .cf:after { content: ""; clear: both; display: block; height: 0; overflow: hidden } .cf { zoom: 1 } .pb10 { padding-bottom: 10px } .mt10 { margin-top: 10px } /*main*/ .case { width: 960px; margin: 100px auto; background: #fff; padding: 15px; box-shadow: 0 0 10px #ccc; } .case .title { height: 20px; border-bottom: 3px solid #e7e7e7; padding-bottom: 10px; } .case .title h2 { font-size: 20px; font-family: "microsoft yahei"; } .case .title-list { position: relative; top: 6px; border: 1px solid red; } .case .title-list li { width: 146px; line-height: 20px; text-align: center; float: left; background: palegreen; display: inline; cursor: pointer; } .case .title-list li.on { color: red; font-weight: bold; } .case .title-list p { position: absolute; top: 24px; left: 0px; width: 146px; height: 7px; border-top: 3px solid #ff6600; overflow: hidden; text-align: center; } .case .title-list b { display: inline-block; width: 0; height: 0; margin-top: -3px; border-style: solid dashed dashed dashed; /*画倒三角*/ border-width: 9px; border-color: #ff6600 #fff #fff #fff; /*画倒三角*/ overflow: hidden; zoom: 1; font-size: 0; } .product { height: 268px; position: relative; overflow: hidden; display: none; margin-top: 20px; } .product ul { position: absolute; left: 0px; } .product-wrap .show { display: block; } .product-wrap .product li { float: left; display: inline; margin-left: 13px; background: #f3f3f3; border: 2px solid #fafafa; transition: 0.4s; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; -ms-transition: 0.4s; } .product-wrap .product li.ml0 { margin-left: 0px; } .product-wrap .product li a.imgwrap { display: block; width: 226px; height: 200px; background: #fff; text-align: center; } .product-wrap .product li p { padding-left: 15px; color: #666666; line-height: 22px; } .product-wrap .product li p a { color: #666666; text-decoration: none; } .product-wrap .product li p a:hover { color: #ff6600; text-decoration: none; } </style> <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script> <script type="text/javascript" src="js/zzsc.js"></script> </head> <body> <div class="case"> <div class="title cf"> <h2 class="fl">设计案例</h2> <ul class="title-list fr cf "> <li class="on">LOGO</li> <li>宣传单</li> <li>画册</li> <li>优惠券</li> <li>会员卡</li> <p><b></b></p> </ul> </div> <div class="product-wrap">  <div class="product show"> <ul class="cf"> <li class="ml0"> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/1.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank">站长素材网站logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> <li> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/1.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> <li> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/1.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> <li> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/1.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> </ul> </div>  <div class="product"> <ul class="cf"> <li class="ml0"> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/2.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> <li> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/2.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> <li> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/2.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> <li> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/2.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> </ul> </div>  <div class="product"> <ul class="cf"> <li class="ml0"> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/3.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> <li> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/3.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> <li> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/3.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> <li> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/3.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> </ul> </div>  <div class="product"> <ul class="cf"> <li class="ml0"> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/4.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> <li> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/4.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> <li> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/4.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> <li> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/4.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> </ul> </div>  <div class="product"> <ul class="cf"> <li class="ml0"> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/5.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> <li> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/5.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> <li> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/5.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> <li> <a href="http://www.zzsck.org" target="_blank" class="imgwrap"> <img src="images/5.jpg"> </a> <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p> <p class="pb10">行业类别：艺术摄影,文化体育</p> </li> </ul> </div> </div> </div> <div style="text-align:center;clear:both"> <p>更多资源请到<a href="http://www.zzsck.org/js">js特效</a>下载！</p> </div> <script type="text/javascript"> $(function() { //设计案例切换 $('.title-list li').mouseenter(function() { //可以改为click var liindex = $(this).index(); $(this).addClass('on').siblings().removeClass('on'); $('.product-wrap div.product').eq(liindex).fadeIn(550).siblings('div.product').hide(); var liWidth = $('.title-list li').width(); $('.case .title-list p').stop(false, true).animate({ 'left': liindex * liWidth + 'px' }, 300); }); //设计案例hover效果 $('.product-wrap .product li').hover(function() { $(this).css("border-color", "blue"); $(this).find('p > a').css('color', 'red'); $(this).find('p').css('color', 'red'); }, function() { $(this).css("border-color", "#fafafa"); $(this).find('p > a').css('color', '#666666'); $(this).find('p').css('color', '#666666'); }); }); </script> </body> </html> 根据以上的例子对第一个做可滑动选项卡（自动滑动关闭） <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>tab标签选项卡切换jQuery特效</title> <meta http-equiv="refresh" content="100"> <script src="js/jquery-2.1.0.min.js"></script> <style> * { margin: 0; padding: 0; list-style: none; } body { font-size: 12px; color: #666; text-align: left; } .tabbox { width: 500px; height: 140px; margin: 10px auto; background: #f0f0f0; font-family: '微软雅黑'; border: 1px solid red; } .tabbox .tab { position: relative; overflow: hidden !important; background: pink; border-bottom: 1px solid blueviolet; } .tabbox .tab a { position: relative; display: block; padding: 10px 20px; float: left; text-decoration: none; color: blue; border: 0px solid red; } .tabbox .tab a:hover { background: red; color: green; text-decoration: none; } .tabbox .tab a.on { background: red; color: green; text-decoration: none; } .tabbox .content { overflow: hidden; width: 500px; height: 100px; position: relative; } .tabbox .content ul { position: absolute; left: 0; top: 0; width: 500px; height: 100px; } .tabbox .content li { width: 500px; height: 100px; float: left; } .tabbox .content li p { padding: 30px; } #btn { position: absolute; bottom: 0px; height: 2px; overflow: hidden; background: black; } </style> </head> <body>  <div class="tabbox"> <div class="tab"> <a href="javascript:;" class="on">tab1</a> <a href="javascript:;">tab2</a> <a href="javascript:;">tab3</a> <a href="javascript:;">tab4</a> <div id="btn"></div> </div> <div class="content"> <ul> <li> <p>tab1内容1</p> </li> <li> <p>tab1内容2</p> </li> <li> <p>tab1内容3</p> </li> <li> <p>tab1内容4</p> </li> </ul> </div> </div> <script> $(function() { var itemW = $(".tab").find(".on").innerWidth(); $('#btn').css('width', itemW); $(".tab").find("a").hover(function() { var index = $(this).index(); //获取滑过元素索引值 var leftW = $(this).position().left; //获取滑过元素Left值 var currentW = $(".tab").find("a").eq(index).innerWidth(); //获取滑过元素Width值 $('#btn').stop(true, true).animate({ left: leftW, width: currentW }, 300); }, function() { $('#btn').stop(true, true).animate({ // left: defLeftW, // width: itemW left: leftW, width: currentW //鼠标离开不动 }, 300) }) $('.tabbox .content ul').width(500 * $('.tabbox .content li').length + 'px'); $(".tabbox .tab a").mouseover(function() { $(this).addClass('on').siblings().removeClass('on'); var index = $(this).index(); //检索当前元素的位置是第几个 number = index; //定义全局变量 var distance = -500 * index; $('.tabbox .content ul').stop().animate({ left: distance }); }); var auto = 0; //等于1则自动切换，其他任意数字则不自动切换 if (auto == 1) { var number = 0; var maxNumber = $('.tabbox .tab a').length; function autotab() { number++; number == maxNumber ? number = 0 : number; $('.tabbox .tab a:eq(' + number + ')').addClass('on').siblings().removeClass('on'); var distance = -500 * number; $('.tabbox .content ul').stop().animate({ left: distance }); } var tabChange = setInterval(autotab, 300); //鼠标悬停暂停切换 $('.tabbox').mouseover(function() { clearInterval(tabChange); }); $('.tabbox').mouseout(function() { tabChange = setInterval(autotab, 3000); }); } }); </script>  </body> </html> 根据以上的例子对第一个做可滑动选项卡（自动滑动关闭）这个在做的时候添加样式后看到 li 元素浮动无效 .tabbox .content { /*overflow: hidden;*/ width: 500px; height: 100px; position: relative; } .tabbox .content ul { position: absolute; left: 0; top: 0; width: 500px; height: 200px; } .tabbox .content li { width: 500px; height: 200px; float: left; border: 1px solid chartreuse; /*可以看到浮动无效*/ } 不过不用怕，添加了JS就好了代码： <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>实例：jQuery弹性滑动导航菜单</title> <script src="js/jquery-2.1.0.min.js"></script> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } body { font-size: 100%; font-family: "Microsoft YaHei", "Arial"; background: #fff; text-align: left; } .tabbox { width: 500px; height: 250px; margin: 10px auto; background: #f0f0f0; font-family: '微软雅黑'; border: 1px solid red; } #nav { position: relative; width:500px; border: 1px solid green; /*border-bottom: 3px solid #00FFFF;*/ } #nav .nav-menu { height: 50px; } #nav .nav-menu a { display: block; float: left; height: 50px; padding: 0 10px; line-height: 50px; color: black; font-size: 16px; text-decoration: none; } #nav .nav-current { position: absolute; bottom: -3px; height: 3px; overflow: hidden; background: black; } .tabbox .content { /*overflow: hidden;*/ width: 500px; height: 100px; position: relative; } .tabbox .content ul { position: absolute; left: 0; top: 0; width: 500px; height: 200px; } .tabbox .content li { width: 500px; height: 200px; float: left; border: 1px solid chartreuse; } .tabbox .content li p { padding: 30px; } </style> </head> <body> <div class="tabbox"> <div id="nav"> <div class="nav-menu"> <a href="#" class="current">首页</a> <a href="#">了解我们</a> <a href="#">产品展示</a> <a href="#">服务报价</a> <a href="#">最新消息</a> <a href="#">联系方式</a> </div> <div class="nav-current"></div> </div> <div class="content"> <ul> <li> <p>tab1内容1</p> </li> <li> <p>tab1内容2</p> </li> <li> <p>tab1内容3</p> </li> <li> <p>tab1内容4</p> </li> <li> <p>tab1内容5</p> </li> <li> <p>tab1内容6</p> </li> </ul> </div> </div> </body> <script type="text/javascript"> $(function() { (function() { // var $navcur = $(".nav-current"); // var $nav = $("#nav"); // var current = ".current"; var itemW = $("#nav").find(".current").innerWidth(); //默认当前位置宽度 var defLeftW = $("#nav").find(".current").position().left; //默认当前位置Left值 // alert(itemW + '' + defLeftW); //添加默认下划线 $(".nav-current").css({ width: itemW, left: defLeftW }); //hover事件 $("#nav").find("a").hover(function() { var index = $(this).index(); //获取滑过元素索引值 var leftW = $(this).position().left; //获取滑过元素Left值 var currentW = $("#nav").find("a").eq(index).innerWidth(); //获取滑过元素Width值 $(".nav-current").stop().animate({ left: leftW, width: currentW }, 300); }, function() { $(".nav-current").stop().animate({ // left: defLeftW, // width: itemW left: leftW, width: currentW //鼠标离开不动 }, 300) }); $('.tabbox .content ul').width(500 * $('.tabbox .content li').length + 'px'); $(".tabbox #nav a").mouseover(function() { $(this).addClass('on').siblings().removeClass('on'); var index = $(this).index(); //检索当前元素的位置是第几个 number = index; //定义全局变量 var distance = -500 * index; $('.tabbox .content ul').stop().animate({ left: distance }); }); })(); }); </script> </html>

发表了文章 2016-02-21

自己动手丰衣足食之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

原文地址http://www.jb51.net/css/41448.html 图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的是firefox或者chrome，当然IE也能看一部分的。那好，下面就一起来看看我们是如何用纯CSS来画这些图形的，如果你也觉得很震撼，推荐给你的朋友吧。 1、正方形最终效果： CSS代码如下：复制代码代码如下: square { width: 100px; height: 100px; background: red; } 2、长方形最终效果： CSS代码如下：复制代码代码如下: rectangle { width: 200px; height: 100px; background: red; } 3、圆形最终效果： CSS代码如下：复制代码代码如下: circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } 4、椭圆最终效果： CSS代码如下：复制代码代码如下: oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } 5、上三角最终效果： CSS代码如下：复制代码代码如下: triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 6、下三角最终效果： CSS代码如下：复制代码代码如下: triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; } 7、左三角最终效果： CSS代码如下：复制代码代码如下: triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; } 8、右三角最终效果： CSS代码如下：复制代码代码如下: triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; } 9、左上三角最终效果： CSS代码如下：复制代码代码如下: triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; } 10、右上三角最终效果： CSS代码如下：复制代码代码如下: triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; } 11、左下三角最终效果： CSS代码如下：复制代码代码如下: triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; } 12、右下三角最终效果： CSS代码如下：复制代码代码如下: triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent; } 13、平行四边形最终效果： CSS代码如下：复制代码代码如下: parallelogram { width: 150px; height: 100px; margin-left:20px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: red; } 14、梯形最终效果： CSS代码如下：复制代码代码如下: trapezoid { border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; } 15、六角星最终效果： CSS代码如下：复制代码代码如下: star-six { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; } star-six:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: “”; top: 30px; left: -50px; } 16、五角星最终效果： CSS代码如下：复制代码代码如下: star-five { margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } star-five:before { border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ”; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } star-five:after { position: absolute; display: block; color: red; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: ”; } 17、五角大楼最终效果： CSS代码如下：复制代码代码如下: pentagon { position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: red transparent; } pentagon:before { content: “”; position: absolute; height: 0; width: 0; top: -85px; left: -18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent red; } 18、六边形最终效果： CSS代码如下：复制代码代码如下: hexagon { width: 100px; height: 55px; background: red; position: relative; } hexagon:before { content: “”; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; } hexagon:after { content: “”; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red; } 19、八角形最终效果： CSS代码如下：复制代码代码如下: octagon { width: 100px; height: 100px; background: red; position: relative; } octagon:before { content: “”; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; } octagon:after { content: “”; position: absolute; bottom: 0; left: 0; border-top: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; } 20、爱心最终效果： CSS代码如下：复制代码代码如下: heart { position: relative; width: 100px; height: 90px; } heart:before, heart:after { position: absolute; content: “”; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; } 21、无穷大符号最终效果： CSS代码如下：复制代码代码如下: infinity { position: relative; width: 212px; height: 100px; } infinity:before, infinity:after { content: “”; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } 22、鸡蛋最终效果 CSS代码如下：复制代码代码如下: egg { display:block; width: 126px; height: 180px; background-color: red; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; } 23、食逗人（Pac-Man）最终效果： CSS代码如下：复制代码代码如下: pacman { width: 0px; height: 0px; border-right: 60px solid transparent; border-top: 60px solid red; border-left: 60px solid red; border-bottom: 60px solid red; border-top-left-radius: 60px; border-top-right-radius: 60px; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; } 24、提示对话框最终效果： CSS代码如下：复制代码代码如下: talkbubble { width: 120px; height: 80px; background: red; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } talkbubble:before { content:”“; position: absolute; right: 100%; top: 26px; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid red; border-bottom: 13px solid transparent; } 25、12角星最终效果： CSS代码如下：复制代码代码如下: burst-12 { background: red; width: 80px; height: 80px; position: relative; text-align: center; } burst-12:before, #burst-12:after { content: “”; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: red; } burst-12:before { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } burst-12:after { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); } 26、8角星最终效果： CSS代码如下：复制代码代码如下: burst-8 { background: red; width: 80px; height: 80px; position: relative; text-align: center; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20eg); transform: rotate(20deg); } burst-8:before { content: “”; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: red; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } 27、钻石最终效果： CSS代码如下：复制代码代码如下: cut-diamond { border-style: solid; border-color: transparent transparent red transparent; border-width: 0 25px 25px 25px; height: 0; width: 50px; position: relative; margin: 20px 0 50px 0; } cut-diamond:after { content: “”; position: absolute; top: 25px; left: -25px; width: 0; height: 0; border-style: solid; border-color: red transparent transparent transparent; border-width: 70px 50px 0 50px; } 28、阴阳八卦（霸气的这个） CSS代码如下：复制代码代码如下: yin-yang { width: 96px; height: 48px; background: #eee; border-color: red; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative; } yin-yang:before { content: “”; position: absolute; top: 50%; left: 0; background: #eee; border: 18px solid red; border-radius: 100%; width: 12px; height: 12px; } yin-yang:after { content: “”; position: absolute; top: 50%; left: 50%; background: red; border: 18px solid #eee; border-radius:100%; width: 12px; height: 12px; } 好了，就到这里了，一共28个，个人觉得后面几个比较犀利。这些代码的来源是css-tricks。由青藤屋博客整理，转载请保留原文链接：http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html

发表了文章 2016-02-20

自己动手丰衣足食之Swiper插件

下载地址http://download.csdn.net/detail/cometwo/9437881 Swiper插件中文网http://www.swiper.com.cn/ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <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 content="email=no" name="format-detection"> <meta http-equiv="refresh" content="100"> <title>Swiper中文网</title> <link href="dist/css/base.css" rel="stylesheet" type="text/css" /> <link href="dist/css/layout.css" rel="stylesheet" type="text/css" /> <link href="dist/css/swiper.min.css" rel="stylesheet" type="text/css" /> <script src="dist/js/swiper.min.js"></script> </head> <body class="index"> <div id="banner"> <a class="arrow-left" href="#"></a> <a class="arrow-right" href="#"></a> <div class="swiper-container" id="bannerSwiper"> <div class="swiper-wrapper"> <div class="swiper-slide" id="swiper-slide1"> <div class="inner"> <div id="mainTheme"> <h1>Swiper</h1><span>3</span></div> <p data-swiper-parallax="-1500">开源、免费、强大的移动端触摸滑动插件</p> <div class="subbtn" data-swiper-parallax="-3000"> <a class="button" href="/demo/index.html">查看Swiper演示</a> <a class="button" href="/api/index.html">查看API 文档</a> <a class="button" href="http://bbs.swiper.com.cn" target="_blank">交流、分享Swiper</a> <a class="button" href="http://swiper2.swiper.com.cn" target="_blank">回顾Swiper2</a></div> <div class="mainbtn" data-swiper-parallax="-4500"> <a href="/usage/index.html">开始使用 Swiper</a></div> </div> </div> <div class="swiper-slide" id="swiper-slide2"> <div class="inner"> <dl> <dt data-swiper-parallax="-500">为什么选择Swiper？</dt> <dd style="margin-top:50px;" data-swiper-parallax="-1500"> 免费，开源，稳定，应用广泛 </dd> <dd data-swiper-parallax="-3000"> 1可单独使用无需jQuery，亦可结合jQuery </dd> <dd data-swiper-parallax="-4500"> 简单配置即可实现手机、平板网站大部分触摸功能 </dd> <dd data-swiper-parallax="-6000"> 包括焦点图，tab，触摸滑动导航等 </dd> <dd data-swiper-parallax="-7500"> 文档丰富，大量活跃用户解答疑问 </dd> </dl> </div> </div> </div> </div> <div id="bannerpagination" class="pagination"></div> </div> <script language="javascript"> function display(li) { li.className = 'active'; var subdis = li.getElementsByTagName("ul")[0]; subdis.style.display = "block"; } function ndisplay(li) { li.className = 'noactive'; var subdis = li.getElementsByTagName("ul")[0]; subdis.style.display = "None"; } var preBtn = document.querySelectorAll('.pre-btn'); for (var j = 0; j < preBtn.length; j++) { preBtn[j].onclick = function() { this.style.display = 'none'; this.parentNode.querySelector('.pre-load').style.display = 'none'; myframe = this.parentNode.querySelector('iframe'); framesrc = myframe.attributes["data-src"].value; myframe.setAttribute("src", framesrc); } } </script> <div style="display:none;"> <script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F6387fcb06c7f33ad6787ab913d4e6d10' type='text/javascript'%3E%3C/script%3E")); </script> <div> <script> var mySwiper = new Swiper('#bannerSwiper', { loop: true, autoplay: 5000, speed: 1000, pagination: '#bannerpagination', paginationClickable: true, grabCursor: true, nextButton: '.arrow-right', prevButton: '.arrow-left', parallax: true, }); </script> </body> </html>

发表了文章 2016-02-19

css 3d旋转

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="renderer" content="webkit" /> <style> .rect{width:100px;height:100px;position:absolute;top:100px;left:100px;border:1px solid #000;text-align:center;line-height:100px;font-size:30px;background:#fcc;} .parrent{width:300px;height:300px;position:absolute;top:100px;left:200px;border:2px solid #f00;border-radius:150px; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; } .border{position:absolute;top:0;left:0;width:100%;height:100%;top:0;left:0;border-radius:50%;border:2px solid #f00;} .anmtx{transform: translateZ(75px); animation:mymove 5s infinite linear; -webkit-animation:mymove 5s infinite linear; -moz-animation:mymove 5s infinite linear; -o-animation:mymove 5s infinite linear; } @keyframes mymove{ from{transform:rotateX(0deg) rotateY(0deg);} to{transform:rotateX(360deg) rotateY(360deg);} } @-webkit-keyframes mymove{ from{-webkit-transform:rotateX(0deg) rotateY(0deg);} to{-webkit-transform:rotateX(360deg) rotateY(360deg);} } @-moz-keyframes mymove{ from{-moz-transform:rotateX(0deg) rotateY(0deg);} to{-moz-transform:rotateX(360deg) rotateY(360deg);} } @-o-keyframes mymove{ from{-o-transform:rotateX(0deg) rotateY(0deg);} to{-o-transform:rotateX(360deg) rotateY(360deg);} } </style> </head> <body> <div class="parrent anmtx"> <div class="rect" style="transform:rotateX(0deg) translateZ(50px)">1</div> <div class="rect" style="transform:rotateY(-90deg) translateZ(50px) ;">2</div> <div class="rect" style="transform:rotateY(90deg) translateZ(50px);">3</div> <div class="rect" style="transform: rotateX(90deg) translateZ(50px);">4</div> <div class="rect" style="transform:rotateX(-90deg) translateZ(50px) ;">5</div> <div class="rect" style="transform:rotateX(180deg) translateZ(50px) ;">6</div> <div class="border" style="transform:rotateX(90deg);"></div> <div class="border" style="transform:rotateY(90deg);"></div> </div> </body> </html>

cometwo123_个人页

个人介绍

擅长的技术

js 恶心的遍历

圆环百分比

jQuery旋转插件jqueryrotate,制作转盘

经典的js 代码段

未知图片宽高水平垂直居中

jQuery实时显示鼠标指针位置和键盘ASCII码

js史上最简单的数组合并去重排序

jquery 自定义事件绑定与触发 $.one与$.bind效果对比实例

移动端1px

一点点小随笔：min-width

移动端适配简易步骤

最简单写一个年月日时分秒星期日历，倒计时时钟

回到顶部和回到底部动画

CSS3 动画实现方法大全（*****************************星级文章*************************）

解密Animate.css之CSS3动画实现方式大全源码（6星级）

12个实用的 Javascript 奇淫技巧

转盘抽奖

移动端HTML5实现打电话，发短信，发邮件，文件上传

深入理解RGBA、Math ceil()、floor()、round()、toFixed()随机数，取整方法

jquery省市区插件

轻量级jQuery带底栏轮播(焦点图)插件slideBox

简单的个人博客日历代码，时钟演示

CSS，Jquery精美进度条和滑动条（滑块）插件

SVG特效&amp;canvas特效

自己动手丰衣足食之鼠标悬浮特效

深入理解position: fixed

深入理解transform属性之翻转效果

自己动手丰衣足食之三级联动

认识jQuery的两个API：attr和data

自己动手丰衣足食之表格排序插件jquery.tableSort.js

深入理解jquery新的绑定事件机制on方法的使用

获取时间的方法及常用时间类

easyUI tabs 初探

黑客帝国效果

js冒泡

彻底理解js中this

jQuery判断checkbox，radio是否选中的3种方法

jQuery显示隐藏密码插件jquery.toggle-password演示

垂直竖向，水平滚动插件插件

轻巧的jQuery提示框插件Tipso演示

让div左右对齐自适应高度的网页特效（常看）

基于layer mobile手机端弹出框，询问框（PC端推荐layer和artDialog：http://download.csdn.net/download/cometwo/9437895）

JS中的“！！”

初识js中的闭包

jquery中事件委派代码分析以及jQuery中delegate和on的用法与区别详细解析

自己动手丰衣足食之下拉列表

自己动手丰衣足食之tab选项卡（第一个可拓展轮播图）

自己动手丰衣足食之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

自己动手丰衣足食之Swiper插件

css 3d旋转

C语言处理图像之改变背景前景颜色

为什么 C 语言屹立不倒？

ios 开发file&#39;s owner以及outlet与连线的理解

一个Go语言接口和多操作系统实现的简单例子

#pragma 用法

Facebook的十点经验分享

C语言图形函数编程

C语言图形编程

C语言模仿幻灯片过渡效果之水平百叶窗

Oracle必会的基础SQL-管理维护

host修改host文件工具软件自动切换host最新版_HostHelper_V1.3

HTTP服务器 nginx for windows下载 详细安装与配置

2011年7月编程语言排行榜,Objective-C将成为年度语言

Linux平台多线程下的计时

51单片机串口

2012年8月编程语言排行榜-C领衔称霸Obj-C强势爬升

VMware JRE中的漏洞是否会妨碍虚拟化的实施

Wi-Fi速度慢的十个原因以及解决办法

关于win7系统 vs2010下的C语言 输出中文 是乱码问题

c语言 王者归来

CSS3 动画实现方法大全（*****星级文章*）

SVG特效&canvas特效

ios 开发file's owner以及outlet与连线的理解

HTTP服务器 nginx for windows下载详细安装与配置

关于win7系统 vs2010下的C语言输出中文是乱码问题

c语言王者归来