搜索到
3
篇与
的结果
-
前台：分页JQ无刷新加载分页内容 这个可以无限下拉显示内容了，不用分页了。不完整列表页代码<haed> ……省略 <script src="<{$home}>/js/jquery.min.js"></script> ……省略 </head> <body> ……省略 <div id="page"> <div class="list_article"> ……列表内容省略 <div> <div class="pages"> <{if $total gte $v_pagesize}> <div class="pages"><{getpaging nohtml=1 page=$page template="<a href='[page]'>[page]</a> " currenttemplate="<span class='current'>[page]</span> " previoustemplate="<a href='[page]'>上一页</a> " noprevioustemplate="" nexttemplate="<a href='[page]' class='next'>下一页</a> " nonexttemplate="" paging="[previous][paging][next]" }> </div> <{/if}> </div> </div> </div> <script type="text/javascript" src="<{$home}>/js/jquery.infinitescroll.min.js"></script> <script type="text/javascript"> jQuery(function($) { $("#page").infinitescroll( { loading: { finishedMsg: "<em>后面没有啦Orz</em>", img: "<{$home}>/img/ajax-loader.gif", msg: null, msgText: "<em>正在努力加载中...</em>", speed: 'fast' }, //加载的时候显示的信息和图片 state: {currPage: 1}, pathParse: false, debug : false, //关闭启用调试信息 behavior : "", preload : true, nextSelector : "div.pages a.next", //包含下一页链接的选择器 navSelector : "div.pages", //导航的选择器，会被隐藏 dataType : 'html', appendCallback : true, extraScrollPx : 200, //滚动条距离底部多少像素的时候开始加载，默认150 itemSelector : "div.list_article", //你将要取回的选项(内容块) animate : true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有 bufferPx : 40, //载入信息的显示时间，时间越大，载入信息显示时间越短 errorCallback : function(){} //当出错的时候，比如404页面的时候执行的函数 }, function(newElements){ //定义加载完后之前数据变化 // $(newElements).css('background-color','#ffef00'); // $(this).prepend(newElements); // //END OF PREPENDING window.console && console.log('context: ',this); window.console && console.log('returned: ', newElements); }); }); </script> ……省略 </body>DEMO：http://www.iaeweb.com/apps/ 需要用到的文件 1.http://www.iaeweb.com/js/jquery.min.js2.http://www.iaeweb.com/js/jquery.infinitescroll.min.js3 -
前台JQ：右列部分内容浮动跟随滚动 就是好多网站往下拉 而右边的侧边栏却不动，可提高广告的展现率。<head></head>之间加入<style> .sidebar {position:relative;}/*此属性必须*/ .div1{} .div2{position:fixed;_position:absolute;top:0px;z-index:300;}/*此属性必须*/ </style> <script src="/js/jquery.min.js"></script><body></body>之间构造<!--▼右侧容器--> <div class="sidebar"> ……省略内容 注意此处的一定定义高度 <!--▼生效区域--> <div id="float" class="div1"> 此处放需要跟随滚动的内容比如广告 </div> <!--▲生效区域--> ……省略内容 </div> <!--▲右侧容器--> <script src="/js/left.ad.js" type="text/javascript"></script>需要的文件 1.http://www.iaeweb.com/js/jquery.min.js 2.http://www.iaeweb.com/js/left.ad.js
-
前台JQ：文章列表滚动效果(仿微博即时更新效果) <head></head>之间加入<style> /*列表滚动*/ .roll { overflow:hidden; height:273px;}/*定义生效容器高度每条高度的整数倍*/ .popular_list{} /*定义列表页容器样式*/ .popular_list .article {height:91px;overflow:hidden;} /*定义单条容器样式 */ </style> <script src="/js/jquery.min.js"></script><body></body>之间的构造<!--▼生效区域--> <div class="roll"> <!--▼列表容器--> <div class="popular_list"> <div class="article"><!--此处单条文章内容--></div> <!--循环省略……--> </div> <!--▲列表容器--> </div> <!--▲生效区域--> <!--▼JS代码--> <script type="text/javascript"> $(function(){ var timer = null; if(!null){ timer = window.setInterval(rolling,3000); } function rolling(){ var roll= $(".popular_list");//指定列表页容器 var liHeight = roll.find("div.article:first").height()+11; $(this).find("div.article:first").hide(); $(this).css({marginTop:0}); $(this).find("div.article:first").fadeIn(1000); }) } $(".popular_list div.article").hover(function(){ clearInterval(timer); },function(){ timer = window.setInterval(rolling,3000); }) }) </script> <!--▲JS代码-->需要的文件 http://www.iaeweb.com/js/jquery.min.js PS： 这个效果可以运用到最新消息和最新评论之类的 让人感觉此站即时性高 其实就是那回事 这个效果让有限的版面提供更多的内容 应该对SEO有好处 和滑动门功效一样来源：http://bbs.akcms.com/forum.php?mod=viewthread&tid=4056&extra=page%3D2
