toby

包含「jquery」标签的文章

共找到14个结果

  • jquery第一行代码有意思的两点

    <p> 且看jquery的第一行和最后一行代码 </p> <pre class="brush:jscript;"> (function(window, undefined) {})(window);</pre> <p> 这种匿名结构我们屡见不鲜,今天要说的不是这个,而是第二个参数,jquery并没有给他传值,为什么?我们知道,没有传值的形参会被默认设置为window.undefined,那为什么jquery开发者没有使用window.undefined本身,而是使用一个形参替代呢? ...</p>

  • jquery实现垂直居中的提示框

    window的resize事件触发之后,调用计算坐标的函数,这样调整窗体之后还是垂直居中。 <pre> $(function(){ $('a').bind('click',function(){ $('#bg').css({ '-webkit-filter':'blur(5px)' ...</pre>

  • jquery实现简单tab-each键值对

    使用each方法,获得tab列表的index,通过eq指向目标标签卡。 <pre> $(function(){ $('#tab-content>li:first').show(); $('#tab>li').each(function(index){ $(this).click(function(){ ...</pre>

  • jquery实现简单的下拉列表

    <pre> $(function(){ $('#wrap>li').bind({ 'mouseover':function(e){ $(this).next().css({ /offset 计算实际位置/ 'top':$(this).offset().top+'px', ...</pre>

  • jquery实现轮显另一例(节点衔接)

    实现方法就是每次平移,第一个dom子元素接到最后一个dom子元素后面,实现无限轮转。 <pre> $(function(){ var ImageMaquee = { /清除计数器/ start:function(){ clearInterval(ImageMaquee.timeId); ...</pre>

  • jquery实现图片轮显(demo)

    这里做的是一个div的实现,图片轮转的话实现原理一样,这里注意的地方时每次重新启动计数器额时候需要清除原来的计数器。代码如下: <pre> function Run() { var i = 1; /返回timer ID/ var a = setInterval(function(){ ...</pre>

  • jquery实现结果集高亮

    <pre> <code> $(document).ready(function(){ $('#text').keyup(function(){ var result = this.value; var dom = $('li:contains("'+result+'")'); result...</code></pre>

  • jquery动态创建dom(绑定事件)

    <pre class="lang:default decode:true crayon-selected">//动态创建一个div $(function(){ $('<div />',{ id:'test', text:"this is a div", "class":"warpper", click:function(){ var...</pre>

  • jquery实现自动播放效果(图像查看器)

    上网找了很多自动播放的轮显动画,发现大多数都是现成的插件,或者js里面包含很多没用的代码,看起来很头痛(因为代码很多,看起来好像很厉害的样子..),所以决定自己干,看了很多实现的代码,知道了实现原理,接下来就是根据这个原理自己动手,先放出代码。 首先是自动渐隐的代码,这个很好理解,渐隐用animate效果,自动播放下一帧这个功能我是通过循环让他播放“下一帧”,然后限定一个范围,当到达最后一帧时下一个循环返回第一帧,通过设定setTimeout让图片循环播放,原理差不多就是这样的,下面是实现的jq代码。 ...

  • jquery实现简易tab标签

    个人修改的简易tab实现方法,代码很短,很适合理解 效果图: <a href="http://www.otarim.com/wp-content/uploads/2012/04/QQ截图201204091946101.jpg"><img src="http://www.otarim.com/wp-content/uploads/2012/04/QQ截图201204091946101.jpg" alt="QQ截图20120409194610" title="QQ截图20120409194610" width="244" height="377" class="size-full wp-image-344" /></a> html部分 <pre> <div id="content"> <div><img src="img/p_large_3Uj9_0e2a000022bc1263.jpg" alt="" /></div> <div><img src="img/p_large_Lbe2_152400000d0d121a.jpg" alt="" /></div> <div><img src="img/p_large_4ANw_16c2000014c11213.jpg" alt="" /></div> <div><img src="img/p_large_iKYA_50fc0005994a5c73.jpg" alt="" /></div> <div><img src="img/p_large_sZTJ_360100006a5d1266.jpg" alt="" /></div> </div> <ul id="list"> <li class="add">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </pre><!--more--> style部分 <pre> <style type="text/css"> #list{ list-style:none; margin:20px auto; ...</style></pre>

1 / 2 下一页