利用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

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

老夫子电子 王者荣耀大乔 3d买组六稳赚法 今年小本赚钱代理项目 河南麻将规则 街机金蟾捕鱼下载安装 广西快乐十分最新开奖结果 双色球开奖结果走势图表近50期 360竞彩足球现场直播 山东11选5遗漏top10 2016江西时时彩风波 bbin安卓版下载 幸运飞艇必中计划软件 pk10软件计划下载 极速时时彩开奖程序 可以买山西十一选五 自动阅读看新闻赚钱