jQuery hover图片列表上下滚动显示图片详细内容-20130630 -

xjwolaile

浏览: 342026 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery hover图片列表上下滚动显示图片详细内容-20130630

博客分类：

学习
前端技术
jQuery

hover animate

1、效果及功能说明

hover鼠标滑过案例或产品图片列表，图片向上滚动显示图片详细内容，鼠标离开图片内容向下滚动显示案例或产品图片

2、实现原理

设定原图的消失时间和后来图片的出现时间在定义一个伪类来触发这两个切换的效果在定义装有图片的div在div里的图片才能显示切换掉的图片会隐藏起来当鼠标移动开后原图回来原图移动时间是0.226秒切换图的显示时间是0.2秒

3、效果图

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果就可实现看下图可做参考

7、代码[html5]

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>


<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif ,"宋体";}
/* caselist */
.caselist{width:474px;margin:30px auto;}
.caselist li{width:227px;height:227px;float:left;margin:0 10px 15px 0;position:relative;overflow:hidden;}
.tagImg1{width:226px;height:226px;display:block; position:absolute; left:0px; top:0px;}
.tagImg1 img{width:226px;height:226px;}
.tagImg2{width:59px;height:59px;display:block;float:left;margin:0 10px 0 0;}
.tagImg2 img{width:59px;height:59px;}
.tagDiv1{background:#F4F4F4;border:1px solid #E7E7E7;padding:10px;width:205px;height:205px;position:absolute;left:0px;top:226px;z-index:2;}
.tagDiv1 h3{margin:0px;font-size:12px;color:#000;line-height:16px;}
.tagP1{margin:5px 0 0;color:#666;}
.tagP2{line-height:22px;clear:both;color:#666;padding:5px 0 0;height:115px;overflow:hidden;}
.tagP3{height:25px;}
.tagP3 a{background:url("images/jz_sprite-btn.png") no-repeat;color:#2A5077;display:inline-block;height:25px;line-height:25px;margin-left:10px;text-align:center;width:89px;text-decoration:none;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
	var moveHeight = 226,
	    //控制当鼠标移动到图片上原图片消失的速度
		moveTime = 200,
		//控制当鼠标触及到图片的时候图片向上和下滚动的速度
		curMove = null;
		//将定义curMove参数为空
	$('.caselist li').hover(function (e){
	//将所有存放图片的li都设定入一个伪类
		var curLi = $(this);
		//将curLi参数定义为获得this
		curMove = setTimeout(function (){
			curLi.children('div.tagDiv1').animate({ top: '0px' }, moveTime);
		}, 200);
			//改变鼠标触及后的图片的高度 正好于上面的上滚动的时间符合 修改高度来让后面的图片显示出来
	},function(e){
		clearTimeout(curMove);
		//将curMove方法放进去
		$(this).children('div.tagDiv1').animate({ top: moveHeight + 'px' }, moveTime);
		//当鼠标移开图片以后 让原来的图片显示出来 就是改变第二张图片的高度 后让第一张图片显示出来
	});
});
</script>

<ul class="caselist">
	<li>
		<a href="http://www.17sucai.com" class="tagImg1" target="_blank"><img src="images/bzImg001.jpg" alt="全聚德" /></a>
		<div class="tagDiv1">
			<a href="http://www.17sucai.com" class="tagImg2" target="_blank"><img src="images/bzImg001.jpg" alt="全聚德" /></a>
			<h3>全聚德</h3>
			<p class="tagP1">类型：标准网站</p>
			<p class="tagP2">全聚德通过网站很好的宣传了企业品牌。利用图片展示菜系，通过照片和描述介绍了用餐环境，留下完整的地点电话等,方便客户提前了解菜谱和用餐环境。</p>
			<p class="tagP3"><a href="http://www.17sucai.com" target="_blank">查看该产品</a><a href="http://www.17sucai.com" target="_blank">查看案例</a></p>
		</div>
	</li>
	<li>
		<a target="_blank" class="tagImg1" href="http://www.17sucai.com"><img alt="深圳市佳思特企业管理咨询有限公司" src="images/bzImg004.jpg"></a>
		<div class="tagDiv1">
			<a target="_blank" class="tagImg2" href="http://www.17sucai.com"><img alt="深圳市佳思特企业管理咨询有限公司" src="images/bzImg004.jpg"></a>
			<h3>佳思特</h3>
			<p class="tagP1">类型：标准网站</p>
			<p class="tagP2">佳思特很好的利用自己的官网，将公司业务领域和特色等清晰明确的写明。同时在公司介绍里展示自己的资质和实力，通过列举客户案例的方式也会提升企业竞争力。</p>
			<p class="tagP3"><a target="_blank" href="http://www.17sucai.com">查看该产品</a><a target="_blank" href="http://www.17sucai.com">查看案例</a></p>
		</div>
	</li>
	<li>
		<a target="_blank" class="tagImg1" href="http://www.17sucai.com"><img alt="深圳市佳思特企业管理咨询有限公司" src="images/bzImg004.jpg"></a>
		<div class="tagDiv1">
			<a target="_blank" class="tagImg2" href="http://www.17sucai.com"><img alt="深圳市佳思特企业管理咨询有限公司" src="images/bzImg004.jpg"></a>
			<h3>佳思特</h3>
			<p class="tagP1">类型：标准网站</p>
			<p class="tagP2">佳思特很好的利用自己的官网，将公司业务领域和特色等清晰明确的写明。同时在公司介绍里展示自己的资质和实力，通过列举客户案例的方式也会提升企业竞争力。</p>
			<p class="tagP3"><a target="_blank" href="http://www.17sucai.com">查看该产品</a><a target="_blank" href="http://www.17sucai.com">查看案例</a></p>
		</div>
	</li>
	<li>
		<a href="http://www.17sucai.com" class="tagImg1" target="_blank"><img src="images/bzImg001.jpg" alt="全聚德" /></a>
		<div class="tagDiv1">
			<a href="http://www.17sucai.com" class="tagImg2" target="_blank"><img src="images/bzImg001.jpg" alt="全聚德" /></a>
			<h3>全聚德</h3>
			<p class="tagP1">类型：标准网站</p>
			<p class="tagP2">全聚德通过网站很好的宣传了企业品牌。利用图片展示菜系，通过照片和描述介绍了用餐环境，留下完整的地点电话等,方便客户提前了解菜谱和用餐环境。</p>
			<p class="tagP3"><a href="http://www.17sucai.com" target="_blank">查看该产品</a><a href="http://www.17sucai.com" target="_blank">查看案例</a></p>
		</div>
	</li>
</ul><!--caselist end-->

</body>
</html>

images.rar (52.5 KB)
下载次数: 0

查看图片附件

分享到：

jQuery仿麦包包商城图片滑动伸缩图片广告 ... | jQuery scroll图片滚动菜单鼠标移动图片滚 ...

2013-06-30 23:49
浏览 1089
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery hover图片列表上下滚动显示图片详细内容-20130630

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery hover图片列表上下滚动显示图片详细内容-20130630

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>