jquery鼠标悬停遮罩图文切换特效代码下载


jquery鼠标悬停遮罩图文切换特效代码下载
jquery鼠标悬停遮罩图文切换特效代码下载以及鼠标悬停遮罩、图文切换等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/index.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>

3. HTML代码

	<!--从底部上升的遮罩效果  开始-->
	<h2 class="content-title">一、从底部上升的遮罩效果</h2>
	<div class="content">
		<ul class="contentbox">
			<li class="con">
				<img src="images/class1.jpg" alt="con1"/>
				<div class="txt">
					<h3>图片一</h3>
					<p>内容一内容一内容一内容一内容一内容一</p>
				</div>
			</li>
			<li class="con">
				<img src="images/class2.jpg" />
				<div class="txt">
					<h3>图片二</h3>
					<p>内容二内容二内容二内容二内容二内容二</p>
				</div>
			</li>
			<li class="con">
				<img src="images/class3.jpg"/>
				<div class="txt">
					<h3>图片三</h3>
					<p>内容三内容三内容三内容三内容三内容三</p>
				</div>
			</li>
			<li class="con">
				<img src="images/class4.jpg"/>
				<div class="txt">
					<h3>图片四</h3>
					<p>内容四内容四内容四内容四内容四内容四</p>
				</div>
			</li>
			<li class="con">
				<img src="images/class5.jpg"/>
				<div class="txt">
					<h3>图片五</h3>
					<p>内容五内容五内容五内容五内容五内容五</p>
				</div>
			</li>
			<li class="con">
				<img src="images/class6.jpg"/>
				<div class="txt">
					<h3>图片六</h3>
					<p>内容六内容六内容六内容六内容六内容六</p>
				</div>
			</li>
		</ul>
	</div>
	<!--从底部上升的遮罩效果  结束-->
	<!--直接显示遮罩效果  开始-->
	<h2 class="content-title">二、直接显示遮罩效果</h2>
	<div class="content-two">
		<ul class="contentbox-two">
			<li class="con-two">
				<img src="images/class1.jpg"/>
				<div class="txt-two">
					<h3>图片一</h3>
					<p>内容一内容一内容一内容一内容一内容一</p>
				</div>
			</li>
			<li class="con-two">
				<img src="images/class2.jpg"/>
				<div class="txt-two">
					<h3>图片二</h3>
					<p>内容二内容二内容二内容二内容二内容二</p>
				</div>
			</li>
			<li class="con-two">
				<img src="images/class3.jpg"/>
				<div class="txt-two">
					<h3>图片三</h3>
					<p>内容三内容三内容三内容三内容三内容三</p>
				</div>
			</li>
			<li class="con-two">
				<img src="images/class4.jpg"/>
				<div class="txt-two">
					<h3>图片四</h3>
					<p>内容四内容四内容四内容四内容四内容四</p>
				</div>
			</li>
			<li class="con-two">
				<img src="images/class5.jpg"/>
				<div class="txt-two">
					<h3>图片五</h3>
					<p>内容五内容五内容五内容五内容五内容五</p>
				</div>
			</li>
			<li class="con-two">
				<img src="images/class6.jpg"/>
				<div class="txt-two">
					<h3>图片六</h3>
					<p>内容六内容六内容六内容六内容六内容六</p>
				</div>
			</li>
		</ul>
	</div>
	<!--直接显示遮罩效果  结束-->
	<!--从左上部显示遮罩效果  开始-->
	<h2 class="content-title">三、从侧部显示遮罩效果</h2>
	<div class="content-three">
		<ul class="contentbox-three">
			<li class="con-three">
				<img src="images/class1.jpg"/>
				<div class="txt-three">
					<h3>图片一</h3>
					<p>内容一内容一内容一内容一内容一内容一</p>
				</div>
			</li>
			<li class="con-three">
				<img src="images/class2.jpg"/>
				<div class="txt-three">
					<h3>图片二</h3>
					<p>内容二内容二内容二内容二内容二内容二</p>
				</div>
			</li>
			<li class="con-three">
				<img src="images/class3.jpg"/>
				<div class="txt-three">
					<h3>图片三</h3>
					<p>内容三内容三内容三内容三内容三内容三</p>
				</div>
			</li>
			<li class="con-three">
				<img src="images/class4.jpg"/>
				<div class="txt-three">
					<h3>图片四</h3>
					<p>内容四内容四内容四内容四内容四内容四</p>
				</div>
			</li>
			<li class="con-three">
				<img src="images/class5.jpg"/>
				<div class="txt-three">
					<h3>图片五</h3>
					<p>内容五内容五内容五内容五内容五内容五</p>
				</div>
			</li>
			<li class="con-three">
				<img src="images/class6.jpg"/>
				<div class="txt-three">
					<h3>图片六</h3>
					<p>内容六内容六内容六内容六内容六内容六</p>
				</div>
			</li>
		</ul>
	</div>
	<!--从左上部显示遮罩效果  结束-->
	<!--从左侧显示遮罩效果  开始-->
	<h2 class="content-title">四、从左侧滑入显示遮罩效果</h2>
	<div class="content-four">
		<ul class="contentbox-four">
			<li class="con-four">
				<img src="images/class1.jpg"/>
				<div class="txt-four">
					<h3>图片一</h3>
					<p>内容一内容一内容一内容一内容一内容一</p>
				</div>
			</li>
			<li class="con-four">
				<img src="images/class2.jpg"/>
				<div class="txt-four">
					<h3>图片二</h3>
					<p>内容二内容二内容二内容二内容二内容二</p>
				</div>
			</li>
			<li class="con-four">
				<img src="images/class3.jpg"/>
				<div class="txt-four">
					<h3>图片三</h3>
					<p>内容三内容三内容三内容三内容三内容三</p>
				</div>
			</li>
			<li class="con-four">
				<img src="images/class4.jpg"/>
				<div class="txt-four">
					<h3>图片四</h3>
					<p>内容四内容四内容四内容四内容四内容四</p>
				</div>
			</li>
			<li class="con-four">
				<img src="images/class5.jpg"/>
				<div class="txt-four">
					<h3>图片五</h3>
					<p>内容五内容五内容五内容五内容五内容五</p>
				</div>
			</li>
			<li class="con-four">
				<img src="images/class6.jpg"/>
				<div class="txt-four">
					<h3>图片六</h3>
					<p>内容六内容六内容六内容六内容六内容六</p>
				</div>
			</li>
		</ul>
	</div>
	<!--从左侧显示遮罩效果  结束-->
	<!--图片放大效果  开始-->
	<h2 class="content-title">五、鼠标滑过图片放大效果</h2>
	<div class="content-five">
		<ul class="contentbox-five">
			<li class="con-five">
				<img class="conimg" src="images/class1.jpg"/>
				<div class="txt-five">
					<h3>图片一</h3>
					<!--<p>为您铺就成为IT大神的在线学习之路</p>-->
				</div>
			</li>
			<li class="con-five">
				<img class="conimg" src="images/class2.jpg"/>
				<div class="txt-five">
					<h3>图片二</h3>
					<!--<p>英语、韩语、日语各类语言课程一网打尽</p>-->
				</div>
			</li>
			<li class="con-five">
				<img class="conimg" src="images/class3.jpg"/>
				<div class="txt-five">
					<h3>图片三</h3>
					<!--<p>传授会计师、建筑师等各类考证学习宝典</p>-->
				</div>
			</li>
			<li class="con-five">
				<img class="conimg" src="images/class4.jpg"/>
				<div class="txt-five">
					<h3>图片四</h3>
					<!--<p>小学、初中、高中各科课程在线辅导</p>-->
				</div>
			</li>
			<li class="con-five">
				<img class="conimg" src="images/class5.jpg"/>
				<div class="txt-five">
					<h3>图片五</h3>
					<!--<p>吉他、摄影等各类型区教程让你成为生活达人</p>-->
				</div>
			</li>
			<li class="con-five">
				<img class="conimg" src="images/class6.jpg"/>
				<div class="txt-five">
					<h3>图片六</h3>
					<!--<p>教你如何和宝宝一起成长</p>-->
				</div>
			</li>
		</ul>
	</div>
	<!--图片放大效果  结束-->
	<!--图片放大效果伴随蒙版文字出现  开始-->
	<h2 class="content-title">六、图片放大效果伴随蒙版文字出现效果</h2>
	<div class="content-six">
		<ul class="contentbox-six">
			<li class="con-six">
				<img class="conimg-two" src="images/class1.jpg"/>
				<div class="txt-six">
					<h3>图片一</h3>
					<!--<p>为您铺就成为IT大神的在线学习之路</p>-->
				</div>
			</li>
			<li class="con-six">
				<img class="conimg-two" src="images/class2.jpg"/>
				<div class="txt-six">
					<h3>图片二</h3>
					<!--<p>英语、韩语、日语各类语言课程一网打尽</p>-->
				</div>
			</li>
			<li class="con-six">
				<img class="conimg-two" src="images/class3.jpg"/>
				<div class="txt-six">
					<h3>图片三</h3>
					<!--<p>传授会计师、建筑师等各类考证学习宝典</p>-->
				</div>
			</li>
			<li class="con-six">
				<img class="conimg-two" src="images/class4.jpg"/>
				<div class="txt-six">
					<h3>图片四</h3>
					<!--<p>小学、初中、高中各科课程在线辅导</p>-->
				</div>
			</li>
			<li class="con-six">
				<img class="conimg-two" src="images/class5.jpg"/>
				<div class="txt-six">
					<h3>图片五</h3>
					<!--<p>吉他、摄影等各类型区教程让你成为生活达人</p>-->
				</div>
			</li>
			<li class="con-six">
				<img class="conimg-two" src="images/class6.jpg"/>
				<div class="txt-six">
					<h3>图片六</h3>
					<!--<p>教你如何和宝宝一起成长</p>-->
				</div>
			</li>
		</ul>
	</div>
	<!--图片放大效果伴随蒙版文字出现  结束-->

相关推荐

发表评论

相关文章