jQuery仿QQ空间鼠标悬停全图预览js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery仿QQ空间鼠标悬停全图预览js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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仿QQ空间鼠标悬停全图预览 </title>
<script type="text/javascript" src="js/jquery-1.7.2.js" ></script>
<script type="text/javascript" src="js/longPicSHow.js" ></script>
<script type="text/javascript">
$(function(){
	$(".innerDiv").longPicShow(150);	
})
</script>

<style type="text/css">
*{padding:0px;margin:0px;list-style-type:none;}

.outDiv{border:1px solid #ddd;width:500px;height:500px;padding:20px;margin:20px auto;background:#7ce;}
.innerDiv{width:500px;height:500px;position:relative;background:#fff;overflow:hidden;}	
</style>
</head>
<body>
	<noscript>
		该浏览器不能执行javascript！请检查是否有禁用浏览器！
	</noscript>
	
	<div class="outDiv">
		<div class="innerDiv">
		<img src="images/zzsc.jpg"/>
		</div>
	</div>
</body>
</html>

JS代码(longPicSHow.js):

/** +------------------------------------------------------------------------------------------------------------- * [QQ空间长度展示方式]插件 jquery.longPicShow +------------------------------------------------------------------------------------------------------------- * @author Mr.Mao * @version 1.0 * @file jquery.longPicShow.js * @info 报告BUG、建议、索取最新版本 请Mail：maoshili@qq.com(注：邮件标题请包含longPicShow 以便于邮箱自动归档) * @date 2013-12-19 +------------------------------------------------------------------------------------------------------------- */
(function($){
	$.fn.longPicShow=function(px){
	if(px==undefined){
	px=150;
}
else if(/^\d*$/.test(px)){
	px=parseInt(px);
}
else{
	alert("Param error!");
	return;
}
var m={
}
;
	m.self=this;
	m.innerImg= $(m.self).find("img");
	//样式m.setCss=function(){
	var cssCode='<style type="text/css">';
	cssCode+='*{
	padding:0px;
	margin:0px;
}
';
	cssCode+='.topDiv{
	height:'+(m.self.height()/2)+'px;
	width:'+m.self.width()+'px;
	cursor:pointer;
	background:#fff;
	position:absolute;
	filter:alpha(opacity=0);
	opacity:0;
}
';
	cssCode+='.bottomDiv{
	height:'+(m.self.height()/2)+'px;
	width:'+m.self.width()+'px;
	cursor:pointer;
	background:#fff;
	position:absolute;
	filter:alpha(opacity=0);
	opacity:0;
	top:'+(m.self.height()/2)+'px;
}
';
	cssCode+='.imgDiv{
	position:absolute;
}
';
	cssCode+='</style>';
	$("head").append($(cssCode));
}
//布局m.setLayOut=function(){
	var $topDiv=$('<div class="topDiv"></div>');
	var $bottomDiv = $('<div class="bottomDiv"></div>');
	$(m.self).append($topDiv)$(m.self).append($bottomDiv)$(m.self).find('img').addClass('imgDiv');
}
//展示效果！m.setAnimate=function(){
	//向上移动$($(m.self).find('div')[1]).hover(function(){
	var $high = m.innerImg.height();
	var topStr= m.innerImg.css("top").split("px")[0];
	if(topStr.split("-")[1]==undefined){
	var $time = ($high)/px;
}
else{
	var $top = parseFloat(topStr.split("-")[1]);
	var $time = ($high-$top)/px;
}
m.innerImg.animate({
	top:-$high+m.self.height()}
,$time*1000,"linear");
}
,function(){
	m.innerImg.stop();
}
);
	//向下移动$($(m.self).find('div')[0]).hover(function(){
	var $high = m.innerImg.height();
	var topStr= m.innerImg.css("top").split("px")[0];
	var $top = parseFloat(topStr.split("-")[1]);
	var $time = $top/px;
	m.innerImg.animate({
	top:0}
,$time*1000,"linear");
}
,function(){
	m.innerImg.stop();
}
);
}
m.run=function(){
	m.setCss();
	m.setLayOut();
	m.setAnimate();
}
m.run();
}
}
)(jQuery);

附件:下载该文件资源,减少时间成本(增值服务)