`

鼠标悬浮 浮动放大 expand 效果

html悬浮jqueryJSJavaScript 
阅读更多

要求效果：

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;}
 

 

  • 大小: 199 KB
2
顶
0
踩
分享到：
| 一款真正的PDF 编辑器 FoxitPDFEditor
评论
发表评论

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

相关推荐

    鼠标悬浮显示二级菜单效果的jquery实现

    ### 鼠标悬浮显示二级菜单效果的实现 #### 1. HTML布局 在实现鼠标悬浮显示二级菜单效果之前，我们需要定义页面的基本结构。通过HTML代码，我们可以创建一个带有子菜单的父级菜单项。在这个例子中，我们使用了一个`...

    一个简单的javascript图片放大效果代码

    一个简单的图片放大效果: 参数说明: 1.berviary:String,需要被放大的图片id 2.expand:object,放大区域,如果不设置此项或者此项的id未设置,则默认为光标跟随模式,会自动创建用于显示放大区域的div. 3.clip:object,...

    悬浮Expand

    标题"悬浮Expand"暗示我们关注的是一个特殊的`ExpandableListView`实现，其中父布局在展开时会悬浮显示。描述中提到的"父布局会悬浮的ExpandableListView"可能是指在展开分组时，该分组的头部会保持可见，即使滚动...

    android浮动按钮代码

    可以使用`fab.collapse()`和`fab.expand()`方法，或者使用`fab.animate().translationY()`进行自定义动画。 6. **位置和布局**： - FAB通常位于屏幕底部右下角，但也可以根据需求调整位置。可以使用`android:...

    expand 系统自带解压工具

    标题中的“expand”是Windows操作系统中内置的一个命令行工具，用于展开或解压缩文件。这个工具在系统维护、软件安装和修复过程中非常有用，尤其是在没有图形界面解压工具的情况下。让我们深入了解一下`expand`命令...

    JQuery Expand扩展条Demo

    **jQuery Expand扩展条Demo详解** 在网页开发中，我们经常需要处理内容的展开与收起，以优化用户体验，节省页面空间。这就是`JQuery Expand`扩展条的作用所在。`JQuery Expand`是一种基于jQuery库的插件，它允许...

    前端开源库-markdown-it-expand-tabs

    Markdown-it-expand-tabs插件就是为了统一这种差异，将制表符自动转换为空格，确保在任何环境下都能得到一致的渲染效果。 Markdown-it是一个流行的、可扩展的JavaScript库，用于将Markdown语法转换为HTML。它提供了...

    Android代码-ExpandTable

    在Android开发中，"ExpandTable"是一个常见的需求，特别是在构建类似58同城这样的信息分类列表时，用户可能需要点击一个条目来展开更多的详细信息。这个项目实现了这种点击展开的效果，利用了Android的基础布局组件`...

    利用javascript实现图片动态的放大和缩小

    /* 添加放大效果的光标 */ } 示例图片"&gt; &lt;script src="expandimg.js"&gt;&lt;/script&gt; ``` 在这个HTML文件中，我们用`&lt;img&gt;`标签展示了图片，并通过CSS设置了初始宽度和鼠标悬停时的光标样式。 接着，我们来看...

    expand-word.zip_expand Word

    "expand-word.zip_expand Word"这个压缩包文件，显然为我们提供了一个用Java实现文字扩展效果的实例。这样的功能在图形用户界面（GUI）应用、游戏开发或者文本处理软件中十分常见，比如在动画效果、动态展示文字等...

    IOS应用源码之可伸展折叠的控件Expand .zip

    本文将深入探讨“Expand”这个特定的源码实现，它为iOS开发者提供了一种优雅的方式，来实现自定义控件的展开与折叠效果。 首先，我们要理解“Expand”源码的核心概念——层次视图（Hierarchy View）。这种视图允许...

    前端开源库-css-shorthand-expand

    `css-shorthand-expand`是一个开源库，专注于将这些CSS的简写属性展开为它们的完整形式，从而帮助开发者更好地理解和调试CSS代码。 标题“前端开源库-css-shorthand-expand”指出了这个项目的核心——这是一个面向...

    按钮旋转放大

    这里的`class="rotate-expand"`是一个CSS选择器，我们将用它来应用我们的旋转放大效果。 接下来，我们来编写CSS代码。首先，定义按钮的基本样式，包括颜色、大小、边框等： ```css .rotate-expand { width: 100px...

    expand.exe

    expand.exe 找到的一个方便大家下载 希望能帮到大家的忙

    使用element-ui table expand展开行实现手风琴效果

    在本文中，我们将深入探讨如何使用Element-UI的Table组件中的`expand`功能来实现手风琴效果。Element-UI是基于Vue.js的UI库，提供了丰富的组件供开发者使用，其中包括表格（Table）组件，它支持展开行以显示更多详细...

    expand.png

    expand.pngexpand.pngexpand.pngexpand.pngexpand.pngexpand.png1

    Laravel开发-laravel_expand

    在本文中，我们将深入探讨Laravel框架中的错误处理与错误代码管理，这在"laravel_expand"项目中扮演着至关重要的角色。Laravel是PHP世界里一个优雅且强大的Web应用开发框架，它提供了丰富的工具和功能，使得错误处理...

    DS918+_6.2.3-25426_UEFI_GPT_EXPAND.zip

    标题“DS918+_6.2.3-25426_UEFI_GPT_EXPAND.zip”指的是群晖（Synology）DS918+型号网络附加存储（NAS）设备的一个系统固件更新包。这个更新版本为6.2.3，编号25426，表明这是该设备在某个时间点的软件升级，旨在...

    jquery插件SelectExpand,让select可以自定义输入

    扩展html中的select元素,基于jquery,兼容IE6、chrome,firefox 主要是看着一些select插件不兼容ie6所以自己写了个 开源的,大家可以一起完善下 https://github.com/zhenzhonghouse/SelectExpand

Magicbox
Global site tag (gtag.js) - Google Analytics