jQuery图片点击全屏预览特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

26 102 35



特效描述:图片点击 全屏预览。jQuery图片点击全屏预览特效是一款基于swiper.js制作的移动端图片点击全屏遮罩预览,双击或手指滑动控制图片切换缩放效果。

代码结构

1. 引入CSS

<link href="./assets/css/reset.css" rel="stylesheet">
<link href="./assets/css/swiper.min.css" rel="stylesheet">
<link href="./assets/css/style.css" rel="stylesheet">

2. 引入JS

<script type="text/javascript" src="./assets/js/jquery.min.js"></script>
<script type="text/javascript" src="./assets/js/swiper.min.js"></script>
<script type="text/javascript" src="./assets/js/swiper_edit.js"></script>

3. HTML代码

<div class="courseDetail thumb" thumblist="list1">
	<img src="./assets/images/2.jpg">           
	<img src="./assets/images/3.jpg">           
	<img src="./assets/images/1.jpg">           
</div>
<div class="swiper-container swiper-container-virtual swiper-container-horizontal" id="origin-img" style="display: none;">
	<div class="swiper-wrapper"></div>
	<div class="swiper-pagination swiper-pagination-fraction">
		<span class="swiper-pagination-current">1</span> / <span class="swiper-pagination-total">3</span>
	</div>
</div>
<script type="text/javascript">
    // 图片对象数据-多组图片点击缩放轮播
    // 数据是url路径,或者图片名称,swiper_edit.js中再做路径调整
    imgsdata={
        "list1":[
            "./assets/images/2.jpg",
            "./assets/images/3.jpg",
            "./assets/images/1.jpg",
        ]
    }
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:Chrome、FireFox、360、搜狗、Opera、傲游. 不支持Windows版Safari、IE8及以下浏览器。</p>
<p>来源:<a href="http://sc.51qianduan.com/" target="_blank">站长素材</a></p>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到