不错的Jquery特效,值得收藏

不错的Jquery特效,值得收藏 2011年06月19日　　先来几个Jquery信息轮换 　　 　　 　　 　　 　　无间断滚动切换效果 　　 　　.scroll{ 　　height:20px; 　　overflow:hidden; 　　font-size:12px; 　　line-height:20px; 　　border:#A5A5A5 1px dotted; 　　width:120px; 　　margin:0px auto; 　　text-align:center; 　　} 　　 　　 　　var s,sn=0,timer,slen,timer2; 　　function scrollInit(){ 　　s=getid("s1"); 　　s.scrollTop=0; 　　slen=s.innerHTML.split("|"); 　　s.innerHTML=""; 　　for(var i=0;i");} 　　s.innerHTML+=slen[0]; 　　timer2=setInterval(scrollstart,3000); 　　s.οnmοuseοver=function(){clearInterval(timer2);clearInterval(timer);s.style.backgroundColor="#ccc";} 　　s.οnmοuseοut=function(){timer2=setInterval(scrollstart,3000);s.style.backgroundColor="#fff";} 　　} 　　function scrollstart(){ 　　if(s.scrollTop>=(slen.length*20)){s.scrollTop=0;} 　　timer=setInterval(scrollexec,30); 　　} 　　function scrollexec(){ 　　if(sn　　sn++; 　　s.scrollTop++; 　　}else{ 　　sn=0; 　　clearInterval(timer); 　　} 　　} 　　function getid(id){return document.getElementById(id);} 　　window.οnlοad=scrollInit; 　　 　　 　　 　　北 京|上 海|广 州|西 安|南 京|大 连|哈尔滨|武 汉 　　 　　 　　欢迎访问阿里西西网页代码站，js.alixixi.com 　　/分割线/// 　　 　　 　　/*#adv 　　{ 　　padding-right: 2px; 　　float: right; 　　padding-top: 1px; 　　}*/ 　　#ifocus_pic 　　{ 　　overflow: hidden; 　　width: 306px; 　　position: relative; 　　height: 254px; 　　} 　　#ifocus_piclist 　　{ 　　left: 0px; 　　position: absolute; 　　top: 0px; 　　} 　　#ifocus_btn 　　{ 　　font-size: 14px; 　　right: 0px; 　　bottom: 5px; 　　position: absolute; 　　text-align: center; 　　} 　　#ifocus_btn LI 　　{ 　　border: #ff6600 1px solid; 　　margin-top: 2px; 　　background: #ffffff; 　　float: left; 　　width: 15px; 　　cursor: pointer; 　　color: #ff6600; 　　margin-right: 5px; 　　height: 15px; 　　} 　　#ifocus_btn .current 　　{ 　　border: #ffffff 1px solid; 　　margin-top: 0px; 　　font-weight: bold; 　　font-size: 18px; 　　background: #ff6600; 　　width: 20px; 　　color: #ffffff; 　　height: 20px; 　　} 　　.undis 　　{ 　　display: none; 　　} 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　1 　　 　　2 　　 　　3 　　 　　 　　 　　 　　$(document).ready(function() { 　　var currentIndex = 0; 　　var d; //函数对象 　　var currentID = 0; //取得鼠标下方的对象ID 　　var pictureID = 0; //索引ID 　　var l = $("#ifocus_piclist li").length; 　　$("#ifocus_piclist li").eq(0).show(); //默认 　　autoScroll(); 　　$("#ifocus_btn li").hover(function() { 　　StopScrolll(); 　　$("#ifocus_btn li").removeClass("current")//所有的li去掉当前的样式加上正常的样式 　　$(this).addClass("current"); //而本身则加上当前的样式去掉正常的样式 　　pictureID = $(this).html() - 1; 　　$("#ifocus_piclist li").eq(pictureID).fadeIn("slow"); //本身显示 　　$("#ifocus_piclist li").not($("#ifocus_piclist li")[pictureID]).hide(); //除了自身别的全部隐藏 　　}, function() { 　　//当鼠标离开对象的时候获得当前的对象的ID以便能在启动自动时与其同步 　　pictureID = $(this).html() - 1; //取当前元素的ID 　　currentIndex = pictureID; 　　autoScroll(); 　　}); 　　//自动滚动 　　function autoScroll() { 　　$("#ifocus_btn li:last").removeClass("current"); 　　$("#ifocus_btn li").eq(currentIndex).addClass("current"); 　　$("#ifocus_btn li").eq(currentIndex - 1).removeClass("current"); 　　$("#ifocus_piclist li").eq(currentIndex).fadeIn("slow"); 　　$("#ifocus_piclist li").eq(currentIndex - 1).hide(); 　　currentIndex++; currentIndex = currentIndex >= l ? 0 : currentIndex; 　　d = setTimeout(autoScroll, 1500); 　　} 　　function StopScrolll()//当鼠标移动到对象上面的时候停止自动滚动 　　{ 　　clearTimeout(d); 　　} 　　//标签换样式 　　var fodTime = 0; 　　$("ul.txtTab li").hover(function() { 　　if ($(this).hasClass("current")) return; 　　var obj = $(this); 　　clearTimeout(fodTime); fodTime = 0; fodTime = setTimeout(function() { 　　obj.addClass("current").siblings().removeClass(); 　　var o = obj.parent().parent().siblings().children(".undis"); 　　var q = obj.parent().siblings(".undis"); 　　q.removeClass("undis").siblings("a").addClass("undis"); 　　o.removeClass("undis").siblings().addClass("undis"); 　　}, 250); 　　}, 　　function() { clearTimeout(fodTime); fodTime = 0; } 　　); 　　}); 　　 　　分割线/// 　　　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 　　 　　 　　向上逐行滚动JS代码，鼠标划过暂停-懒人建站 　　 　　Jquery _JS代码_JS广告代码_下拉菜单代码-懒人建站 　　　　企业网页设计欣赏" /> 　　　　效代码大全，JS广告代码，导航菜单代码，下拉菜单代码和jquery焦点图片代码。" /> 　　 　　 　　a{ 　　display:block;/*这个属性是必须的*/ 　　font-size:12px; 　　line-height:18px; 　　text-decoration:none; 　　color:#333; 　　font-family:Arial; 　　} 　　.shell{ 　　border:1px solid #aaa; 　　width:400px; 　　padding:3px 2px 2px 20px; 　　} 　　#div1{ 　　height:58px; 　　overflow:hidden; 　　} 　　 　　 　　 　　 　　 　　请教高手帮我看下这段代码：FLASH显示不了 　　请教在UTF-8编辑下的符号显示问题 　　jquery做的一个滑动效果，不知如何增加延迟，现在太灵敏了 　　技术研究：QQ2009版按钮渐显渐隐的由来 　　Javascript读取Json数据并分页显示，支持键盘和滚轮翻页 　　腾讯网奇怪的PNG文件，拜师以求解惑 　　更新lhgdialog-ver2.0.1弹出窗口 　　 　　 　　 　　var box=document.getElementById("div1"),can=true; 　　box.innerHTML+=box.innerHTML; 　　box.οnmοuseοver=function(){can=false}; 　　box.οnmοuseοut=function(){can=true}; 　　new function (){ 　　var stop=box.scrollTop%18==0&&!can; 　　if(!stop)box.scrollTop==parseInt(box.scrollHeight/2)?box.scrollTop=0:box.scrollTop++; 　　setTimeout(arguments.callee,box.scrollTop%18?10:1500); 　　}; 　　 　　 　　　　size:10pt; line-height:150%;"> 　　本代码由懒人建站 收集 　　整理 我要学电脑.COM →www.51xuediannao.com
　　懒人建站 jquery'>http://www.51xuediannao.com">jquery， 　　http://www.51xuediannao.com/JS">JS代码， 　　网页， 　　http://www.51xuediannao.com/jiqiao/css/">CSS技巧； 　　懒人建站只收录实用和能提高用户体验的代码 　　我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。 　　 　　 　　 　　分割线// 　　 　　 　　var curr = 0, next = 0, count = 0; 　　$(document).ready(function() { 　　// 记录图片的数量 　　count = $('#img_list a').size(); 　　t = setInterval('imgPlay()', 3000); 　　// 鼠标移动到图片或导航上停止播放，移开后恢复播放 　　$('#imgs li, #img_list a').hover(function() { 　　clearInterval(t); 　　}, function() { 　　t = setInterval('imgPlay()', 3000); 　　}); 　　//点击导航播放到相应的图片 　　$('#img_list a').click(function() { 　　// index()函数返回当前导航的下标 　　var index = $('#img_list a').index(this); 　　if (curr != index) { 　　play(index); 　　curr = index; 　　}; 　　return false; 　　}); 　　}); 　　// 播放图片的函数 　　var imgPlay = function() { 　　next = curr + 1; 　　// 若当前图片播放到最后一张，这设置下一张要播放的图片为第一张图片的下标 　　if (curr == count - 1) next = 0; 　　play(next); 　　curr++; 　　// 在当前图片的下标加1后，若值大于最后一张图片的下标，则设置下一轮其实播放的图片下标为第一张图片的下标，而next永远比curr大1 　　if (curr > count - 1) { curr = 0; next = curr + 1; } 　　}; 　　// 控制播放效果的函数 　　var play = function(next) { 　　// 当前的图片滑到左边-500px，完成后返回到右边490px 　　// 下一张图片滑到0px处，完成后导航的焦点切换到下一个点上 　　$('#imgs li').eq(curr).css({ 'opacity': '0.5' }).animate({ 'left': '-500px', 'opacity': '1' }, 'slow', function() { 　　$(this).css({ 'left': '714px' }); 　　}).end() 　　.eq(next).animate({ 'left': '0px', 'opacity': '1' }, 'slow', function() { 　　$('#img_list a').siblings('a').removeClass('active').end().eq(next).addClass('active'); 　　}); 　　}; 　　 　　 　　ul { list-style:none;} 　　img { padding:0px; border:0px solid #eee;} 　　a { outline:none;} 　　#imgs { width:714px; float:left; margin-bottom:0px; 　　height: 215px; 　　} 　　.mid { width:714px; repeat-y; padding:0px 0px 0;} 　　.mid ul { width:714px; height:215px; background:#fff; position:relative; overflow:hidden;} 　　.mid ul li { width:714px; height:215px; position:absolute; left:714px; top:0;} 　　.mid ul li.first { left:0;} 　　 　　 　　 　　 　　 　　 　　//可以随你增加多少张图片--> 　　 　　 　　1 　　2 　　3//对应上面多少张图片增加多少--> 　　 　　 　　 评论
正在加载评论......