不错的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.onmouseover=function(){clearInterval(timer2);clearInterval(timer);s.style.backgroundColor="#ccc";} s.onmouseout=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.onload=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.onmouseover=function(){can=false}; box.onmouseout=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//对应上面多少张图片增加多少--> 评论
正在加载评论......
