QQ相册制作-type,div
使用方法：引入JQ库与插件js <link rel="stylesheet" href="css/basic.css" type="text/css" /> <link rel="stylesheet" href="css/galleriffic-3.css" type="text/css" />…
如果你觉得本站不错的话,请行举手之劳推荐给你的朋友,或在博客/空间里做上本站的链接,谢谢!
使用方法：
引入JQ库与插件js
<link rel="stylesheet" href="css/basic.css" type="text/css" />
<link rel="stylesheet" href="css/galleriffic-3.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<script type="text/javascript" src="js/function.js"></script>
添加容器html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QQ图片</title>
<link rel="stylesheet" href="css/basic.css" type="text/css" />
<link rel="stylesheet" href="css/galleriffic-3.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<script type="text/javascript" src="js/function.js"></script>
</head>
<body>
<div id="page">
<div id="container">
<h1>安全检查相册</h1>
<h2>0905</h2>
<!-- Start Advanced Gallery Html Containers -->
<div id="gallery" >
<div id="controls" ></div>
<div >
<div id="loading" ></div>
<div id="slideshow" ></div>
</div>
<div id="caption" ></div>
</div>
<div id="thumbs" >
<ul >
<c:forEach items="${imageList}" var="img">
<li>
<a name="leaf" href="uploadImages/${img}" title="图片">
<img width="100" height="80" src="uploadImages/${img}" alt="图片" />
</a>
</li>
</c:forEach>
</ul>
</div>
<!-- End Advanced Gallery Html Containers -->
<div ></div>
</div>
</div>
</body>
</html>
初始化插件：
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$(div.navigation).css({width : 300px, float : left});
$(div.content).css(display, block);
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$(#thumbs ul.thumbs li).opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
您可能对以下内容感兴趣
