jQuery實現(xiàn)鼠標(biāo)經(jīng)過像翻頁和描點鏈接效果
在百度地圖api首頁經(jīng)常見到當(dāng)鼠標(biāo)經(jīng)過像翻頁和描點鏈接效果,基于jquery和js代碼是如何實現(xiàn)的呢?下面小編給大家分享關(guān)鍵代碼,一起看下吧!
var timer; $("li").on("mouseover",function(){ clearTimeout(timer); timer=null; $(this).addClass("active"); $(this).siblings().removeClass("active"); var $index=$(this).index(); /*$(".wrapper").animate({top:-$index*300});*/ timer=setTimeout(function(){ $(".wrapper").animate({top:-$index*300}); },300) }); $('.dd').find($(".cc")).hover(function(){ $(this).find(".c1").stop().animate({width:0},100,function(){ $(this).hide().next().show().animate({width:300},100); }) },function(){ $(this).find(".c2").animate({width:0},100,function(){ $(this).hide().prev().show().animate({width:300},100); }) }); *{margin:0;padding:0;box-sizing:border-box} ul{list-style:none;border:1px solid #ccc;border-radius:5px;width:900px;margin:30px auto 10px;} .clearfix{zoom:1;} .clearfix:after{content:".";display:block;width:0;height:0;visibility:hidden;clear: both;} li{float:left;border-right:1px solid #ccc;width:20%;text-align:center;height:30px;line-height:30px;cursor:pointer;} li:last-child{border:none;} li.active{background-color:#0099cc;color:#fff;} .container,.wrapper,.con{height:300px;} .container{width:900px;margin:0 auto;position:relative;overflow:hidden;} .wrapper{position:relative;top:0;} .con{line-height:300px;text-align:center;border:1px solid #ccc;} .dd{margin: 30px auto;width:1200px;} .cc{float:left;width:300px;height:200px;overflow:hidden;margin:20px;} .c1,.c2{width:100%;height:100%;margin:0 auto;text-align:center;line-height:200px;cursor:pointer;overflow:hidden} .c1{background-color:#c01110;} .c2{background-color:#0099cc;} <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <!--<form action="#"> <select name="" id="sel1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> <input type="submit" id="sub" value="提交"/> </form>--> <ul class="clearfix"> <li class="active">選項1</li> <li>選項2</li> <li>選項3</li> <li>選項4</li> <li>選項5</li> </ul> <div class="container"> <div class="wrapper"> <div class="con"> 111111 </div> <div class="con"> 222222 </div> <div class="con"> 33333 </div> <div class="con"> 44444 </div> <div class="con"> 55555 </div> </div> </div> <div class="dd clearfix"> <div class="cc"> <div class="c1">111</div> <div class="c2">222</div> </div> <div class="cc"> <div class="c1">111</div> <div class="c2">222</div> </div> <div class="cc"> <div class="c1">111</div> <div class="c2">222</div> </div> <div class="cc"> <div class="c1">111</div> <div class="c2">222</div> </div> <div class="cc"> <div class="c1">111</div> <div class="c2">222</div> </div> <div class="cc"> <div class="c1">111</div> <div class="c2">222</div> </div> </div> </body> </html>
下面給大家介紹下錨點鏈接
1)引入jquery
2)給a標(biāo)簽設(shè)置class smooth
3)
$(".smooth").click(function(){ var href = $(this).attr("href"); var pos = $(href).offset().top; $("html,body").animate({scrollTop:pos}, 1000); return false; });
以上所述是小編給大家介紹的jQuery實現(xiàn)鼠標(biāo)經(jīng)過像翻頁和描點鏈接效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- jQuery實現(xiàn)鼠標(biāo)經(jīng)過時出現(xiàn)隱藏層文字鏈接的方法
- jQuery實現(xiàn)鼠標(biāo)經(jīng)過彈出提示信息的地圖熱點效果
- jquery實現(xiàn)TAB選項卡鼠標(biāo)經(jīng)過帶延遲效果的方法
- jquery實現(xiàn)通用版鼠標(biāo)經(jīng)過淡入淡出效果
- jQuery實現(xiàn)table隔行換色和鼠標(biāo)經(jīng)過變色的兩種方法
- jQuery 鼠標(biāo)經(jīng)過(hover)事件的延時處理示例
- jQuery實現(xiàn)鼠標(biāo)經(jīng)過圖片預(yù)覽大圖效果
- 解決Jquery鼠標(biāo)經(jīng)過不?;瑒拥膯栴}
- JQuery插件iScroll實現(xiàn)下拉刷新,滾動翻頁特效
相關(guān)文章
使用jQuery.wechat構(gòu)建微信WEB應(yīng)用
本期要講的就是我痛苦中掙扎徘徊后寫的jQuery.wechat,一個提供了統(tǒng)一API的、基于jQuery.promise的jQuery.plugin。希望能多少幫助到大家。2014-10-10自己動手制作jquery插件之自動添加刪除行的實現(xiàn)
我們常常會遇到這樣的情況,一個系統(tǒng)中有大量的需要對一個行進(jìn)行復(fù)制添加,希望能夠進(jìn)行批量的操作,這個時候,我們就可以考慮把它做成一個jquery插件了.2011-10-10