jquery仿百度經(jīng)驗(yàn)滑動(dòng)切換瀏覽效果
jquery仿百度經(jīng)驗(yàn)滑動(dòng)切換瀏覽效果
$(function() { wordStrong(); $("#content ul").width($("#content ul li:first").width()*$("#content ul li").length); $("#header .top_right .vote").hover(function() { $(this).children(".hover-tip").css("display", "block"); $(this).children(".num").css("display", "none"); }, function() { $(this).children(".hover-tip").css("display", "none"); $(this).children(".num").css("display", "block"); }); $("#content .left, #content .right").width(($(document).width()-$("#content").width())/4); $("#content .left").css("left", -$("#content .left").width()); $("#content .right").css("right", -$("#content .right").width()); var showId = 0; $("#content span.left").hover(function() { if ( checkFirst() ) return ; $(this).css("cursor", "pointer"); $(this).siblings(".sl").stop().animate({ opacity:0.5 }); }, function() { $(this).siblings(".sl").stop().animate({ opacity:0 }); }).click(function() { if ( checkFirst() ) return ; showId --; $("#content").attr("showId", showId); $("#footer li").children().removeClass("active").end().children().eq(showId).addClass("active"); center(showId); }); $("#content span.right").hover(function() { if ( checkLast() ) return ; $(this).css("cursor", "pointer"); $(this).siblings(".sr").stop().animate({ opacity:0.5 }); }, function() { $(this).siblings(".sr").stop().animate({ opacity:0 }); }).click(function() { if ( checkLast() ) return ; showId ++; $("#content").attr("showId", showId); $("#footer li").children().removeClass("active").end().children().eq(showId).addClass("active"); center(showId); }); function checkFirst() { if ( $("#content").attr("showId") == 0 ) { $("#content span.left").css("cursor", "default"); return true; } return false; } function checkLast() { if ( $("#content").attr("showId") == $("#content ul li").length-1 ) { $("#content span.right").css("cursor", "default"); return true; } return false; } /* 首字母大寫 */ function wordStrong() { var liList = $("#content ul li"); for (var j = 0; j < liList.length; j ++) { var pList = $("#content .cont_"+(j+1)+" .cont_word p"); for (var i = 0; i < pList.length; i ++) { var p = pList.get(i); var pCont = $(p).html(); var s = $("<b>"+(i+1)+"</b>"); s.css("font-size", "24px"); $(p).html(''); s.appendTo(p); $(p).append(pCont.substring(1)); } } } center(0); //相對li居中 function center(liIndex) { var li = $("#content ul li").css("opacity", 0.3).eq(liIndex).css("opacity", 1); $("#content ul").animate({ left: (-li.width()*liIndex) }); } var footLen = $("#content ul li").length; var foots = $("#footer ul"); for (var i = 1; i < footLen-1; i ++) { var childA = $("<a>").html(i); childA.attr("href", "#"); $("<li>").append(childA).insertBefore(foots.children("[step=last]")).attr("step", i); } foots.children(":last").attr("step", footLen-1); foots.css("left", ($(window).width()-foots.width())/2); $("#footer li").click(function() { $("#footer ul li").children().removeClass("active"); $(this).children().addClass("active"); center($(this).attr("step")); }); function myAddEvent(obj, e, fn) { if ( obj.attachEvent ) { obj.attachEvent('on'+e, fn); }else obj.addEventListener(e, fn, false); } function onMouseWheel(ev) { var ev = ev||event; //IE //wheelDelta 下滾:負(fù), 上滾:下 //alert(oEvent.wheelDelta); //FF //detail: 下滾:正, 上滾: 負(fù) //alert(oEvent.detail) var bDown = true; if ( ev.wheelDelta ) { bDown = ev.wheelDelta<0; }else { bDown = ev.detail>0; } if ( !bDown ) { if ( checkFirst() ) return ; showId --; } else { if ( checkLast() ) return ; showId ++; } $("#content").attr("showId", showId); $("#footer ul li").children().removeClass("active").end().eq(showId).children().addClass("active"); center(showId); if ( oEvent.preventDefault ) { oEvent.preventDefault(); } return false; } myAddEvent(window, 'mousewheel', onMouseWheel); myAddEvent(window, 'DOMMouseScroll', onMouseWheel); });
以上所述就是本文給大家介紹的全部內(nèi)容了,希望大家能夠喜歡。
相關(guān)文章
jQuery插件Echarts實(shí)現(xiàn)的漸變色柱狀圖
本文主要介紹了jQuery插件Echarts實(shí)現(xiàn)漸變色柱狀圖的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03jQuery表單獲取和失去焦點(diǎn)輸入框提示效果的實(shí)例代碼
這篇文章介紹了jQuery表單獲取和失去焦點(diǎn)輸入框提示效果的實(shí)例代碼,有需要的朋友可以參考一下2013-08-08jQuery+CSS 實(shí)現(xiàn)的超Sexy下拉菜單
早前發(fā)現(xiàn)了 Soh Tanaka 分享的非常 Sexy 的 Drop Down Menu w/ jQuery & CSS,稍作修改實(shí)現(xiàn)了多級(jí)下拉,并實(shí)現(xiàn)了 ASP.NET 中通過輸出 HTML 動(dòng)態(tài)創(chuàng)建版本,有興趣的童鞋可以包裝成 Server Control。2010-01-01jQuery實(shí)現(xiàn)彈窗居中效果類似alert()
本文給大家分享基于jquery實(shí)現(xiàn)彈窗居中效果類似于alert(),代碼簡單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下2017-02-02使用struts2+Ajax+jquery驗(yàn)證用戶名是否已被注冊
這篇文章主要介紹了使用struts2+Ajax+jquery驗(yàn)證用戶名是否已被注冊的相關(guān)資料,需要的朋友可以參考下2016-03-03jQuery學(xué)習(xí)筆記之回調(diào)函數(shù)
回調(diào)函數(shù)就是一個(gè)通過函數(shù)指針調(diào)用的函數(shù).這篇文章主要介紹了jQuery學(xué)習(xí)筆記之回調(diào)函數(shù)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08jQuery基于json與cookie實(shí)現(xiàn)購物車的方法
這篇文章主要介紹了jQuery基于json與cookie實(shí)現(xiàn)購物車的方法,涉及jQuery操作json格式數(shù)據(jù)與cookie存儲(chǔ)購物車信息的相關(guān)技巧,需要的朋友可以參考下2016-04-04