分类：jQuery
jquery这个强大的函数库给人带来无比惊喜,在此我将分享一些小的技巧
带进度条(时间轴)的焦点图切换特效(jQuery)
首先恶搞一下,电脑性能不佳者误入(其实我本来想用jsFiddle展示的,因为调用外部的速度太慢了.所以还是传到服务器给大家看).点击查看”高速幻灯片“…好了,来说说正常点的.先看正常效果.
,html,css,js/
看完效果,代码什么的自己研究一下.当然这个效果部分是我写的,另外一部分是参考的网上的几个demo,以前收集的,也分享给大家:
、教程 wumii相关文章插件样式暴力修改
话说无觅的一个相关文章的插件好像的确能够带来很多流量,如此来说不愧是个好插件,但是,这个插件内置到了PHPCMS的show.html模板中后,那效果简直惨不忍睹,我经过大量研究测试修改,终于让这个插件展示效果变得美观,而这种通过js修改的方式是不是很友好的,先来看看效果图:
上次说了一个phpcms单页面模板不能用翻页的问题.之后居然发现全系列IE不兼容.之后,一块一块进行排查找出来了.还做了个小demo,这里为了让大家看得更加清楚.我将这个demo分享出来,当然目前情况下来看,IE6,IE7是无法兼容的.代码效果如下:
,html,css/
phpcms单页面模板获取栏目数据翻页无效解决办法
不得不说有时候为了做一些很奇特的页面,或者说为了解决一些很蛋疼的功能,我们不得不做一些不正常的工作…比如,我把PHPCMS的单页面模板做成了一个读取某个限定条件类的文章列表.限定条件的字段已经添加到数据库内.编辑器中只要选中它属于哪一类即可,这里不多说.
发表相关思路之前先给大家看看效果,觉得还不错的,那么你可以继续看看
那么既然是单页面模板,它就有个问题,这个问题就是,单页面模板内是不能使用翻页的功能的.起初我是不知道的,找了一些资料也没解决.那么我就只有想别的办法了.经过一番思索,我认为,可以仿照腾讯微博看到页面底部,自动无限刷新.那么代码的思路就是:
打开该页面获取指定数目的数据(比如20条) > 跟踪坐标当用户拖到页面底部触发事件(js) > 自动生成一段新的异步获取数据下一批数据的代码并更新当前坐标重新计算 > 循环.
、网站 列表中最后一个元素样式清除修改方法(jQuery)
我们在做动态网站的时候,当遇到导航条的栏目列表或某区域内文章列表等含有大量重复内容区域时,通常会用循环将他们输出,而他们节点的样式都是相同的,比如下边距,外边框的分隔样式,通过循环输出的结果就是最后一个节点依然保留着所有的样式我们是不希望他有下边距或者外边框.
例如: 导航上每个栏目标题(li)右侧可能会用竖线分隔每个栏目标题,于是最后一个栏目右侧也出现了不想要的竖线,但是这些同级的li都是循环出来的 ,我们无法单独给最后一个元素添加特殊的样式,本来有个很简单的方法,那就是使用CSS3的:first和:last选择器,但是当IE6和IE7不支持:first和:last选择器的,有个简单的方法,通过Js(本文用的jQuery)去除或修改列表或循环内容的第一个和最后一个节点的样式,可以兼容所有浏览器,是比较方便的,其实用js可以轻松实现,但是我后来发现,jQuery来处理或许更加轻松些,也是正好我最近在学习jQuery,的确很好用.在body内最后加上一小段就可以了,比如下面这个简单的例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>LastChildStyleRemove</title> <script src=""></script> <style> #mainContent {background-color:#eee;} #mainContent ul.nav {list-style:none;font-size:12px;} #mainContent ul.nav li {float:left;padding:5px 15px;border-left:1px solid #fff;border-right:1px solid #ddd;} #mainContent ul.nav li a {color:#666;text-decoration:none;} </style> </head> <body> <div id="mainContent"> <ul class="nav"> <li><a href="#">导航一</a></li> <li><a href="#">导航二</a></li> <li><a href="#">导航三</a></li> <li><a href="#">导航四</a></li> </ul> <div style="clear:both;"></div> </div> </body> <script> $("#mainContent ul.nav li:first-child").css("border-left", "none") $("#mainContent ul.nav li:last-child").css("border-right", "none") </script> </html>这个例子除了用到最后一个元素样式清除,也用了首个元素样式清除,这个很好理解,这是两个方法,其实只用到一个函数,而关于元素选择器可以查看jQuery的例子::first-child Selector和:last-child Selector.上面的例子也很简单清晰易懂…
当然我也在网上看到有这样的javascript写法,不过相对较为复杂,内容如下:
<script language="javascript" type="text/javascript"> function addClassName(tag,classname){ if(!tag.className){ tag.className=classname; }else{ tag.className+=" "+classname; } } function addFirstChild(){ var olitems=document.getElementsByTagName("ol"); var ulitems=document.getElementsByTagName("ul"); for(var i=0;i<olitems.length;i++){ addClassName(olitems[i].getElementsByTagName("li")["0"],"first-child"); } for(var i=0;i<ulitems.length;i++){ addClassName(ulitems[i].getElementsByTagName("li")["0"],"first-child"); } } function addLastChild(){ var olitems=document.getElementsByTagName("ol"); var ulitems=document.getElementsByTagName("ul"); for(var i=0;i<olitems.length;i++){ addClassName(olitems[i].getElementsByTagName("li")[olitems[i].children.length-1],"last-child"); } for(var i=0;i<ulitems.length;i++){ addClassName(ulitems[i].getElementsByTagName("li")[ulitems[i].children.length-1],"last-child"); } } if(document.all && !window.opera){ window.onload=addFirstChild; window.onload=addLastChild; } </script>
相关文章
精彩导读
热门资讯
关注我们
