注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

百鬼夜行

身是菩提树,心如明镜台,时时勤拂拭,勿使惹尘埃。

 
 
 

日志

 
 

jQuery响应式幻灯片插件-iView (HTML)  

2013-10-31 17:01:22|  分类: 17sucai网的DEMO |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<!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>JS代码频道</title>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{text-decoration:none;color:#d0d9de;}
a:hover{color:#FFF;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* topmenu */
#topmenu{width:810px;margin:30px auto 0 auto;height:40px;position:relative;}
#topmenu ul{margin:0;padding:0;}
#topmenu ul li{float:left;font-size:12px;list-style:none;background:#222;position:relative;text-align:center;text-transform:uppercase;width:70px;margin:0 10px;display:inline;line-height:30px;}
#topmenu ul li a{color:#aaa;text-decoration:none;}
#topmenu ul li a:hover{color:#fff;}
#topmenu ul li.active a{color:#fff;font-weight:800;}
</style> 

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

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/iview.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#iview').iView({
		pauseTime: 7000,
		directionNav: false,
		controlNav: true,
		tooltipY: -15
	});
});
</script>

</head>
<body>

<div style="background:url(img/bckg.jpg) no-repeat 50% 50%;height:700px;overflow:hidden;">

	<div id="topmenu">
		<ul>
			<li class="active"><a href="index.html">实例一</a></li>
			<li><a href="index2.html">实例二</a></li>
			<li><a href="index3.html">实例三</a></li>
			<li><a href="index4.html">实例四</a></li>
			<li><a href="index5.html">实例五</a></li>
		</ul>
	</div>

	<div class="container">
		<div id="iview">
			<div data-iview:image="photos/photo1.jpg" data-iview:transition="slice-top-fade,slice-right-fade">
				<div class="iview-caption caption1" data-x="80" data-y="200">iView<sup>&trade;</sup></div>
				<div class="iview-caption" data-x="80" data-y="275" data-transition="wipeRight">The world's most awesome jQuery Image & Content Slider</div>
				<div class="iview-caption" data-x="254" data-y="320" data-transition="wipeLeft"><i>Presented by <b>Hemn Chawroka</b></i></div>
			</div>
		
			<div data-iview:image="photos/photo2.jpg" data-iview:transition="zigzag-drop-top,zigzag-drop-bottom" data-iview:pausetime="3000">
				<div class="iview-caption caption5" data-x="60" data-y="280" data-transition="wipeDown">Captions can be positioned and resized freely</div>
				<div class="iview-caption caption6" data-x="300" data-y="350" data-transition="wipeUp"><a href="#">Example URL-link</a></div>
			</div>
		
			<div data-iview:image="photos/video.jpg" data-iview:type="video" data-iview:transition="strip-right-fade,strip-left-fade">
				<iframe src="http://player.vimeo.com/video/11475955?byline=1&amp;portrait=0" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
				<div class="iview-caption caption2" data-x="450" data-y="340" data-transition="wipeRight">Video</div>
				<div class="iview-caption caption3" data-x="600" data-y="345" data-transition="wipeLeft">Support</div>
			</div>
		
			<div data-iview:image="photos/photo3.jpg">
				<div class="iview-caption caption4" data-x="50" data-y="80" data-width="312" data-transition="fade">Some of iView's Options:</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="135" data-transition="wipeLeft" data-easing="easeInOutElastic">Touch swipe for iOS and Android devices</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="192" data-transition="wipeLeft" data-easing="easeInOutElastic">Image And Thumbs Fully Resizable</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="249" data-transition="wipeLeft" data-easing="easeInOutElastic">Customizable Transition Effect</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="306" data-transition="wipeLeft" data-easing="easeInOutElastic">Freely Positionable and Stylable Captions</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="363" data-transition="wipeLeft" data-easing="easeInOutElastic">Cross Browser Compatibility!</div>
			</div>
		
			<div data-iview:image="photos/photo4.jpg">
				<div class="iview-caption caption7" data-x="0" data-y="0" data-width="180" data-height="480" data-transition="wipeRight">
					<h3>The Responsive Caption</h3>
					<p>This is the product that you <b><i>all have been waiting for</b></i>!<br><br>Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message.<br><br>All in all it works on every browser (including IE6 / 7 / 8) and on iOS and Android devices!</p>
				</div>
			</div>
		
			<div data-iview:image="photos/photo5.jpg">
				<div class="iview-caption caption5" data-x="60" data-y="150" data-transition="wipeLeft">What are you waiting for?</div>
				<div class="iview-caption caption6" data-x="160" data-y="230" data-transition="wipeRight">Get it Now!</div>
			</div>
		</div>
	</div>

</div>
    
</body>
</html>
  评论这张
 
阅读(176)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018