H5 相册展示采用facybox小插件

最新推荐文章于 2022-01-09 17:38:13 发布

polestar.wang

最新推荐文章于 2022-01-09 17:38:13 发布

阅读量1.5k

点赞数 1

分类专栏： H5 文章标签： html5 jquery

本文链接：https://blog.csdn.net/wangdingfeng5141/article/details/52300385

版权

H5 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

火狐对h5的兼容最好，请使用火狐浏览器

Fancybox是一款优秀的jquery插件，它能够展示丰富的弹出层效果。fancybox功能更为齐全，它除了可以加载DIV，图片、图片集、Ajax数据，还能加载SWF影片，iframe页面等等。

下载地址

http://www.fancybox.net/

效果

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>高级相册</title>
	<link rel="stylesheet" href="css/photo.css">
	<script src="libs/jquery.js"></script>
	<script src="libs/fancybox/jquery.fancybox.js"></script>
	<script src="libs/fancybox/helpers/jquery.fancybox-buttons.js"></script>
	<script src="libs/fancybox/helpers/jquery.fancybox-thumbs.js"></script>
	<link rel="stylesheet" href="libs/fancybox/jquery.fancybox.css">
	<link rel="stylesheet" href="libs/fancybox/helpers/jquery.fancybox-buttons.css">
	<link rel="stylesheet" href="libs/fancybox/helpers/jquery.fancybox-thumbs.css">
</head>
<body>
	<main id="xc">
		<div style="background:url(images/thumbs/0.jpg)">
			<a href="images/0.jpg" rel="group">图片0</a>
		</div>
		<div style="background:url(images/thumbs/1.jpg)">
			<a href="images/1.jpg" rel="group">图片1</a>
		</div>
		<div style="background:url(images/thumbs/2.jpg)">
			<a href="images/2.jpg" rel="group">图片2</a>
		</div>
		<div style="background:url(images/thumbs/3.jpg)">
			<a href="images/3.jpg" rel="group">图片3</a>
		</div>
	    <div style="background:url(images/thumbs/4.jpg)">
			<a href="images/4.jpg" rel="group">图片4</a>
		</div>
	    <div style="background:url(images/thumbs/5.jpg)">
			<a href="images/5.jpg" rel="group">图片5</a>
		</div>
	    <div style="background:url(images/thumbs/6.jpg)">
			<a href="images/6.jpg" rel="group">图片6</a>
		</div>
		<div style="background:url(images/thumbs/7.jpg)">
			<a href="images/7.jpg" rel="group">图片7</a>
		</div>
		<div style="background:url(images/thumbs/8.jpg)">
			<a href="images/8.jpg" rel="group">图片8</a>
		</div>
		<div style="background:url(images/thumbs/9.jpg)">
			<a href="images/9.jpg" rel="group">图片9</a>
		</div>
		<div style="background:url(images/thumbs/10.jpg)">
			<a href="images/10.jpg" rel="group">图片10</a>
		</div>
	</main>
</body>
<script src="xc.js"></script>
</html>

css

html{
	height: 100%;
}
body{
	height: 100%;
	margin: 0px;
	background: #333;
}
#xc div{
	width: 150px;
	height: 100px;
	border: 5px solid #fff;
	border-bottom: 18px solid #fff;
}
#xc div a{
	width: 100%;
	height: 100%;
	/*a行内元素必须转化块级元素才能设置宽高 */
	display: block;
	/*首行缩进*/
	text-indent: -200px;
	overflow:  hidden;
}
#xc div:hover{
	/*!important 处理样式的优先级,最高级*/
	transform:  rotate(0) scale(1.5) !important;
	/*状态转换过渡时间 默认值0*/
	transition: 1s;
	/*层级关系:值越大在最上层*/
	z-index: 100;
}

function arrange(){
    var h = $(window).height();
    var w = $(window).width();
    var centerX = w / 2;
    var centerY = h / 2;
    // alert(h+"x"+w);
    $("#xc div").each(function(){
        var left = centerX / 2 + Math.random() * centerX - 50;
        var top =  centerY / 2 + Math.random() * centerY - 60;
        var rotate = Math.random() * 80 - 40;
        $(this).css({
            "position":"absolute",
            "left":left,
            "top":top,
            "transform":"rotate("+rotate+"deg)"
        })
    })
}
arrange();
// 窗口实时改变,重新执行arrange,改变相册的样式
$(window).resize(arrange);
$(function(){
    $("#xc div a").fancybox({
    openEffect:"elastic",
    closeEffect:"elastic",
    // 去掉图册的关闭
    closeBtn:false,
    // 自动播放
    autoPlay:true,
    helpers:{
        buttons:{ },
        thumbs:{ alwaysCenter:true},
        title:{}
    },
    beforeLoad:function(){
        //获取该标签内部的内容
        this.title = $(this.element).text();
    }
})
})

需要代码的请微博私信TryCatche

polestar.wang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
H5 相册展示采用facybox小插件

火狐对h5的兼容最好，请使用火狐浏览器Fancybox是一款优秀的jquery插件，它能够展示丰富的弹出层效果。fancybox功能更为齐全，它除了可以加载DIV，图片、图片集、Ajax数据，还能加载SWF影片，iframe页面等等。下载地址http://www.fancybox.net/效果html 高级相册
复制链接

扫一扫