jQuery图片点击放大特效

来源:https://www.sucaihuo.com/js/3033.html 2017-09-17 23:03浏览(1664) 收藏

一款jQuery图片点击放大特效,上面两张的效果相同,都是点击小图后逐渐变大显示大图,下面两张则是快速放大切换到大图显示。
jQuery图片点击放大特效
分类:图片代码 > 图片相册 难易:初级
查看演示 下载资源: 56 下载资源 下载积分: 20 积分

页面的head部分,需引入页面的样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/css.css" />

页面的body部分,需在div容器里放入多个图片链接,代码如下:

<div id="content">
	<a class="example1" href="images/d2.jpg"><img src="images/x2.jpg" /></a>
    <a class="example1" href="images/d1.jpg"><img src="images/x1.jpg" /></a>
    <br /><br />
	<a class="example2" href="images/d3.jpg"><img src="images/x3.jpg" /></a>
    <a class="example2" href="images/d4.jpg"><img src="images/x4.jpg" /></a>
</div>

页面的底部,需引入两个必要的js文件,并对指定元素启用图片放大特效,代码如下:

<script type="text/javascript" src="js/jqueryLibrary.min.js"></script>
<script type="text/javascript" src="js/jquery.imgbox.pack.js"></script>
<script type="text/javascript">
$(function(){
	$(".example1").imgbox();
	$(".example2").imgbox({
		'speedIn'		: 0,
		'speedOut'		: 0,
		'alignment'		: 'center',
		'overlayShow'	: true,
		'allowMultiple'	: false
	});
});
</script>
评论3
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 板凳
    03-28 09:04
    A***賓
    可以,先拿来试试看吧
  • 头像 椅子
    09-25 16:43
    水***思
    实用,很好
  • 头像 沙发
    09-18 10:58
    梦***梦
    看着还行,下下来看看
1 2