- 浏览: 330522 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (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、实现原理
首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历停止所有的效果,从新触发效果就是标题的从左边淡出和背景颜色的变化,当鼠标离开图片后触发一个遍历,停止所有动画标题回到原处不见,背景颜色变回原样
主要的方法
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏
2、实现原理
首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历停止所有的效果,从新触发效果就是标题的从左边淡出和背景颜色的变化,当鼠标离开图片后触发一个遍历,停止所有动画标题回到原处不见,背景颜色变回原样
主要的方法
$(".section ul li").hover(function() //伪类的触发 $(this).find(".rsp").stop().fadeTo(500,0.5) $(this).find(".text").stop().animate({left:'0'}, {duration: 500}) //这两段就是标题的淡出和背景颜色的改变 $(this).find(".rsp").stop().fadeTo(500,0) $(this).find(".text").stop().animate({left:'318'}, {duration: "fast"}) $(this).find(".text").animate({left:'-318'}, {duration: 0}) //这三段就让标题回放到原来的位置上去,让背景颜色回到原样
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
<!DOCTYPE htm> <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;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} .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%;} /* section */ .section{width:981px;margin:40px auto 0 auto;overflow:hidden;} .section ul{width:996px;} .section ul li{float:left;margin-right:14px;margin-bottom:13px;display:inline;width:318px;height:343px;overflow:hidden;position:relative;} .section ul li .photo{width:318px;height:343px;overflow:hidden;} .section .rsp{width:318px;height:343px;overflow:hidden;position: absolute;background:#000;top:0px;left:0px;} .section .text{position:absolute;width:318px;height:343px;left:-318px;top:0px;overflow:hidden;} .section .text h3{width:318px;margin-top:130px;height:55px;line-height:55px;text-align:center;color:#FFFFFF;background:#000000;font-family:"microsoft yahei";font-size:26px;} </style> <div class="section"> <ul class="clearfix"> <li> <div class="photo"><img src="images/index_28.jpg" width="318" height="343" /></div> <div class="rsp"></div> <div class="text"><a href="http://www.17sucai.com/"><h3>布品展示</h3></a></div> </li> <li> <div class="photo"><img src="images/index_30.jpg" width="318" height="343" /></div> <div class="rsp"></div> <div class="text"><a href="http://www.17sucai.com/"><h3>新品纵览</h3></a></div> </li> <li> <div class="photo"><img src="images/index_32.jpg" width="318" height="343" /></div> <div class="rsp"></div> <div class="text"><a href="http://www.17sucai.com/"><h3>灵感街拍</h3></a></div> </li> <li> <div class="photo"><img src="images/index_36.jpg" width="318" height="343" /></div> <div class="rsp"></div> <div class="text"><a href="about.asp"><h3>公司故事</h3></a></div> </li> <li> <div class="photo"><img src="images/index_29.jpg" width="318" height="343" /></div> <div class="rsp"></div> <div class="text"><a href="http://www.17sucai.com/"><h3>留言</h3></a> </div> </li> <li> <div class="photo"><img src="images/index_38.jpg" width="318" height="343" /></div> <div class="rsp"></div> <div class="text"><a href="http://www.17sucai.com/"><h3>联系我们</h3></a></div> </li> </ul> <div class="clear"></div> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ //定义一个可以激活所有函数的方法 $(".section ul li .rsp").hide(); //获得隐藏元素方法 $(".section ul li").hover(function(){ //定义一个伪类鼠标触及事件 $(this).find(".rsp").stop().fadeTo(500,0.5) //当鼠标移动到图片上时通过遍历停止所有运行的动画,获得一个淡出事件 $(this).find(".text").stop().animate({left:'0'}, {duration: 500}) //当鼠标移动到图片上时通过遍历停止所有运行的动画,在移动一个动画让标题出从左边出现 },function(){ //在jquery 在定义一个方法 $(this).find(".rsp").stop().fadeTo(500,0) //当鼠标离开是通过遍历停止动画在让淡出效果回去 $(this).find(".text").stop().animate({left:'318'}, {duration: "fast"}) //通过遍历停止动画后,在触发一个动画让原本出现的标题开始回收,让背景颜色变化正常 $(this).find(".text").animate({left:'-318'}, {duration: 0}) //通过遍历制动动画,发出动画让标题回到原位,让背景值变回0 }); }); </script> </body> </html>
- images.rar (381 KB)
- 下载次数: 43
- hover事件鼠标滑过图片半透明标题文字滑动显示隐藏images.rar (381 KB)
- 下载次数: 51
发表评论
-
Zepto
2015-08-15 13:49 1200Zepto Zepto,是一个比较 ... -
node.js的学习-20140611
2014-06-11 23:17 727//创建一个h1方法里面舒服一个nihao functi ... -
node.js的学习-20140609
2014-06-09 23:01 526Node.js 是一个基于Chrome JavaScript ... -
git的学习-20140604
2014-06-04 23:30 470Git使用 首先 开启"G ... -
PC和移动端的页面的一些差距-20140525
2014-05-25 23:46 846首先 1、标签、描述等描述清晰准确 2、网站结构3层树状结构 ... -
Bootstrap排版基础样式和响应式图片-20140521
2014-05-22 00:41 2704Bootstrap基础排版样式 .col-xs-* // ... -
Bootstrap特性、设计和组件-20140519
2014-05-19 22:22 675特点 Bootstrap是基于jQuery框架开发的,它在j ... -
Bootstrap流式布局-20140515
2014-05-16 00:26 14703流布局是一种适应屏幕的做法。即不固定块的宽度,而是采用百分比作 ... -
Bootstrap的宽度和分辨率的差别-20140514
2014-05-14 23:05 6205首先在bootstrap里面所有 ... -
Bootstrap的认识-20140513
2014-05-14 00:09 1337通过公司的两个比较大 ... -
jquery初步认识-20140123
2014-01-24 01:30 650一、原型模式结构 // 定义一个jQuery构造函数 ... -
html5的特殊标签作用-20140114
2014-01-15 01:04 874<base>、定义页面中所有链接的基准URL & ... -
ie下的指定样式-20140106
2014-01-08 00:00 7241. <!--[if !IE]><!--&g ... -
margin-left在IE6下左浮动加倍-20140102
2014-01-02 23:04 712一、IE6下如果line-height超出本身区块的heigh ... -
浮动存在的问题-20131229
2013-12-29 23:00 512看一个正常的浮动案例 <!DOCTYPE h ... -
在ie6下同张图片不能外面包有a标签后在画热区-20131223
2013-12-23 23:47 819最近在做页面有的发现一个问题 <div class ... -
ie6下导航存在的问题和-2013-12-20
2013-12-21 00:51 597最近在做事的时候发现一个有趣的问题,在上网也找过但是都没有很好 ... -
按比例展示的小js-20131217
2013-12-18 00:41 398做需求的做到一个关于这个功能的项目所以记下来 Math.ra ... -
定位需要注意-20131214
2013-12-15 01:07 658在CSS中关于定位的内容 ... -
flash在Safari下的BUG-20131212
2013-12-12 01:09 729<object width="940&qu ...
相关推荐
jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示
jquery鼠标悬停图片标题滑动 jquery鼠标悬停图片标题滑动
jquery hover鼠标悬停两张图片滑动显示对应的标题切换 jquery hover鼠标悬停两张图片滑动显示对应的标题切换 jquery hover鼠标悬停两张图片滑动显示对应的标题切换
jquery hover鼠标悬停到图文列表时滑动图片切换
jquery hover鼠标滑过图片列表上下滚动显示图片详细内容 jquery hover鼠标滑过图片列表上下滚动显示图片详细内容 jquery hover鼠标滑过图片列表上下滚动显示图片详细内容
jquery hover图片放大特效鼠标滑过图片浮动层变大显示 jquery hover图片放大特效鼠标滑过图片浮动层变大显示 jquery hover图片放大特效鼠标滑过图片浮动层变大显示
jQuery实现鼠标滑过图片在图片上下滑动显示图片信息特效
jquery hover 冒泡事件制作心型图片墙鼠标悬浮图片 jquery hover 冒泡事件制作心型图片墙鼠标悬浮图片
jquery hover鼠标滑过动画导航条是一款蓝色jQuery滑动导航栏特效代码。
jquery鼠标悬停图片标题滑动是一款jquery hover鼠标悬停图片遮罩显示标题文字滑动效果代码。
当鼠标移动到图片上的时候,图片下方默认显示图片对应的文字内容.
jQuery实现鼠标滑过图片上下滑动显示半透明提示信息.zip
jquery hover鼠标悬停向下滑动导航菜单效果代码 jquery hover鼠标悬停向下滑动导航菜单效果代码 jquery hover鼠标悬停向下滑动导航菜单效果代码
jquery 水平手风琴鼠标滑过标题图片滑动切换
jquery hover图片插件制作鼠标滑过标题单个展开图片效果
jquery hover图片相册集滑动展开显示全部图片过程 jquery hover图片相册集滑动展开显示全部图片过程 jquery hover图片相册集滑动展开显示全部图片过程
jquery hover图片遮罩层滑动.zip
jquery hover事件鼠标悬停九宫格图片高亮显示代码