js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 窗口特效

jquery实现点击小图,遮罩弹出大图,带幻灯片切换特效

发布时间:2015-09-09 08:23:50    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jquery实现点击小图,遮罩弹出大图,带幻灯片切换特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
	<head>    
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
		<title>jquery实现点击小图,遮罩弹出大图,带幻灯片切换特效</title>    
		<meta name="keywords" content="jquery特效,jquery弹出层插件,弹出层插件,遮罩层" />    
		<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />    
		<link type='text/css' href='css/gallery.css' rel='stylesheet' media='screen' />    
	</head>    
	<body>    
		<br><br><br><center><h1>点击图片查看效果</h1></center><br><br>    
		<div id='container'>    
			<span class="flickr_badge_image"><a href="img/photo/1.jpg"><img src="img/photo/1.jpg" alt="js代码特效网" title="js代码特效网标题一" width="75" height="75"></a></span>    
			<span class="flickr_badge_image"><a href="img/photo/2.jpg"><img src="img/photo/2.jpg" alt="js代码特效网" title="js代码特效网标题二" width="75" height="75"></a></span>    
			<span class="flickr_badge_image"><a href="img/photo/3.jpg"><img src="img/photo/3.jpg" alt="js代码特效网" title="js代码特效网标题三" width="75" height="75"></a></span>    
			<span class="flickr_badge_image"><a href="img/photo/4.jpg"><img src="img/photo/4.jpg" alt="js代码特效网" title="js代码特效网标题四" width="75" height="75"></a></span>    
			<span class="flickr_badge_image"><a href="img/photo/5.jpg"><img src="img/photo/5.jpg" alt="js代码特效网" title="js代码特效网标题五" width="75" height="75"></a></span>    
		</div>    
		<script type='text/javascript' src='js/jquery.js'></script>     
		<script type='text/javascript' src='js/jquery.simplemodal.js'></script>     
		<script type='text/javascript' src='js/gallery.js'></script>    
	</body>    
</html>



遮罩弹窗 幻灯片
友荐云推荐
大家说 此评论不代表本站观点