本文实例讲述了jQuery+css3实现转动的正方形效果。分享给大家供大家参考，具体如下： 主要是应用到了css3中的rotate来控制旋转角度 运行效果截图如下：点击此处查看在线演示效果。 具体代码如下：img { width:50px; height:50px; }.margin1 { margin-top:50px; margin-left:100px; }.margin2 { margin-top:50px; margin-left:100px; }.margin3 { margin-top:50px; margin-left:100px; }.margin4 { margin-top:50px; margin-left:10...
CSS3和jquery都可以实现缓动追逐效果，但是考虑到浏览器的兼容性，建议使用jquery animate方法来实现。 先给大家展示下实现效果如下：效果演示 源码下载 引用文件： jquery-1.11.1.min.js htmljqueryvar $first=$('#first'); var $second=$('#second'); (function(){ move1(); move2(); })() function move1(){ $first.animate({ "left":220, "top": 0 },400).animate({ "left":220, "top":220 },400).animate({ "left":0, ...
首先给大家展示下效果图：查看效果 源码下载 html代码部分： 代码如下：jquery+css实现横向二级下拉菜单Chocolate Bar browsersfirefoxchromeoperaIENetscapehtmlhtmlxhtmlhtml5cssTCP/IP xmlXSLXSLTXSL-FOXPathXQueryXLinkXPointerDTDSchemaXFormsbrowsersscriptingJavaScriptDHTMLVBScriptAJAXjQueryE4XWMLScriptserverscriptingSQLASPADOPHPdotnet multimediaMediaSMILSVG以上代码很简单，jquery+css实现绚丽的横向二级下拉菜单...
先给大家展示效果图，感兴趣的朋友可以下载源码哦。效果演示 源码下载 数字时钟可以应用在一些WEB倒计时效果、WEB闹钟效果以及基于HTML5的WEB APP中，本文将给大家介绍不借助任何图片，如何使用CSS3和HTML来制作一个非常漂亮的数字时钟效果。 HTML 我们先在页面中准备一个时钟区域#clock，并且要展示的数字放在.digits中。...数字 我们准备展示的数字时钟格式HH:mm:ss，它由时分秒8个数字和2个分隔符“:”组成，数字是由...
废话不多说了，先给大家展示下效果图，感兴趣的朋友继续往下看 哦查看演示 源码下载 HTML 和上一篇文章：使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构，只是多了个>date用来展示日期和星期的。jQuery CSS代码请参照上一篇文章，本文不再啰嗦，直接看jQuery代码。 首先我们定义参数，定义用来调用数字的class名称数组，定义中文星期名称，定义时分秒的位置。$(function(){ var clock = $('#clock'); //定义数字数组0-...
我们经常看到有很多的垂直时间轴用来记录事件进展，而有朋友问我要求分享水平的时间轴，其实水平时间轴的难点在于自适应屏幕尺寸。那么 今天我要给大家分享的是一款支持响应式、支持触屏手势滑动的水平时间轴。效果展示 源码下载 HTML 我们的HTML结构由两部分组成，div.timeline用于放置日期导航水平线，它有水平多个日期div.events-wrapper和水平轴左右方向导航按钮ul.cd-timeline-navigation组成。而div.events-content放置的...
这是一款漂亮简洁的CSS3价格表样式，该价格表基于Bootstrap网格系统来进行布局，通过简单的CSS3代码来美化价格表，样式非常的时尚漂亮，且能在不同屏幕下展示良好的效果。查看演示 下载源码 HTML 首先在页面中引入bootstrap.min.css文件，这里我用官方的CDN资源，你也可以下载到本地使用。 <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="external nofollow" >该css3价格表的HT...
弹出层用来向用户展示详细的信息，交互性非常强。弹出层有对话框、模态窗口等形式，这里我都把他们叫做弹出层，我的同事们也是这么叫的。一般我们喜欢使用比较成熟的弹出层插件如fancybox等，但在本文，我将先抛弃插件，给大家介绍如何使用jQuery+CSS3+Html5实现弹出层。效果展示 源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果，因此我们可以在示例中任意修改弹出层外观样式、甚至js方法调用。我们最终...
CSS3和jquery都可以实现缓动追逐效果，但是考虑到浏览器的兼容性，建议使用jquery animate方法来实现。 先给大家展示下实现效果如下：效果演示 源码下载 引用文件： jquery-1.11.1.min.js html <div id="container"> <div id="first"></div> <div id="second"></div> </div>jquery var $first=$(#first); var $second=$(#second); (function(){ move1(); move2(); })() function move1(){ $first.animate({ "left":220, "to...
本文实例讲述了jQuery+css3实现转动的正方形效果。分享给大家供大家参考，具体如下： 主要是应用到了css3中的rotate来控制旋转角度 运行效果截图如下：点击此处查看在线演示效果。 具体代码如下： <!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><title></title><script src="jquery-1.7.1.min....
我们经常看到有很多的垂直时间轴用来记录事件进展，而有朋友问我要求分享水平的时间轴，其实水平时间轴的难点在于自适应屏幕尺寸。那么 今天我要给大家分享的是一款支持响应式、支持触屏手势滑动的水平时间轴。效果展示 源码下载 HTML 我们的HTML结构由两部分组成，div.timeline用于放置日期导航水平线，它有水平多个日期div.events-wrapper和水平轴左右方向导航按钮ul.cd-timeline-navigation组成。而div.events-content放置的...
废话不多说了，先给大家展示下效果图，感兴趣的朋友继续往下看 哦查看演示 源码下载 HTML 和上一篇文章：使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构，只是多了个>date用来展示日期和星期的。 <div id="clock" class="light"> <div class="display"> <div class="date"></div> <div class="digits"></div> </div> </div> jQuery CSS代码请参照上一篇文章，本文不再啰嗦，直接看jQuery代码。 首先我们定义参数，定义...
先给大家展示效果图，感兴趣的朋友可以下载源码哦。效果演示 源码下载 数字时钟可以应用在一些WEB倒计时效果、WEB闹钟效果以及基于HTML5的WEB APP中，本文将给大家介绍不借助任何图片，如何使用CSS3和HTML来制作一个非常漂亮的数字时钟效果。 HTML 我们先在页面中准备一个时钟区域#clock，并且要展示的数字放在.digits中。 <div id="clock" class="light"> <div class="display"> <div class="digits"> ...数字 </div> </d...
首先给大家展示下效果图：查看效果 源码下载 html代码部分： 代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <link href="css/lanrenzhiji...
这种方法将CSS文件的地址用Javascript来输出,并加密字符,大家试试看,什么办法可以显示出这些?好好想想哦. 阻止查看CSS文件 document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3E")); document.write(unescape("%3C%21--.tablecls%20%7B%20border%3A1px%20solid%20%23a2a2a2%3B%20background-color%3A%23f2f2f2%3B%20width%3A200px%3B%20height%3A300px%3B%20text-align%3Acenter%3B%20padding%3A2px%3B%20font-size%3A1...