- 浏览: 388242 次
- 性别:
- 来自: 青岛
博客专栏
-
wordpress步步高
浏览量:74301
-
Web前端开发之路
浏览量:90432
-
Flex/ActionSc...
浏览量:62244
-
Android/IOS 开...
浏览量:34503
-
PHP项目实战
浏览量:23834
文章分类
最新评论
-
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 1675<!DOCTYPE HTML> < ... -
php/js/jquery等各种语言版本—检测终端类型和浏览器类型
2013-05-29 15:45 925<?php if ( (strpos( ... -
博文转移到个人网站,欢迎大家访问!!!
2013-05-13 22:40 1453http://ismartstudio.com 欢迎 ... -
推荐一款神器,桌面远程调试IOS网站的工具 很好很强大 支持国产!
2013-04-04 11:09 2418MIHTool 是前端工程师在 ... -
绚丽的图片文字 跟随过渡切换焦点图设计
2013-03-25 14:00 1438<!DOCTYPE html> &l ... -
看一眼你就会爱上它 10种不同风格任你选
2013-03-22 09:25 1333看一眼你就会爱上它 10种不同风格任你选 .vi ... -
圆形的hover效果 多种style可供选择见demo
2013-03-15 14:45 1918当鼠标浮动时 会呈现圆形的富有生动的多重样式的动态效果 ... -
图片hover状态平滑划过过渡效果
2013-03-15 14:38 2183附源码 //first preload ... -
页面滑到底端弹出提示表单
2013-03-05 10:51 1268<p id="last" ... -
一款漂亮的滑动表单
2013-03-05 10:46 1861<h1>Fancy Sliding Form ... -
php版本 化妆程序 给图片添加饰物
2013-03-05 10:20 1589大家估计都用手机玩过 化妆整人的程序 也就是对照片加工处 ... -
完美的 登录注册框 含漂亮的过渡、转换效果
2013-03-04 17:29 3317<div id="cont ... -
大气磅礴的网站效果 scroll+easing+animation+水平、竖直滚动
2013-03-04 11:07 2901像酒店 酒吧 咖啡店连锁 小型餐厅 音乐网站等等 都可以采 ... -
jquery实现 购物车 信息 级联改变
2013-01-29 15:07 1987<!DOCTYPE html PUBLIC &quo ... -
发现一款很酷的jquery 相片墙翻牌效果
2013-01-16 16:10 4317可用于 企业网站中的 赞助商、 合作伙伴、 公司 ... -
国外经典JS、Jquery 各种资源集合
2013-01-15 11:03 37701,首推 Jquery 官网 http://jquery. ... -
带提示的input输入框类似html5的 placeholder
2012-10-18 14:39 3582Html5带来了 placeholder <input ... -
瀑布流展示示例- 带旋转的图文展示 好东西与大家分享 附源码
2012-10-17 11:22 2596很流行的瀑布流展示 并且当鼠标悬浮 旋转 ... -
仿淘宝 智能跟随菜单提示栏 智能浮动的菜单
2012-10-17 10:25 2614<!DOCTYPE html> < ... -
jquery实现 checkbox全选和反选 很常用噢....
2012-10-16 11:50 1947Jquery的选择器帮你轻松实现这个效果 摒弃复杂的js代码 ...
相关推荐
一个简单的图片放大效果: 参数说明: 1.berviary:String,需要被放大的图片id 2.expand:object,放大区域,如果不设置此项或者此项的id未设置,则默认为光标跟随模式,会自动创建用于显示放大区域的div. 3.clip:object,...
ExpandTable 完全高仿58同城 点击展开的表格效果 使用tablelayout 来实现 效果图:
父布局会悬浮的ExpandableListView,一个简单的Android ExpandableListView例子。
expand.exe 找到的一个方便大家下载 希望能帮到大家的忙
Laravel开发-laravel_expand Laravel错误处理及错误代码管理
expand.pngexpand.pngexpand.pngexpand.pngexpand.pngexpand.png1
IOS应用源码之可伸展折叠的控件Expand .zip
扩展html中的select元素,基于jquery,兼容IE6、chrome,firefox 主要是看着一些select插件不兼容ie6所以自己写了个 开源的,大家可以一起完善下 https://github.com/zhenzhonghouse/SelectExpand
1,将所下载的文件复制 2,找到路径:C:\WINDOWS\system32 3,直接粘贴覆盖。
用于改变rgb颜色的函数,扩充图像的亮度,彩度,饱和度的功能
这是一个JQuery可扩展内容的Demo条
前端开源库-css-shorthand-expandcss速记展开,展开css速记属性
前端开源库-markdown-it-expand-tabsmarkdown it expand tabs,一个markdown it插件,用于用代码块中的空格替换前导制表符。
UICollectionView+SFOpenFolder,a UICollectionView category,(仿苹果系统文件夹展开抽屉效果)like iOS springborad folder expand。 软件开发设计:PHP、QT、应用软件开发、系统软件开发、移动应用开发、网站开发...
先展示一下ElementUI官方提供的示例代码效果图 可以看到官方代码中在这边没有让这个可展开table自动折叠的功能,我点击了别的标签页后上次点击的行仍旧处在一个展开的状态,而且操控的方式也只能点击到左上角的小...
正如标题一样,这是一个实现文字扩展效果的java代码,好好研究,里面有很多 可学之处
TEST 3 expand.py