jQuery插件MovingBoxes實(shí)現(xiàn)左右滑動中間放大圖片效果
更新時(shí)間：2017年02月28日 14:31:54 作者：285267128
本篇文章主要介紹jQuery中MovingBoxes左右滑動放大圖片插件示例，實(shí)現(xiàn)左右滑動和放大效果，有興趣的可以了解一下。
MovingBoxes左右滑動放大圖片插件在產(chǎn)品預(yù)覽時(shí)很有用哦
實(shí)例代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MovingBoxes滑動放大圖片插件</title>
<link type="text/css" href="/api/jq/5733e358c8829/css/style.css" rel="external nofollow" rel="stylesheet">
<script type="text/javascript" src="/api/jq/5733e358c8829/js/jquery.js"></script>
<script type="text/javascript" src="/api/jq/5733e358c8829/js/jquery.movingboxes.js"></script>
<script type="text/javascript">
$(function() {
$('#focus').movingBoxes({
startPanel: 1, // 從第一個(gè)li開始
reducedSize: .5, // 縮小到原圖50%的尺寸
wrap: true, // 是否無縫循環(huán)
buildNav: false, // 是否顯示分頁
navFormatter: function() {
return "●";// 返回分頁格式
}
});
});
</script>
</head>
<body>
<!-- 代碼開始 -->
<ul id="focus">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="/api/jq/5733e358c8829/images/img01.jpg"></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="/api/jq/5733e358c8829/images/img02.jpg"></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="/api/jq/5733e358c8829/images/img03.jpg"></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="/api/jq/5733e358c8829/images/img04.jpg"></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="/api/jq/5733e358c8829/images/img05.jpg"></a></li>
</ul>
<!-- 代碼結(jié)束 -->
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要是對jQuery控制iFrame的實(shí)例代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
很多網(wǎng)站都應(yīng)用了評分效果，讓用戶可以對正在瀏覽的文章、電影、資源等進(jìn)行評分，讓網(wǎng)站增添了幾分互動效果。本文將講解如何使用jQuery來實(shí)現(xiàn)評分效果。2015-05-05
這篇文章主要介紹了jquery ajax 請求小技巧,結(jié)合實(shí)例形式分析了jquery ajax請求操作相關(guān)配置與使用技巧,需要的朋友可以參考下2019-11-11
jquery實(shí)現(xiàn)帶縮略圖的全屏圖片畫廊效果實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)帶縮略圖的全屏圖片畫廊效果,實(shí)例分析了jquery帶縮略圖的全屏效果圖片實(shí)現(xiàn)技巧,并附有完整的源碼下載,需要的朋友可以參考下2015-06-06
空閑時(shí)候?qū)懙囊恍﹋query小代碼，雖然就幾分鐘完成的小代碼，但每天保持練習(xí)，不至于頭腦會生銹；2009-08-08
jquery實(shí)現(xiàn)刷新隨機(jī)變化樣式特效（tag標(biāo)簽樣式）
本文主要介紹了tag標(biāo)簽隨機(jī)多彩變化的超鏈接樣式，使用JQ+DIV+CSS實(shí)現(xiàn)刷新隨機(jī)變化樣式特效。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
JQuery復(fù)選框全選效果如何實(shí)現(xiàn)
這篇文章主要介紹了JQuery復(fù)選框全選效果如何實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
Jquery實(shí)現(xiàn)搜索框提示功能示例代碼
數(shù)據(jù)量很大的情況下使用Ajax去實(shí)現(xiàn)真的不合適，于是想采用Jquery來實(shí)現(xiàn)方法，具體的示例代碼如下，有需求的朋友可以參考下希望對大家有所幫助2013-08-08
jQuery選擇器源碼解讀（四）：tokenize方法的Expr.preFilter
這篇文章主要介紹了jQuery選擇器源碼解讀（四）：tokenize方法的Expr.preFilter,本文用詳細(xì)的注釋解讀了tokenize方法的Expr.preFilter的實(shí)現(xiàn)源碼,需要的朋友可以參考下2015-03-03
jquery實(shí)現(xiàn)仿Flash的橫向滑動菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)仿Flash的橫向滑動菜單效果代碼,可實(shí)現(xiàn)滑塊跟隨鼠標(biāo)滑動效果的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09