利用jQuery實現點擊彈窗圖片放大預覽查看



23 88 30



特效描述:利用jQuery實現 點擊彈窗 圖片放大 預覽查看,利用jQuery實現點擊彈窗圖片放大預覽查看

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/pictureViewer.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/pictureViewer.js"></script>

3. HTML代碼

<div class="main-content">
    <h4 class="title">點擊任意圖片使用插件</h4>
    <h3 class="title">交互:ESC鍵關閉彈框,左鍵、右鍵和鼠標滾輪切換圖片</h3>
    <div class="image-list">
        <div class="cover"><img src="images/0.png" alt=""></div>
        <div class="cover"><img src="images/1.png" alt=""></div>
        <div class="cover"><img src="images/2.png" alt=""></div>
        <div class="cover"><img src="images/3.png" alt=""></div>
        <div class="cover"><img src="images/4.png" alt=""></div>
        <div class="cover"><img src="images/5.png" alt=""></div>
    </div>
</div>
<script>
$(function () {
	$('.image-list').on('click', '.cover', function () {
		var this_ = $(this);
		var images = this_.parents('.image-list').find('.cover');
		var imagesArr = new Array();
		$.each(images, function (i, image) {
			imagesArr.push($(image).children('img').attr('src'));
		});
		$.pictureViewer({
			images: imagesArr, //需要查看的圖片,數據類型為數組
			initImageIndex: this_.index() + 1, //初始查看第幾張圖片,默認1
			scrollSwitch: true //是否使用鼠標滾輪切換圖片,默認false
		});
	});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 lightbox 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 澳洲幸运5开奖号码 下载急速赛车 超级捕鱼大亨系统 重庆幸运农场走势 2019股票配资平台官方排名 广东好彩1最新开奖结果查询 短线股票 精准24码单双必中特 大唐游戏下载安装 秒速快三计划群网站 云南11选5任二遗漏 北京十一选五前三遗 pk10网站 网络捕鱼赢钱游戏技巧 广东快乐十分keno彩票 幸运飞艇最快开奖官网