随笔分类 -  JQuery

摘要:在这个集合中,你将能够找到最好最新的jQuery图片及其内容幻灯插件,你可以使用它们来创建令人惊叹的图片和内容幻灯。你可能发现非常难去选择那个插件最适合我们使用,因为所有的插件都拥有不同的功能。希望大家能够喜欢!1. FlexSliderFlexSlider是一个令人惊叹的,完全符合responsive的jQuery幻灯插件2. Bubble Slideshow Effect with jQuery在这个教程中我们将创建一个基于jQuery的气泡动画效果。非常好的方式在一个网站上以一个非常有趣的幻灯来展现一套图片,因为代码完全的模块化,你将能够很简单修改和使用。3. Responsive Im 阅读全文
posted @ 2012-11-26 09:54 piuba 阅读(303) 评论(0) 推荐(0)
摘要:引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度,例如$("#rotate-image").rotate(45);把这句放在$(document).ready(function(){ });中就是将id为rotate-image的图片旋转45度。不过,貌似在Chrome中总是不显示。唉,找了两个小时,才发现Chrome太坑爹了,没法获取图片的长宽。解决办法是,把$("#rotate-image").rotate(45);放在$(window).load(function( 阅读全文
posted @ 2012-11-21 16:49 piuba 阅读(3325) 评论(1) 推荐(0)
摘要:Freetile.jsFreetile will organize your content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will arrange it's children in a layout that makes optimal use of screen space, by "packing" them in tightly.Freetile.js →Responsive Carouselres 阅读全文
posted @ 2012-09-27 18:15 piuba 阅读(460) 评论(0) 推荐(0)
摘要:这些天忙于公司项目的改版就很少来这里发表文章了,今天趁着周末休息给大家分享一个jQuery提示控件。可用于显示加载提示、错误提示、操作提示等。先上张预览图:提示条样式可以自己定义,支持关闭回调和锁屏,自适应居中,采用fixed定位(暂未考虑兼容IE6)。下面是源码:(注:引入该JS时放在body内,不然没效果,原因不明。)/** * tooltip提示 * @author Newton---承諾ン祗愛 * @date 2012年04月19日晚 * @update 2012年04月23日重构,保证一个实例的关闭函数只能触发自身的关闭事件,加入动画缓动支持。 * @param object{} * 阅读全文
posted @ 2012-09-13 16:06 piuba 阅读(247) 评论(0) 推荐(0)
摘要:<!--开始--><div class="ind_cityYelp"> <div class="ind_title"> <h2 class="ind_title_h">目的地点评</h2> (<a href="#" title="更多目的地">更多</a>)</div> <div class="ind_cityYelp_roll" id="citycommentin 阅读全文
posted @ 2012-08-25 11:25 piuba 阅读(978) 评论(0) 推荐(0)
摘要:代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1 <!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/xh 阅读全文
posted @ 2012-08-23 15:06 piuba 阅读(326) 评论(0) 推荐(0)
摘要:/*** @DOM* <div id="marquee">* <ul>* <li></li>* <li></li>* </ul>* </div>* @CSS* #marquee {width:200px;height:50px;overflow:hidden;}* @Usage* $('#marquee').superMarquee(options);* @options* distance:200,//一次滚动的距离* duration:20,//缓动效果,单次 阅读全文
posted @ 2012-08-20 17:13 piuba 阅读(621) 评论(0) 推荐(0)
摘要:原理很简单: onmouseover、onmouseout执行业务代码时使用setTimeout进行延时,第二次触发的时候先清除掉前面的setTimeout。 原理 代码如下: var timer; document.getElementById('test').onmouseover = function () { clearTimeout(timer); timer = setTimeout(function () { alert('over') }, 150); }; document.getElementById('test').onmo 阅读全文
posted @ 2012-08-02 13:40 piuba 阅读(1558) 评论(0) 推荐(0)