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

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

发布时间:2015-09-02 14:07:15    您是第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>    
		<link href="css/style.css" media="screen" rel="stylesheet" />    
		<script type="text/javascript" src="js/jquery.min.js"></script>    
		<script type="text/javascript">    
			$(window).load(function(){    
				var spotlight = {    
					opacity : 0.2,    
					imgWidth : $('.spotlightWrapper ul li').find('img').width(),    
					imgHeight : $('.spotlightWrapper ul li').find('img').height()    
				};    
				$('.spotlightWrapper ul li').css({ 'width' : spotlight.imgWidth, 'height' : spotlight.imgHeight });    
				$('.spotlightWrapper ul li').hover(function(){    
					$(this).find('img').addClass('active').css({ 'opacity' : 1});    
					$(this).siblings('li').find('img').css({'opacity' : spotlight.opacity}) ;    
				}, function(){    
					$(this).find('img').removeClass('active');    
				});    
				$('.spotlightWrapper ul').bind('mouseleave',function(){    
					$(this).find('img').css('opacity', 1);    
				});    
			});    
		</script>    
	</head>    
	<body>    
		<div class='spotlightWrapper'>    
			<ul>    
				<li><a href="http://www.jstxdm.com/"><img src='images/1.jpg' /></a></li>    
				<li><a href="http://www.jstxdm.com/"><img src='images/2.jpg' /></a></li>    
				<li><a href="http://www.jstxdm.com/"><img src='images/3.png' /></a></li>    
				<li><a href="http://www.jstxdm.com/"><img src='images/4.jpg' /></a></li>    
				<li><a href="http://www.jstxdm.com/"><img src='images/5.jpg' /></a></li>    
				<li><a href="http://www.jstxdm.com/"><img src='images/6.png' /></a></li>    
				<li><a href="http://www.jstxdm.com/"><img src='images/7.jpg' /></a></li>    
				<li><a href="http://www.jstxdm.com/"><img src='images/9.png' /></a></li>    
				<li><a href="http://www.jstxdm.com/"><img src='images/10.jpg' /></a></li>    
				<li><a href="http://www.jstxdm.com/"><img src='images/11.png' /></a></li>    
				<li><a href="http://www.jstxdm.com/"><img src='images/12.png' /></a></li>    
				<li><a href="http://www.jstxdm.com/"><img src='images/13.jpg' /></a></li>    
				<li><a href="http://www.jstxdm.com/"><img src='images/14.png' /></a></li>    
				<li><a href="http://www.jstxdm.com/"><img src='images/15.jpg' /></a></li>    
				<li><a href="http://www.jstxdm.com/"><img src='images/16.jpg' /></a></li>    
				<li><a href="http://www.jstxdm.com/"><img src='images/5.jpg' /></a></li>    
			</ul>    
		</div>    
	</body>    
</html>



jquery 九宫格 图片

jQuery左侧分类导航特效_jquery商城左侧分类菜单导航_橙色导航菜单特效代码

jquery选项卡切换,版块鼠标跟随边框变色特效

jquery带缩略图焦点滚动图特效代码

仿红木之家官网首页jquery焦点全屏大图切换特效

jQuery二级图文平滑下拉菜单特效代码

jquery顶部导航菜单下拉,左侧分类切换特效

jQuery实现固定顶部导航,点触全屏滚动特效代码

jQuery仿腾讯云全屏下拉导航菜单特效代码

一款jQuery跨平台并且带触摸移动端焦点图特效

jQuery四屏焦点图网站特效代码

jquery双重切换的tab选项卡特效代码

jquery仿360音乐搜索主页歌手切换选项卡特效

jquery tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等特效

jquery SuperSlide仿京东首页促销产品tab选项卡切换特效

jquery图片相册特效,切换上下页,还带对话框提醒特效

jquery实现右下角浮动返回顶部并且带微信二维码特效

jquery实现带微信二维码,qq客服,联系电话的返回顶部特效

jQuery右侧浮动客服特效,点击弹出窗口显示更多在线QQ客服

仿OPPO官方商城jquery焦点图特效

jquery绿色的按栏目下拉,信息搜索输入框特效代码

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

jquery实现九宫格布局,点击图片查看大图预览效果代码

jquery实现点击弹出菜单九宫格布局特效

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

jquery实现九宫格子转盘抽奖特效代码