- 浏览: 331142 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (354)
- 学习 (219)
- 工作 (69)
- 前端技术 (188)
- 个人评论 (1)
- 工作总结 (1)
- 工作的方法 (1)
- 代码库 (1)
- jQuery (63)
- javascript (4)
- css (4)
- 网络通信协议 (3)
- web (7)
- 服务端性能 (1)
- 优化 (1)
- html5 (4)
- serialize (1)
- 上线页面 (1)
- ie6 (6)
- js (1)
- iframe (1)
- flash (1)
- a (1)
- img (1)
- 页面tms的要求 (1)
- kissy (3)
- 需求也页面 (0)
- 需求页面 (2)
- 视频插件 (1)
- 切图片 (1)
- map (1)
- display (1)
- 浮动定位 (1)
- 大小图片的切换功能 (2)
- demo (1)
- margin (1)
- a标签 (1)
- border (1)
- 侧导航 (1)
- 切换PNG格式的css (1)
- padding (1)
- 显示添加和删除 (1)
- 滚动条 (1)
- 和图片处理 (1)
- 移动端 (1)
- 定位 (1)
- 移动端的包的引入作用与直接拨打电话的A标签 (1)
- git (1)
- node.js (1)
- Zepto (1)
最新评论
-
幻紫1992:
还有分页的功能、、(⊙o⊙)嗯
[JS代码库] -
幻紫1992:
就是没有返回顶部的按钮,这个页面、、
[JS代码库] -
幻紫1992:
很受用,O(∩_∩)O谢谢啦~
[JS代码库] -
nlnl520coco:
想下个东西 规则太苛刻了 网站得改进
[JS代码库] -
hxp520520:
new Limiter() 这个对象是kissy API里面的 ...
Limiter的简单demo--20131029
1、效果及功能说明
hover鼠标悬停图片特效,品牌图片列表通过鼠标滑过品牌图片旋转动画展示,鼠标离开品牌图片旋转回来
2、实现原理
利用图片上下开始减少px知道变成一条直线后,让黑色背景的第二章图片通过动画效果从最下面出现后来把原本第一条直线替代成第二章图片的黑线在增加黑线的上下px,和现在白色的字体给用户带来旋转的效果
主要的方法
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
hover鼠标悬停图片特效,品牌图片列表通过鼠标滑过品牌图片旋转动画展示,鼠标离开品牌图片旋转回来
2、实现原理
利用图片上下开始减少px知道变成一条直线后,让黑色背景的第二章图片通过动画效果从最下面出现后来把原本第一条直线替代成第二章图片的黑线在增加黑线的上下px,和现在白色的字体给用户带来旋转的效果
主要的方法
$(this).find('img').stop().animate({'height':0,'top':'35px'},d,function() //就是让原本图变成一条居中的直线 $(this).find('b').animate({'height':0,'top':'35px'},d,function() //就是让第二章背景黑色图片变成一条直线
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;text-decoration:none;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} /* allbrand */ .allbrand .brand{width:390px;height:225px;overflow:hidden;margin:40px auto 0 auto;} .allbrand .brand a{display:inline;position:relative;float:left;width:120px;height:70px;line-height:70px;text-align:center;color:#fff;font-size:14px;margin:0 6px 5px 0;} .allbrand .brand a img{position:absolute;left:10px;width:118px;height:68px;border:1px solid #e9e8e8;} .allbrand .brand a b{display:none;position:absolute;top:36px;left:10px;width:118px;height:0;background:#000;border:1px solid #e9e8e8;cursor:pointer;overflow:hidden;} </style> <div class="allbrand"> <div class="brand"> <a target="_blank" href="http://www.17sucai.com/"><img alt="兰芝" src="images/20121119104931.jpg" /></a> <a target="_blank" href="http://www.17sucai.com/"><img alt="丝塔芙" src="images/20121015052055.jpg" /></a> <a target="_blank" href="http://www.17sucai.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a> <a target="_blank" href="http://www.17sucai.com/"><img alt="高丝" src="images/20121210102224.jpg" /></a> <a target="_blank" href="http://www.17sucai.com/"><img alt="美宝莲" src="images/20121220100203.jpg" /></a> <a target="_blank" href="http://www.17sucai.com/"><img alt="水之密语" src="images/20130106112242.jpg" /></a> <a target="_blank" href="http://www.17sucai.com/"><img alt="曼秀雷敦" src="images/20121220100514.jpg" /></a> <a target="_blank" href="http://www.17sucai.com/"><img alt="JUST BB" src="images/20130106112655.jpg" /></a> <a target="_blank" href="http://www.17sucai.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a> </div> <div class="brand"> <a target="_blank" href="http://www.17sucai.com/"><img alt="兰芝" src="images/20121119104931.jpg" /></a> <a target="_blank" href="http://www.17sucai.com/"><img alt="丝塔芙" src="images/20121015052055.jpg" /></a> <a target="_blank" href="http://www.17sucai.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a> <a target="_blank" href="http://www.17sucai.com/"><img alt="高丝" src="images/20121210102224.jpg" /></a> <a target="_blank" href="http://www.17sucai.com/"><img alt="美宝莲" src="images/20121220100203.jpg" /></a> <a target="_blank" href="http://www.17sucai.com/"><img alt="水之密语" src="images/20130106112242.jpg" /></a> <a target="_blank" href="http://www.17sucai.com/"><img alt="曼秀雷敦" src="images/20121220100514.jpg" /></a> <a target="_blank" href="http://www.17sucai.com/"><img alt="JUST BB" src="images/20130106112655.jpg" /></a> <a target="_blank" href="http://www.17sucai.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a> </div> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> //品牌翻转 var allBrandAnimate = function(t,d){ //通过参数定义方法 if(t.find('.brand b').length != 0){ //如果t调用遍历选择brand类里的b标签的长度不等0 return false; //就返回false } t.find('.brand a').each(function(){ //t调用遍历选择brand里面的a标签调用遍历定义方法 $(this).append('<b>' + $(this).find('img').attr('alt') + '</b>') //在尾部插入b标签就是在黑底上显示出来的白色字体 }); t.find('.brand a').hover(function(){ //定义一个伪类方法 $(this).find('img').stop().animate({'height':0,'top':'35px'},d,function(){ //定义遍历获得img所有元素调用停止动画方法后在调用一个动画效果让黑色的背景颜色出现背景从下到上 $(this).hide().next().show(); //定义当鼠标触及图片后第一张图片开始消失效果 $(this).next().animate({ //定义当鼠标触及在第一张图片上效果 'height':'70px', //的长度还是70px 'top':'0' //高度变成0 },d); //里面含有黑色背景出来的时间 }); },function(){ //定义方法 $(this).find('b').animate({'height':0,'top':'35px'},d,function(){ //当鼠标离开已经出来的黑色背景图片后背景开始效果 $(this).hide().prev().show(); //定义黑色背景消失到一条直线,直线在中间 $(this).prev().animate({ //定义黑色背景效果的动画 'height':'70px', //宽度不变 'top':'0' //高度为0 },d); //黑色背景消失的时间 }); }); } allBrandAnimate($('.allbrand'),80); //定于原图片出现的方法和时间 </script> </body> </html>
发表评论
-
Zepto
2015-08-15 13:49 1203Zepto Zepto,是一个比较 ... -
node.js的学习-20140611
2014-06-11 23:17 732//创建一个h1方法里面舒服一个nihao functi ... -
node.js的学习-20140609
2014-06-09 23:01 533Node.js 是一个基于Chrome JavaScript ... -
git的学习-20140604
2014-06-04 23:30 475Git使用 首先 开启"G ... -
PC和移动端的页面的一些差距-20140525
2014-05-25 23:46 851首先 1、标签、描述等描述清晰准确 2、网站结构3层树状结构 ... -
Bootstrap排版基础样式和响应式图片-20140521
2014-05-22 00:41 2709Bootstrap基础排版样式 .col-xs-* // ... -
Bootstrap特性、设计和组件-20140519
2014-05-19 22:22 679特点 Bootstrap是基于jQuery框架开发的,它在j ... -
Bootstrap流式布局-20140515
2014-05-16 00:26 14712流布局是一种适应屏幕的做法。即不固定块的宽度,而是采用百分比作 ... -
Bootstrap的宽度和分辨率的差别-20140514
2014-05-14 23:05 6209首先在bootstrap里面所有 ... -
Bootstrap的认识-20140513
2014-05-14 00:09 1343通过公司的两个比较大 ... -
jquery初步认识-20140123
2014-01-24 01:30 651一、原型模式结构 // 定义一个jQuery构造函数 ... -
html5的特殊标签作用-20140114
2014-01-15 01:04 880<base>、定义页面中所有链接的基准URL & ... -
ie下的指定样式-20140106
2014-01-08 00:00 7281. <!--[if !IE]><!--&g ... -
margin-left在IE6下左浮动加倍-20140102
2014-01-02 23:04 715一、IE6下如果line-height超出本身区块的heigh ... -
浮动存在的问题-20131229
2013-12-29 23:00 514看一个正常的浮动案例 <!DOCTYPE h ... -
在ie6下同张图片不能外面包有a标签后在画热区-20131223
2013-12-23 23:47 825最近在做页面有的发现一个问题 <div class ... -
ie6下导航存在的问题和-2013-12-20
2013-12-21 00:51 602最近在做事的时候发现一个有趣的问题,在上网也找过但是都没有很好 ... -
按比例展示的小js-20131217
2013-12-18 00:41 404做需求的做到一个关于这个功能的项目所以记下来 Math.ra ... -
定位需要注意-20131214
2013-12-15 01:07 663在CSS中关于定位的内容 ... -
flash在Safari下的BUG-20131212
2013-12-12 01:09 731<object width="940&qu ...
相关推荐
一款jquery鼠标悬停品牌图片旋转动画展示特效源码.zip 一款jquery鼠标悬停品牌图片旋转动画展示特效源码.zip 一款jquery鼠标悬停品牌图片旋转动画展示特效源码.zip
jquery hover鼠标悬停两张图片滑动显示对应的标题切换 jquery hover鼠标悬停两张图片滑动显示对应的标题切换 jquery hover鼠标悬停两张图片滑动显示对应的标题切换
jquery hover鼠标悬停到图文列表时滑动图片切换
jquery hover鼠标悬停到图片上图片放大缩小显示标题文字... jquery hover鼠标悬停到图片上图片放大缩小显示标题文字...
jquery hover鼠标悬停遮罩显示
jquery hover鼠标悬停向下滑动导航菜单效果代码 jquery hover鼠标悬停向下滑动导航菜单效果代码 jquery hover鼠标悬停向下滑动导航菜单效果代码
jQuery hover鼠标悬停事件侧边导航菜单结合css3动画 jQuery hover鼠标悬停事件侧边导航菜单结合css3动画
jquery hover鼠标悬停触动图片和文字上下滑动切换效果
jQuery hover鼠标悬停导航下拉滑动油漆刷墙效果 jQuery hover鼠标悬停导航下拉滑动油漆刷墙效果 jQuery hover鼠标悬停导航下拉滑动油漆刷墙效果
jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示
jQuery鼠标悬停图片遮罩动画显示特效 jQuery鼠标悬停图片遮罩动画显示特效
jquery hover鼠标悬停遮罩显示是一款图片网格布局的鼠标悬停动画显示遮罩效果。
2款jQuery hover鼠标悬停flash动画导航菜单代码
js代码 [removed] $(function(){ // 边框效果--移入 function biankuang(){ ... $('.biankuang_1').stop(true).... jQuery鼠标悬停图片边框动画特效是一款鼠标移动商品图片的时候动画显示红色边框的动画代码。
jquery图片冒泡插件鼠标悬停图片冒泡动画展示
jquery鼠标悬停图片标题滑动 jquery鼠标悬停图片标题滑动
jQuery鼠标悬停在图片上效果,鼠标悬停后出现遮罩效果,并淡入出现文字,兼容主流浏览器
这款jQuery插件可以实现鼠标滑过图片时在图片上方创建任意的元素,包括分享按钮和图片文字描述等。这些按钮和文字可以悬浮在图片的任意位置,同时你也可以自己定义这些图片上方的元素出现时的动画特效。