鼠标悬浮浮动放大 expand 效果

guangqiang

浏览: 401746 次
性别:
来自: 青岛

最近访客更多访客>>

a450065208

qijojo

李虎强

hlbejy

博主相关

博客

微博

相册

留言

关于我

博客专栏

: wordpress步步高
浏览量：76551

: Web前端开发之路
浏览量：93224

: Flex/ActionSc...
浏览量：64378

: Android/IOS 开...
浏览量：35604

: PHP项目实战
浏览量：24644

文章分类

社区版块

存档分类

博客分类：

JavaScript/Jquery

html 悬浮 jquery JS JavaScript

要求效果：

1.鼠标浮动在div上要求div动态浮出有膨胀效果

2.切换须柔和且无缝相隔

3.鼠标离开后恢复原状

4.实现图片缩放效果的完美展示

源码下载 :hover.zip

效果图：

主要代码展示：

<!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="style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-21468787-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script></head>

<body>>
<script type="text/javascript">
$(function () {
	
	var cont_left = $("#container").position().left;
	
    $("UL.templates LI").hover(function () {
        // hover in
        $(this).css("z-index", 2);
        animateB($(this).find("A"));
        animateB($(this).find("IMG"));
    }, function () {
        // hover out
        $(this).css("z-index", 0);
        reversAnimationB($(this).find("A"));
        reversAnimationB($(this).find("IMG"));
    });


    function animateB(obj) {
        $(obj).animate({
            height: "189",
            width: "265",
            left: "-=25",
            top: "-=25"
        }, "1000");
    }

    function reversAnimationB(obj) {
        $(obj).animate({
            height: "139",
            width: "215",
            left: "+=25",
            top: "+=25"
        }, "1000");
    }

    $("#container a").each(function (index) {
        var left = (index * 0) + cont_left;
        $(this).css("left", left + "px");
    });

});
</script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:10px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}
/* container */
#container{position:relative;width:766px;margin:100px 0 0 100px;}
#container li{position:relative;left:0;top:0;z-index:0;}
.templates li{float:left;height:210px;width:252px;}
.templates a{display:block;height:139px;padding:7px 5px 34px;text-align:center;width:215px;cursor:pointer;position:relative;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:#666 2px 4px 8px;-moz-box-shadow:#666 2px 4px 8px;box-shadow:#666 2px 4px 8px;background:#ffffff;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#ffffff));background:-webkit-linear-gradient(#ffffff, #ffffff);background:-moz-linear-gradient(#ffffff, #ffffff);background:-ms-linear-gradient(#ffffff, #ffffff);background:-o-linear-gradient(#ffffff, #ffffff);background:linear-gradient(#ffffff, #ffffff);-pie-background:linear-gradient(#ffffff, #ffffff);}
.btn20{float:left;height:20px;font:1.2em/20px Arial;text-align:center;padding:0 20px;text-align:center;width:40px;color:#fff;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:#666 2px 2px 2px;-moz-box-shadow:#666 2px 2px 2px;box-shadow:#666 2px 2px 2px;background:#009fd8;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#009fd8), to(#0088ce));background:-webkit-linear-gradient(#009fd8, #0088ce);background:-moz-linear-gradient(#009fd8, #0088ce);background:-ms-linear-gradient(#009fd8, #0088ce);background:-o-linear-gradient(#009fd8, #0088ce);background:linear-gradient(#009fd8, #0088ce);-pie-background:linear-gradient(#009fd8, #0088ce);}
.templates img{width:215px;height:139px;}
.templates .btnLine{position:absolute;bottom:8px;left:6px;right:6px;display:block;}
.templates .price{font:1.2em/20px Arial;float:right;}
</style>

<div id="container">
	<ul class="templates clearfix">
		<li>
			<a href="http://www.jsfoot.com/jquery/images/more/2012-04-23/576.html">
				<img alt="" src="http://www.jsfoot.com/d/file/jquery/images/more/2012-04-23/smallab09b1de296db0fcd9792a884814d223.jpg" />
				<div class="btnLine">
					<span class="btn20">下载</span>
					<span class="price">积分: 20</span>
				</div>
			</a>
		</li>
		<li>
			<a href="http://www.jsfoot.com/jquery/images/gg/2012-04-21/574.html">
				<img alt="" src="http://www.jsfoot.com/d/file/jquery/images/gg/2012-04-21/smallec5434ea1175ba57996a155400fc315d.jpg" />
				<div class="btnLine">
					<span class="btn20">下载</span>
					<span class="price">积分: 20</span>
				</div>
			</a>
	
		</li>
		<li>
			<a href="http://www.jsfoot.com/jquery/images/more/2012-04-13/559.html">
				<img alt="" src="http://www.jsfoot.com/d/file/jquery/images/more/2012-04-13/small1ef40ddb8e4798d1737bbc414cfb17ec.jpg" />
				<div class="btnLine">
					<span class="btn20">下载</span>
					<span class="price">积分: 20</span>
				</div>
			</a>
		</li>
		<li>
			<a href="http://www.jsfoot.com/jquery/images/qh/2012-04-13/557.html">
				<img alt="" src="http://www.jsfoot.com/d/file/jquery/images/qh/2012-04-13/small578c5d822200e38fa692f59d6a7f92d2.jpg" />
				<div class="btnLine">
					<span class="btn20">下载</span>
					<span class="price">积分: 20</span>
				</div>
			</a>
		</li>
		<li>
			<a href="http://www.jsfoot.com/jquery/images/fdj/2012-04-08/543.html">
				<img alt="" src="http://www.jsfoot.com/d/file/jquery/images/fdj/2012-04-08/smallc40edfd12471e5104437d58c348cc5ac.jpg" />
				<div class="btnLine">
					<span class="btn20">下载</span>
					<span class="price">积分: 20</span>
				</div>
			</a>
		</li>
		<li>
			<a href="http://www.jsfoot.com/jquery/images/more/2012-04-23/576.html">
				<img alt="" src="http://www.jsfoot.com/d/file/jquery/images/more/2012-04-23/smallab09b1de296db0fcd9792a884814d223.jpg" />
				<div class="btnLine">
					<span class="btn20">下载</span>
					<span class="price">积分: 20</span>
				</div>
			</a>
		</li>
	</ul>
</div>

</body>
</html>

@charset "utf-8";
/* reset */
*{margin:0;padding:0;list-style-type:none;}
a{blr:expression(this.onFocus=this.blur())}
:focus{outline:0;}
label{cursor:pointer;}
img{vertical-align:middle;}
table{empty-cells:show;border-collapse:collapse;border-spacing:0;}
h1{font-size:16px;}h2,h3,h4{font-size:14px;}h5,h6{font-size:12px;}
abbr,acronym{border:0;font-variant:normal}
address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{*font-size:100%}
a,img{border:0;}
a,a:visited{color:#5e5e5e; text-decoration:none;}
a:hover{color:#4183C4;text-decoration:underline;}
.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}/* Hides from IE-mac \*/
*html .clearfix{height:1%;}
.clearfix{display:block;}/* End hide from IE-mac */
*+html .clearfix{min-height:1%;}
body{font:12px/180% Arial,Lucida,Verdana,"å®‹ä½"",Helvetica,sans-serif;color:#333;background:#fff;}
/* shortcut */
.shortcut{position:fixed;top:0;left:0;z-index:9999;width:100%;}
*html,*html body /* ä¿®æ£IE6æŒ¯åŠ¨bug */{background-image:url(about:blank);background-attachment:fixed;}
*html .shortcut{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
.shortcut{height:28px;line-height:28px;font-size:12px;background:#EEEEEE;text-transform:uppercase;box-shadow:1px 0px 2px rgba(0,0,0,0.2);border-bottom:1px solid #DDDDDD;}
.shortcut h1{font-size:14px;font-family:"å¾®è½¯é›…é»'","å®‹ä½"";}
.shortcut a,.shortcut h1{padding:0px 10px;letter-spacing:1px;color:#333;text-shadow:0px 1px 1px #fff;display:block;float:left;}
.shortcut a:hover{background:#fff;}
.shortcut span.right{float:right;}
.shortcut span.right a{float:left;display:block;color:#ff6600;font-weight:800;}
.headeline{height:40px;overflow:hidden;}
.adv960x90{width:960px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:0 auto;}

hoverstyle.zip (28.8 KB)
下载次数: 97

查看图片附件

2
顶

0
踩

分享到：

苹果的Retina技术视网膜支持的应用 | 一款真正的PDF 编辑器 FoxitPDFEditor

2013-01-10 10:09
浏览 2531
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论

鼠标悬浮浮动放大 expand 效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论

鼠标悬浮 浮动放大 expand 效果

评论

发表评论

相关推荐

一款基于bootstrap的datetimepicker

php/js/jquery等各种语言版本—检测终端类型和浏览器类型

博文转移到个人网站，欢迎大家访问！！！

推荐一款神器，桌面远程调试IOS网站的工具 很好很强大 支持国产！

绚丽的图片文字 跟随过渡切换焦点图设计

看一眼你就会爱上它 10种不同风格任你选

圆形的hover效果 多种style可供选择见demo

图片hover状态平滑划过过渡效果

页面滑到底端弹出提示表单

一款漂亮的滑动表单

php版本 化妆程序 给图片添加饰物

完美的 登录注册框 含漂亮的过渡、转换效果

大气磅礴的网站效果 scroll+easing+animation+水平、竖直滚动

jquery实现 购物车 信息 级联改变

发现一款很酷的jquery 相片墙翻牌效果

国外经典JS、Jquery 各种资源集合

带提示的input输入框类似html5的 placeholder

瀑布流展示示例- 带旋转的图文展示 好东西与大家分享 附源码

仿淘宝 智能跟随菜单提示栏 智能浮动的菜单

jquery实现 checkbox全选和反选 很常用噢....

最近访客更多访客>>

鼠标悬浮浮动放大 expand 效果

推荐一款神器，桌面远程调试IOS网站的工具很好很强大支持国产！

绚丽的图片文字跟随过渡切换焦点图设计

圆形的hover效果多种style可供选择见demo

php版本化妆程序给图片添加饰物

完美的登录注册框含漂亮的过渡、转换效果

jquery实现购物车信息级联改变

瀑布流展示示例- 带旋转的图文展示好东西与大家分享附源码

仿淘宝智能跟随菜单提示栏智能浮动的菜单

jquery实现 checkbox全选和反选很常用噢....