- 浏览: 398159 次
- 性别:
- 来自: 青岛
博客专栏
-
wordpress步步高
浏览量:76001
-
Web前端开发之路
浏览量:92593
-
Flex/ActionSc...
浏览量:63822
-
Android/IOS 开...
浏览量:35284
-
PHP项目实战
浏览量:24462
文章分类
最新评论
-
u013810758:
editplus
个人觉得 SublimeText 目前最好用的 文本编辑器 -
u010189889:
poll.zip (13.7 KB) 这个文件是干什么的?
手把手做一个PHP 投票系统 -
freerambo:
不错 赞一个
完美的 登录注册框 含漂亮的过渡、转换效果 -
uule:
不错不错,楼主好屌
国外经典JS、Jquery 各种资源集合 -
zyl324:
真心不错,学习了
用jquery都弱爆了 纯css 实现焦点图的 动态绚丽效果
要求效果:
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;}
发表评论
-
一款基于bootstrap的datetimepicker
2013-05-29 15:49 1715<!DOCTYPE HTML> < ... -
php/js/jquery等各种语言版本—检测终端类型和浏览器类型
2013-05-29 15:45 989<?php if ( (strpos( ... -
博文转移到个人网站,欢迎大家访问!!!
2013-05-13 22:40 1513http://ismartstudio.com 欢迎 ... -
推荐一款神器,桌面远程调试IOS网站的工具 很好很强大 支持国产!
2013-04-04 11:09 2471MIHTool 是前端工程师在 ... -
绚丽的图片文字 跟随过渡切换焦点图设计
2013-03-25 14:00 1484<!DOCTYPE html> &l ... -
看一眼你就会爱上它 10种不同风格任你选
2013-03-22 09:25 1376看一眼你就会爱上它 10种不同风格任你选 .vi ... -
圆形的hover效果 多种style可供选择见demo
2013-03-15 14:45 1988当鼠标浮动时 会呈现圆形的富有生动的多重样式的动态效果 ... -
图片hover状态平滑划过过渡效果
2013-03-15 14:38 2244附源码 //first preload ... -
页面滑到底端弹出提示表单
2013-03-05 10:51 1347<p id="last" ... -
一款漂亮的滑动表单
2013-03-05 10:46 1917<h1>Fancy Sliding Form ... -
php版本 化妆程序 给图片添加饰物
2013-03-05 10:20 1640大家估计都用手机玩过 化妆整人的程序 也就是对照片加工处 ... -
完美的 登录注册框 含漂亮的过渡、转换效果
2013-03-04 17:29 3423<div id="cont ... -
大气磅礴的网站效果 scroll+easing+animation+水平、竖直滚动
2013-03-04 11:07 2976像酒店 酒吧 咖啡店连锁 小型餐厅 音乐网站等等 都可以采 ... -
jquery实现 购物车 信息 级联改变
2013-01-29 15:07 2038<!DOCTYPE html PUBLIC &quo ... -
发现一款很酷的jquery 相片墙翻牌效果
2013-01-16 16:10 4382可用于 企业网站中的 赞助商、 合作伙伴、 公司 ... -
国外经典JS、Jquery 各种资源集合
2013-01-15 11:03 38411,首推 Jquery 官网 http://jquery. ... -
带提示的input输入框类似html5的 placeholder
2012-10-18 14:39 3651Html5带来了 placeholder <input ... -
瀑布流展示示例- 带旋转的图文展示 好东西与大家分享 附源码
2012-10-17 11:22 2636很流行的瀑布流展示 并且当鼠标悬浮 旋转 ... -
仿淘宝 智能跟随菜单提示栏 智能浮动的菜单
2012-10-17 10:25 2670<!DOCTYPE html> < ... -
jquery实现 checkbox全选和反选 很常用噢....
2012-10-16 11:50 1987Jquery的选择器帮你轻松实现这个效果 摒弃复杂的js代码 ...
相关推荐
### 鼠标悬浮显示二级菜单效果的实现 #### 1. HTML布局 在实现鼠标悬浮显示二级菜单效果之前,我们需要定义页面的基本结构。通过HTML代码,我们可以创建一个带有子菜单的父级菜单项。在这个例子中,我们使用了一个`...
一个简单的图片放大效果: 参数说明: 1.berviary:String,需要被放大的图片id 2.expand:object,放大区域,如果不设置此项或者此项的id未设置,则默认为光标跟随模式,会自动创建用于显示放大区域的div. 3.clip:object,...
标题"悬浮Expand"暗示我们关注的是一个特殊的`ExpandableListView`实现,其中父布局在展开时会悬浮显示。描述中提到的"父布局会悬浮的ExpandableListView"可能是指在展开分组时,该分组的头部会保持可见,即使滚动...
可以使用`fab.collapse()`和`fab.expand()`方法,或者使用`fab.animate().translationY()`进行自定义动画。 6. **位置和布局**: - FAB通常位于屏幕底部右下角,但也可以根据需求调整位置。可以使用`android:...
标题中的“expand”是Windows操作系统中内置的一个命令行工具,用于展开或解压缩文件。这个工具在系统维护、软件安装和修复过程中非常有用,尤其是在没有图形界面解压工具的情况下。让我们深入了解一下`expand`命令...
**jQuery Expand扩展条Demo详解** 在网页开发中,我们经常需要处理内容的展开与收起,以优化用户体验,节省页面空间。这就是`JQuery Expand`扩展条的作用所在。`JQuery Expand`是一种基于jQuery库的插件,它允许...
在Android开发中,"ExpandTable"是一个常见的需求,特别是在构建类似58同城这样的信息分类列表时,用户可能需要点击一个条目来展开更多的详细信息。这个项目实现了这种点击展开的效果,利用了Android的基础布局组件`...
/* 添加放大效果的光标 */ } 示例图片"> <script src="expandimg.js"></script> ``` 在这个HTML文件中,我们用`<img>`标签展示了图片,并通过CSS设置了初始宽度和鼠标悬停时的光标样式。 接着,我们来看...
"expand-word.zip_expand Word"这个压缩包文件,显然为我们提供了一个用Java实现文字扩展效果的实例。这样的功能在图形用户界面(GUI)应用、游戏开发或者文本处理软件中十分常见,比如在动画效果、动态展示文字等...
本文将深入探讨“Expand”这个特定的源码实现,它为iOS开发者提供了一种优雅的方式,来实现自定义控件的展开与折叠效果。 首先,我们要理解“Expand”源码的核心概念——层次视图(Hierarchy View)。这种视图允许...
`css-shorthand-expand`是一个开源库,专注于将这些CSS的简写属性展开为它们的完整形式,从而帮助开发者更好地理解和调试CSS代码。 标题“前端开源库-css-shorthand-expand”指出了这个项目的核心——这是一个面向...
这里的`class="rotate-expand"`是一个CSS选择器,我们将用它来应用我们的旋转放大效果。 接下来,我们来编写CSS代码。首先,定义按钮的基本样式,包括颜色、大小、边框等: ```css .rotate-expand { width: 100px...
expand.exe 找到的一个方便大家下载 希望能帮到大家的忙
在本文中,我们将深入探讨如何使用Element-UI的Table组件中的`expand`功能来实现手风琴效果。Element-UI是基于Vue.js的UI库,提供了丰富的组件供开发者使用,其中包括表格(Table)组件,它支持展开行以显示更多详细...
expand.pngexpand.pngexpand.pngexpand.pngexpand.pngexpand.png1
在本文中,我们将深入探讨Laravel框架中的错误处理与错误代码管理,这在"laravel_expand"项目中扮演着至关重要的角色。Laravel是PHP世界里一个优雅且强大的Web应用开发框架,它提供了丰富的工具和功能,使得错误处理...
Markdown-it-expand-tabs插件就是为了统一这种差异,将制表符自动转换为空格,确保在任何环境下都能得到一致的渲染效果。 Markdown-it是一个流行的、可扩展的JavaScript库,用于将Markdown语法转换为HTML。它提供了...
标题“DS918+_6.2.3-25426_UEFI_GPT_EXPAND.zip”指的是群晖(Synology)DS918+型号网络附加存储(NAS)设备的一个系统固件更新包。这个更新版本为6.2.3,编号25426,表明这是该设备在某个时间点的软件升级,旨在...
扩展html中的select元素,基于jquery,兼容IE6、chrome,firefox 主要是看着一些select插件不兼容ie6所以自己写了个 开源的,大家可以一起完善下 https://github.com/zhenzhonghouse/SelectExpand