jquery图片切换插件制作图片与文字切换特效



160 636 213



特效描述:jquery 图片切换插件 图片文字切换特效,jquery图片切换插件,制作图片和文字切换特效,图片压扁与文字动画滚动、图片滚动与文字动画滚动、图片与文字淡隐淡现等图文切换效果。jQuery插件。

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jq.imgTxtCut.js"></script>

3. HTML代码

	<h1>【jquery插件】图文切换效果</h1>
	<div class="table-box">
		<table width="600" border="0" cellspacing="0" cellpadding="0" class="KS-table">
			<tr>
				<td colspan="2">参数:</td>
			</tr>
			<tr>
				<td width="36%">effects</td>
				<td width="64%">flaser效果(默认)<br />“scroll”效果<br />“fade”效果</td>
			</tr>
			<tr>
				<td>speed</td>
				<td>效果执行时间;normal(默认)</td>
			</tr>
		</table>
	</div>
	<hr />
	<h2>图片压扁与文字动画滚动 flaser效果(默认)</h2>
	<pre>$("#img-txt-box1").imgTxtCut({
	speed : 300
	});</pre>
	<div class="img-txt-flaser clearfix" id="img-txt-box1">
		<ul>
			<li>
				<div class="imgBox">
					<a target="_blank" href="http://www.dijiuzhanzhang.com/"><img src="images/smalld84e378b75983100be152e4d0e4a4b72.jpg" width="150" height="150" alt="jquery图片对联广告制作jQuery侧面浮动图片广告" /></a>
				</div>
				<div class="txtBox">
					<h3><a href="http://www.dijiuzhanzhang.com/">jquery图片对联广告制作jQuery侧面浮动图片广告</a></h3>
					<p><a href="http://www.dijiuzhanzhang.com/">jquery浮动对联图片广告制作一个侧面浮动图片广告特效,类似滚屏效果的图片广告。jQuery下载。</a></p>
				</div>
			</li>
			<li>
				<div class="imgBox">
					<a target="_blank" href="http://www.dijiuzhanzhang.com/"><img src="images/small76d7b4e9ff38bfd80496f1bae32c71bf.jpg" width="150" height="150" alt="div css3样式表制作css3图片聚光灯特效" /></a>
    			</div>
				<div class="txtBox">
					<h3><a href="http://www.dijiuzhanzhang.com/">div css3样式表制作css3图片聚光灯特效</a></h3>
					<p><a href="http://www.dijiuzhanzhang.com/">div布局和css3样式表打造社交图标图片聚光灯特效。css3样式控制滑过单个社交图标时,当前高亮,其它图标变暗的css3图片聚光灯特效。</a></p>
				</div>
			</li>
			<li>
				<div class="imgBox">
					<a target="_blank" href="http://www.dijiuzhanzhang.com/"><img src="images/small989e3d7a1959211a37c2df254fda6b4d.jpg" width="150" height="150" alt="div+css多张背景图片规范写法图片透明度显示" /></a>
    			</div>
				<div class="txtBox">
					<h3><a href="http://www.dijiuzhanzhang.com/">div+css多张背景图片规范写法图片透明度显示</a></h3>
					<p><a href="http://www.dijiuzhanzhang.com/">div+css教程多张背景图片最规范的书写方法,当鼠标滑过A标签背景图片透明度显示。</a></p>
				</div>
			</li>
			<li>
				<div class="imgBox"><a target="_blank" href="http://www.dijiuzhanzhang.com/"><img src="images/smallf8852cb544db25262e53339e2ba4b17e.jpg" width="150" height="150" alt="jquery图片切换插件制作左右按钮与标题文字图片切换" /></a>
    			</div>
				<div class="txtBox">
					<h3><a href="http://www.dijiuzhanzhang.com/">jquery图片切换插件制作左右按钮与标题文字图片切换</a></h3>
					<p><a href="http://www.dijiuzhanzhang.com/">jquery图片切换插件制作图片左右切换与文字上下切换效果,鼠标点击文字标题图片左右切换,文字上下切换,支持自动轮播图片切换。</a></p>
				</div>
			</li>
		</ul>
	</div>
	<h2>图片滚动与文字动画滚动 scroll效果(默认)</h2>
	<pre>$("#img-txt-box3").imgTxtCut({
	effects:"scroll",
	speed : 300
	});</pre>
	<div class="img-txt-scrool clearfix" id="img-txt-box3">
		<ul>
			<li>
				<div class="scrool-box">
					<div class="imgBox">
						<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="jquery图片滚动图片放大展示带tab滑动选项卡标签图片滚动" src="images/small0355db342604226d21b883051b8e7c4d.jpg" /></a>
					</div>
					<div class="txtBox">
						<h3><a href="http://www.dijiuzhanzhang.com/">jquery图片滚动图片放大展示带tab滑动选项卡标签图片滚动</a></h3>
						<p><a href="http://www.dijiuzhanzhang.com/">jquery图片特效制作带tab滑动选项卡的jquery图片滚动,选项卡里面的图片放大展示,默认中间图片放大展示。</a></p>
					</div>
				</div>
			</li>
			<li>
				<div class="scrool-box">
					<div class="imgBox">
						<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="jquery.switchable插件制作选项卡、图片滑动或滚动、手风琴、导航菜单等特效" src="images/small2bdaa0a22ad6928dfba7f626295b54db.jpg" /></a>
					</div>
					<div class="txtBox">
						<h3><a href="http://www.dijiuzhanzhang.com/">jquery.switchable插件制作选项卡、图片滑动或滚动、手风琴、导航菜单等特效</a></h3>
						<p><a href="http://www.dijiuzhanzhang.com/">jquery.switchable插件是一款整合了Tabs选项卡、slide图片滑动、scrollable图片滚动、导航菜单等常见的UI网页设计。它有简单易用的API、可灵活配置的Configuration,支持自定义Effect.</a></p>
					</div>
				</div>
			</li>
			<li>
				<div class="scrool-box">
					<div class="imgBox">
						<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="jquery选项卡插件制作多种滑动slide选项卡切换和fade选项卡切换等" src="images/smallb85af69ca596ed661928f43fd37070be.jpg" /></a>
					</div>
					<div class="txtBox">
						<h3><a href="http://www.dijiuzhanzhang.com/">jquery选项卡插件制作多种滑动slide选项卡切换和fade选项卡切换等</a></h3>
						<p><a href="http://www.dijiuzhanzhang.com/">jquery选项卡插件制作多种选项卡切换特效,滑动slide选项卡切换、fade选项卡切换、自动选项卡切换等。</a></p>
					</div>
				</div>
			</li>
			<li>
				<div class="scrool-box">
					<div class="imgBox">
						<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="jquery导航菜单制作类似选项卡切换的侧边浮动导航条" src="images/smallafa366aba56ec013c824a64753f72f84.jpg" /></a>
					</div>
					<div class="txtBox">
						<h3><a href="http://www.dijiuzhanzhang.com/">jquery导航菜单制作类似选项卡切换的侧边浮动导航条</a></h3>
						<p><a href="http://www.dijiuzhanzhang.com/">jquery导航菜单制作类似选项卡切换效果的侧边浮动层导航条,多种导航菜单点击slider滑动展示二级菜单。</a></p>
					</div>
				</div>
			</li>
		</ul>
	</div>
	<h2>图片与文字淡隐淡现 fade效果</h2>
	<pre>$("#img-txt-box2").imgTxtCut({
	effects:"fade",
	speed : 300
	});</pre>
	<div class="img-txt-fade clearfix" id="img-txt-box2">
		<ul>
			<li>
				<div class="imgBox">
					<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="flash图片特效左右按钮控制图片折叠切换效果" src="images/small9c6f18c61edf1e31839ddf7e4117edef.jpg" /></a>
				</div>
				<div class="txtBox">
					<h3><a href="http://www.dijiuzhanzhang.com/">flash图片特效左右按钮控制图片折叠切换效果</a></h3>
					<p><a href="http://www.dijiuzhanzhang.com/">flash图片特效制作左右两侧按钮控制图片折叠切换,xml外调图片折叠切换效果。含flash源码免费下载</a></p>
				</div>
			</li>
			<li>
				<div class="imgBox">
					<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="flash图片特效3D立体动画焦点图片切换带左右按钮控制滚动" src="images/smalld3fe5207f426ffea078c42aff95cfb13.jpg" /></a>
				</div>
				<div class="txtBox">
					<h3><a href="http://www.dijiuzhanzhang.com/">flash图片特效3D立体动画焦点图片切换带左右按钮控制滚动</a></h3>
					<p><a href="http://www.dijiuzhanzhang.com/">flash焦点图片滚动特效制作flash图片切换滚动带3D立体动画效果,带左右按钮控制图片左右切换滚动,图片xml文件外部调用,含flash源码免费下载。</a></p>
				</div>
			</li>
			<li>
				<div class="imgBox">
					<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="flash图片特效制作banner焦点图片3D立体展示效果" src="images/small45f9f2a9946aa10fa3fde10eaaef5d1d.jpg" /></a>
				</div>
				<div class="txtBox">
					<h3><a href="http://www.dijiuzhanzhang.com/">flash图片特效制作banner焦点图片3D立体展示效果</a></h3>
					<p><a href="http://www.dijiuzhanzhang.com/">flash图片特效制作banner焦点图片3D立体动画轮播滚动效果,带索引切换按钮,可以随意切换图片滚动。图片xml文件外部调用,含flash源码免费下载。</a></p>
				</div>
			</li>
			<li>
				<div class="imgBox">
					<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="flash特效制作flash图片滚动带按钮控制左右图片滚动" src="images/smallc2c8c7a13e553fa79bedb70c34873a6d.jpg" /></a>
				</div>
				<div class="txtBox">
					<h3><a href="http://www.dijiuzhanzhang.com/">flash特效制作flash图片滚动带按钮控制左右图片滚动</a></h3>
					<p><a href="http://www.dijiuzhanzhang.com/">flash特效制作一个左右带按钮控制图片左右滚动的flash图片滚动特效,支持flash源码下载。</a></p>
				</div>
			</li>
		</ul>
	</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 文字叠加 文字层叠 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 文字全屏 文字淡出淡进 文字淡出 文字淡进 文字翻转 文字旋转 文字延迟加载 文字延迟 文字加载 文字放大缩小 文字缩放 文字大小 文字放大 文字缩小 文字变大 文字变小 文字收缩展开 文字收缩 文字展开 文字提示框 提示文字 文字拖动 文字拖拽 flash焦点图 flash幻灯片 flashbanner flash图片轮播 滚动切换 滚动条切换 滑动选项卡 滑动切换 h5文字动画 h5文字边框动画 html5文字动画 html5文字边框动画 360全景 360度全景 文字滑动 文字滑块 文字切换 文字选项卡 自动滚动图片轮播 文字滚动 文字无缝滚动 文字间歇滚动 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 图片文字 文字导航菜单 文字导航 文字菜单 焦点图 幻灯片 轮播图 bar焦点图 文字 文字插件 其他 带简介的焦点图 图片切换 图片选项卡 图标选项卡 自动滚动图片轮播 文字列表 图片文字滚动 文字图片滚动 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到