<th id="hrxnz"></th>
<strike id="hrxnz"></strike>
<span id="hrxnz"><video id="hrxnz"><ruby id="hrxnz"></ruby></video></span>
<span id="hrxnz"></span><ruby id="hrxnz"></ruby>
<span id="hrxnz"><dl id="hrxnz"></dl></span>
<strike id="hrxnz"></strike>
<strike id="hrxnz"></strike>
<strike id="hrxnz"></strike>
<ruby id="hrxnz"><i id="hrxnz"></i></ruby>
<strike id="hrxnz"><dl id="hrxnz"></dl></strike>
<strike id="hrxnz"></strike>
<strike id="hrxnz"></strike>
<strike id="hrxnz"></strike>
<span id="hrxnz"></span>
js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS常用代码 > 图片相册

jquery鼠标悬停图片高亮,从左边滑动出标题信息显示效果

发布时间:2015-08-27 14:44:28    您是第0位浏览者
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鼠标悬停图片高亮,从左边滑动出标题信息显示效果 - js特效代码网</title>
		<link rel="stylesheet" type="text/css" href="css/jstxdm.css">
	</head>
	<body>
		<div class="brands-list">
		  <ul>
			<li><a href="javascript:;"><img src="images/01.jpg" /><span class="title">js代码网</span><span class="shine"></span></a></li>
			<li><a href="javascript:;"><img src="images/02.jpg" /><span class="title">js代码网</span><span class="shine"></span></a></li>
			<li><a href="javascript:;"><img src="images/03.jpg" /><span class="title">js代码网</span><span class="shine"></span></a></li>
			<li><a href="javascript:;"><img src="images/04.jpg" /><span class="title">js代码网</span><span class="shine"></span></a></li>
			<li><a href="javascript:;"><img src="images/05.jpg" /><span class="title">js代码网</span><span class="shine"></span></a></li>
			<li><a href="javascript:;"><img src="images/06.jpg" /><span class="title">js代码网</span><span class="shine"></span></a></li>
		  </ul>
		</div>	
		<script src="js/jquery-1.7.2.min.js"></script>
		<script>
			$(function(){
				$(".brands-list li a").hover(function(){
					$(this).find(".shine").stop();
					$(this).find(".shine").css("background-position","-160px 0"); 
					$(this).find(".shine").animate({backgroundPosition: '160px 0'},500);
					$(this).find(".title").stop().animate({left:'0px'},{queue:false,duration:450});
				},function(){
					$(this).find(".title").stop().animate({left:'-160px'},{queue:false,duration:200});
				});
			});
		</script>
	</body>
</html>



鼠标悬停 图片高亮 滑动

jquery鼠标悬停图片高亮,从左边滑动出标题信息显示效果

Css3鼠标悬停图片高亮特效

jQuery鼠标悬停导航底部边框线条伸缩动画效果

jQuery鼠标悬停内容动画切换效果

jQuery鼠标悬停在图片上显示说明按钮的HoverEx插件

jquery hover网页左侧鼠标悬停列表改变菜单样式特效

jquery仿win8风格的图片九宫格布局,鼠标悬停图片文字切换特效

jquery实现鼠标悬停九宫格图片高亮显示特效

jquery实现中英文字切换导航条,鼠标悬停滑动下拉二级导航菜单

jquery实现图片放大镜插件,鼠标悬停局部图片放大镜头显示特效

jquery实现九宫格图片鼠标悬停上下滑动切换特效

js特仿flash导航条鼠标悬停上下文字滑动特效

html5实现鼠标悬停图片动画展示特效

jquery实现鼠标悬停弹出消息提示框特效

jquery实现鼠标悬停图片动画显示文字信息特效

jquery实现鼠标悬停图片突出显示大图,另外带标签关键词功能

css3实现鼠标悬停特效代码

jquery实现鼠标悬停图片遮罩文字从左滑出特效代码

jquery鼠标悬停向上滑出显示标题文字特效代码

jquery鼠标悬停缩略图、实现放大跟随展示大图片特效代码

Css3鼠标悬停图片高亮特效

jquery实现鼠标悬停九宫格图片高亮显示特效

澳洲幸运彩|官网