jQuery仿天猫商城鼠标滑过图片变暗变亮插件


jQuery仿天猫商城鼠标滑过图片变暗变亮插件
jQuery仿天猫商城鼠标滑过图片变暗变亮插件以及鼠标滑过、图片变暗变亮等js/jquery网页特效代码下载。

1. 引入JS

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

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.area01{width:970px;margin:20px auto;height:300px;border-top:2px solid #FFB5B5;overflow:hidden}
/* tmall-brand */
.tmall-brand{float:left;width:190px;height:300px;overflow:hidden;}
.tmall-brand ul{height:100%;background:#d78494 url(images/brand-190-300.png) no-repeat;}
.tmall-brand li{float:left;height:30px;width:95px;position:relative;}
.tmall-brand li a{position:absolute;left:0;top:0;display:inline-block;height:30px;width:100%;text-indent:-9999px;overflow:hidden;}
.tmall-brand li a:hover{top:-1px;height:31px;background:#000;opacity:.1;filter:alpha(opacity=10);}
/* box */
.boxpic{width:780px;float:left;position:relative;height:300px}
.boxpic a{display:block;float:left}
.boxpic .floor-maskItem{ position:absolute;float:left}
.boxpic .floor-maskItem img{ float:left}
.boxpic .mask{ position:absolute;left:0;top:0;background:#000;width:195px;height:150px;opacity:0;filter:alpha(opacity=0)}
.hover .mask{background:#000;opacity:0.5;filter:alpha(opacity=50);cursor:pointer}
.hover .qq .mask{opacity:0;filter:alpha(opacity=0)}
</style>
<!-- 代码开始 -->
<div class="area01">
	<div class="tmall-brand">
		<ul>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
			<li><a href="https://www.51qianduan.com/">51前端</a></li>
		</ul>
	</div>
	<div class="boxpic">
		<a href="https://www.51qianduan.com/">51前端</a>
		<a href="https://www.51qianduan.com/">51前端</a>
		<a href="https://www.51qianduan.com/">51前端</a>
		<a href="https://www.51qianduan.com/">51前端</a>
		<a href="https://www.51qianduan.com/">51前端</a>
		<a href="https://www.51qianduan.com/">51前端</a>
	</div>
</div>
<!-- 代码结束 -->

相关推荐

发表评论

相关文章