jquery
-
作者: Airen发布日期: 4月07,12点击量: 677今日浏览: 2为了让Web页面在手机上显示流畅，现在国外很多网站都使用Responsive设计和CSS3 Media Queries的结合来实现。这样的实例到处可见，那么今天我想和大家一起学习的是有关于这种方法实现手机布局中的导航制作。如果你的导航选项比较多，放到手机上来浏览就会挤到一起，造成美观性的不足。下面为了解决这样的问题，我们就一起跟随Nick La写的教程《Mobile Navigation Design & Tutorial》学习如何使用jQuery来解决刚才所说的问题。问题的描述下面的截图说明了导航布局在手机上的问题。如果你的导航只有三到四个选项，如Web Designer...
-
作者: Airen发布日期: 4月03,12点击量: 656今日浏览: 11Timeline是VeriteCo写的一个jQuery插件。它将一连串的事件集合到一起，按时间轴的顺序展示这些发生的事件。你可以将各种媒体、图片、视频、地图等相关信息插入到timeline。结合设计可以完美的展示你的工作效率或者更强的信息。比如说你一年，或者多年下来人生中的大事等。VeriteCo的Timeline与Facebook的timeline都有类似功能之处。前面在jQuery制作Facebook Timeline一文中学习了Facebook的timeline使用。今天主要想让大家和我一起跟着VeriteCo和Martin Angelov 学习如何使用timeline。...
-
作者: Airen发布日期: 3月20,12点击量: 785今日浏览: 12不知道大家有没有经常观注Facebook，不过我是经常观注他，时时了解他的Web页面的设计与变化，因为我很喜欢他的风格。最近看到Facebook的一个比较明显的变化——Facebook Timeline。这一变化把我吸引了，仔细看了他们的源代码，但不懂js的我来说，实现风格并不难，但是要实现功能还是相当的困难。没办法的情况之下只好借助GG在网上搜索“Facebook Timeline design”。终于找到一篇Srinivas Tamada写的《Facebook Timeline Design using JQuery and CSS.》教程。于是马上自己跟着动手写了一个，觉得很有意思，...
-
作者: Airen发布日期: 3月20,12点击量: 638今日浏览: 7记得有一次群里在讨论，有没有办法让页面做成全屏效果，就如在Firefox浏览器上按“全屏”选项，让整个页面满屏显示。当时感觉有点不可思议，可是今天在Tutorialzine.com看到一份教程《Enhance Your Website with the FullScreen API》，可以轻松实现全屏效果。具体详细的介绍，可以查看Full Screen API，我在此处只介绍一下如何使用jQuery实现全屏效果的过程。需要的资源制作这个效果，我们有两样东东是必需的，第一个是jQuery版本库；其次就是制作这个效果的一个jQuery插件——jQuery FullScreen...
-
作者: Airen发布日期: 1月06,12点击量: 555今日浏览: 2当一个页面的篇幅太长时，用户的检验就有点烦，特别是当用户要到页面的底部或顶部时，只靠scrollBar来操作的确不爽，我有时也烦。当然，W3cplus也有这样的不足之处，好多朋友都有提过，于是在第二版本中我加了一个回到顶部的效果，但不知道怎么加回到底的效果。因为自己的jQuery还处在学习的初级阶段，属于半吊子中的半吊子，时常依赖别人的插件来做效果。比如说，前面介绍的《jQuery制作go to top按钮》中介绍的回到页面顶部的四个demo效果，都是到处整来的，有时只知道其表，不知道其质。真是感到惭愧呀。今天在Codrops站上看到了cody利用James的special scroll...
-
作者: Airen发布日期: 11月14,11点击量: 946今日浏览: 4Popup弹出窗，时常有碰到，以前都只是写Popup的样式，从没有涉及jQuery怎么实现。今天看到一个教程有关于这方面的制作，认真学习了一下。事后仔细一想，用jQuery来制作还是可以看懂的，现将代码稍加整理放上站上，以备今后可以使用，因为记性不好，所以这个懒就偷不了。别的不说，和我一样不懂的，就一起动手试试吧：一、HTML Markup <a href="javascript:popup('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra...
-
作者: Airen发布日期: 10月14,11点击量: 1,601今日浏览: 4Tabs的效果在Web页面制作中，可以说是随处可见，我也知道有关于这样的教程在网上上相当的多，前面本站在《纯CSS3制作Tabs选项卡》中介绍了纯CSS制作的Tabs，而《CSS3+jQuery制作切角的Tabs》介绍了使用CSS3+jQuery制作Tabs的方法。今天依然要介绍的是使用jQuery来制作Tabs，但这种方法相对来说是简单易于理解的，就算我这样的初学者都能理解。如果你还不知道jQuery是什么东东，你钶以到jQuery官网了解他是什么？也可以浏览下列网站提供的相关教程：1stwebdesigner.com、sohtanaka.com、webdesignerwall.com、...
-
作者: Airen发布日期: 10月08,11点击量: 760今日浏览: 2学习jQuery有一段时间了，进展甚慢。这段时间反复在学习手风琴的制作，从纯CSS的制作到jQuery的制作，在W3cplus和大家共享了多篇有关于制作手风琴效果的Blog。比如：纯CSS制作——《CSS3制作垂直手风琴》纯CSS制作——《CSS3制作手风琴——CSS3 :target的应用》jQuery制作——《jQuery制作水平手风琴》jQuery制作——《如何使用jQuery制作手风琴效果》jQuery制作——《如何使用jQuery制作展开和折叠切换面板》今天在OpenSource上学习有关于Accordion的jQuery的制作方法，发现一个制作Accordion插件——...
-
作者: Airen发布日期: 10月03,11点击量: 890今日浏览: 0上回在《如何使用jQuery制作手风琴效果》一文中介绍了使用jQuery制作垂直手风琴效果，今天我们一起在来看一个水平手风琴效果，如下图所示：在这个例子中，我创建了一个水平手风琴效果，用来展开每个缩略图的提示内容。下面我们来看其具体是如何通过jQuery来实现。HTML Markup <ul id="horizontalAccordion"> <li> <a href="#" id="a1"> <img src="http://www.w3cplus.com/sites/default/files/...
-
作者: Airen发布日期: 10月02,11点击量: 944今日浏览: 1上节在《自定义表单——jQuery制作个性化Checkbox》介绍了用jQuery美化表单中的checkbox。今天和大家一起探讨另一个表单制作中的对齐问题，这个我想大家在平时制作表单之时，关于对齐一定有碰到过，那么在这个简短的教程中主要尝试另一种解决方法，希望大家会喜欢。在Web页面中创建一个Web表单时（比如说注册信息表单，或者联系表单），你都必须做出一个功能和视觉对齐的布局。如下图所示：我们一般在Web页面中都需要制作如上图所示的美化后的表单风格。解决这种布局效果，最简单的方式就是将form用table来制作，将label放在一个td，而input放在另一个td中，并设置其对齐方式，...