jQuery图片相册点击放大展示特效代码下载


jQuery图片相册点击放大展示特效代码下载
jQuery图片相册点击放大展示特效代码下载以及图片相册、点击放大展示等js/jquery网页特效代码下载。

1. 引入JS

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/plusview.js"></script>

2. HTML代码

<div class="menu">
	<a class="cur" href="index.html">演示1(默认)</a>
	<a href="index_2.html">演示2(无动画)</a>
	<a href="index_3.html">演示3(自动播放)</a>
</div>
<div class="plusview">
	<ul>
		<li>
			<a href="images/1b.jpg" data-type="image">
				<img src="images/1s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/2b.jpg" data-type="image">
				<img src="images/2s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/3b.jpg" data-type="image">
				<img src="images/3s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/4b.jpg" data-type="image">
				<img src="images/4s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/5b.jpg" data-type="image">
				<img src="images/5s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/6b.jpg" data-type="image">
				<img src="images/6s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/7b.jpg" data-type="image">
				<img src="images/7s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/8b.jpg" data-type="image">
				<img src="images/8s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/9b.jpg" data-type="image">
				<img src="images/9s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/10b.jpg" data-type="image">
				<img src="images/10s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/11b.jpg" data-type="image">
				<img src="images/11s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/12b.jpg" data-type="image">
				<img src="images/12s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/13b.jpg" data-type="image">
				<img src="images/13s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/14b.jpg" data-type="image">
				<img src="images/14s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/15b.jpg" data-type="image">
				<img src="images/15s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/16b.jpg" data-type="image">
				<img src="images/16s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/17b.jpg" data-type="image">
				<img src="images/17s.jpg" alt="">
			</a>
		</li>
		<li>
			<a href="images/18b.jpg" data-type="image">
				<img src="images/18s.jpg" alt="">
			</a>
		</li>
	</ul>
</div>
<script>
$(function() {
	$('.plusview').plusview();
});
</script>
<!-- 以下是统计和广告,与演示无关,不必理会 -->
<style>
.menu { height: 30px; margin-bottom: 30px; padding: 10px; background-color: #f0f0f0; text-align: center;}
.menu a { display: inline-block; height: 30px; padding: 0 20px; line-height: 30px; font-size: 14px; color: #333; text-decoration: none;}
.menu a:hover { color: #000; background-color: #e9e9e9;}
.menu .cur { background-color: #ddd !important; color: #000;}
</style>

相关推荐

发表评论

相关文章