- 浏览: 328900 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (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、效果及功能说明
鼠标悬停到图片时,浮动高亮透明层随着鼠标悬停的图片相应滑动到当前图片高亮显示
2、实现原理
先定义好给图片加透明层的效果但后先去掉,当鼠标移动到图片的上面立即触动一个方法让给透明层的通过一个动画进入到用户的视野里,从高度和宽度都是设定的图片的两倍后在开始缩小直接到和原图片一样大小位置,随着鼠标移动到那张图片而移动
主要的方法
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
鼠标悬停到图片时,浮动高亮透明层随着鼠标悬停的图片相应滑动到当前图片高亮显示
2、实现原理
先定义好给图片加透明层的效果但后先去掉,当鼠标移动到图片的上面立即触动一个方法让给透明层的通过一个动画进入到用户的视野里,从高度和宽度都是设定的图片的两倍后在开始缩小直接到和原图片一样大小位置,随着鼠标移动到那张图片而移动
主要的方法
$('.box').bind('mouseover',function() //隐藏掉鼠标的上的改变背景颜色的效果 $(".boxBor").css({ width:'100%', height:$(window).height(), left:'0px', top:'0px', opacity:0, display:'block' }) 当鼠标触及到图片后开始显示这个效果
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" /> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{background:#eee;font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} .demo{width:490px;margin:30px auto;} .box{float:left;width:100px;height:100px;border:1px solid white;background:#EEE;margin:10px;position:relative;display:inline;} .box a{display:block;width:100px;height:100px;overflow:hidden;position:absolute;left:0;top:0;z-index:9;} .boxBor{ position:absolute;left:0;top:0;display:none;border:1px solid white;z-index:4; background:#fff; background:-moz-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77)); background:-webkit-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77)); background:-o-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77)); background:-ms-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77)); } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <div class="boxBor"></div> <div class="demo"> <div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl.jpg" alt="" /></div> <div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl2.jpg" alt="" /></div> <div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl3.jpg" alt="" /></div> <div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl4.jpg" alt="" /></div> <div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl5.jpg" alt="" /></div> <div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl.jpg" alt="" /></div> <div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl2.jpg" alt="" /></div> <div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl3.jpg" alt="" /></div> <div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl4.jpg" alt="" /></div> <div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl5.jpg" alt="" /></div> <div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl.jpg" alt="" /></div> <div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl2.jpg" alt="" /></div> <div style="clear:both;"></div> </div> <script type="text/javascript"> $(function(){ $('.box').bind('mouseover',function(){ //定义一个隐藏方法鼠标移动到上面改变背景颜色的方法 var oPosition=$(this).position(); //定义参数 var oThis=$(this); //定义参数 $('.boxBor').queue('fnHide'); //定义方法显示或操作在匹配元素上执行 if($(".boxBor").attr('deta-switch')!=='true'){ //定义改变图像的 width 属性方法 $(".boxBor").attr('deta-switch','true'); //定义改变图像的 width 属性方法 $(".boxBor").css({ width:'100%', height:$(window).height(), left:'0px', top:'0px', opacity:0, display:'block' }) //通过jquery 来修改 css 修改的有长度 高度 距左和距上 透明度 和是否隐藏 } $(".boxBor").stop(false,false).animate({ //定义停止当前正在运行的动画方法 opacity:0.8, //让透明度为0.8 left:oPosition.left+10, //距左为oPosition参数的距左再加10 top:oPosition.top+10, //距上oPosition参数的距左再加10 width:oThis.width(), //长度oThis参数长度 height:oThis.height() //长度oThis参数宽度 },250) //全部完成时间0.25秒 }); }) </script> </body> </html>
发表评论
-
Zepto
2015-08-15 13:49 1198Zepto Zepto,是一个比较 ... -
node.js的学习-20140611
2014-06-11 23:17 720//创建一个h1方法里面舒服一个nihao functi ... -
node.js的学习-20140609
2014-06-09 23:01 521Node.js 是一个基于Chrome JavaScript ... -
git的学习-20140604
2014-06-04 23:30 457Git使用 首先 开启"G ... -
PC和移动端的页面的一些差距-20140525
2014-05-25 23:46 840首先 1、标签、描述等描述清晰准确 2、网站结构3层树状结构 ... -
Bootstrap排版基础样式和响应式图片-20140521
2014-05-22 00:41 2699Bootstrap基础排版样式 .col-xs-* // ... -
Bootstrap特性、设计和组件-20140519
2014-05-19 22:22 670特点 Bootstrap是基于jQuery框架开发的,它在j ... -
Bootstrap流式布局-20140515
2014-05-16 00:26 14697流布局是一种适应屏幕的做法。即不固定块的宽度,而是采用百分比作 ... -
Bootstrap的宽度和分辨率的差别-20140514
2014-05-14 23:05 6195首先在bootstrap里面所有 ... -
Bootstrap的认识-20140513
2014-05-14 00:09 1333通过公司的两个比较大 ... -
jquery初步认识-20140123
2014-01-24 01:30 646一、原型模式结构 // 定义一个jQuery构造函数 ... -
html5的特殊标签作用-20140114
2014-01-15 01:04 867<base>、定义页面中所有链接的基准URL & ... -
ie下的指定样式-20140106
2014-01-08 00:00 7181. <!--[if !IE]><!--&g ... -
margin-left在IE6下左浮动加倍-20140102
2014-01-02 23:04 708一、IE6下如果line-height超出本身区块的heigh ... -
浮动存在的问题-20131229
2013-12-29 23:00 510看一个正常的浮动案例 <!DOCTYPE h ... -
在ie6下同张图片不能外面包有a标签后在画热区-20131223
2013-12-23 23:47 814最近在做页面有的发现一个问题 <div class ... -
ie6下导航存在的问题和-2013-12-20
2013-12-21 00:51 588最近在做事的时候发现一个有趣的问题,在上网也找过但是都没有很好 ... -
按比例展示的小js-20131217
2013-12-18 00:41 389做需求的做到一个关于这个功能的项目所以记下来 Math.ra ... -
定位需要注意-20131214
2013-12-15 01:07 653在CSS中关于定位的内容 ... -
flash在Safari下的BUG-20131212
2013-12-12 01:09 721<object width="940&qu ...
相关推荐
jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示
jquery鼠标悬停图片标题滑动 jquery鼠标悬停图片标题滑动
整合的一个小列子,jquery鼠标悬停放大图片
代码简介:jQuery鼠标悬停图片震动特效是一款基于CSS3实现的圆形修边样式,配合jQuery实现的图片抖动特效
任意鼠标悬停在四周的一个图片上,当前图片立即与中间的图片交换位置 注意:图片交换过程中,即动画执行过程中,鼠标再次悬停在别的图片位置上的时候,动画不会被执行 使用方法: 1、将css样式引入到你...
jquery鼠标悬停图片高亮滑动效果实例源码,供大家一起共同参考学习。
古典风格的jquery鼠标悬停文字导航菜单滑动高亮显示
jQuery鼠标悬停在图片上效果,鼠标悬停后出现遮罩效果,并淡入出现文字,兼容主流浏览器
效果描述:鼠标悬停在图片上后,有一个高亮的光线从左向右滑动展示,同时底部滚动出文字说明效果 效果轻巧,用起来又很舒适,懒人站长特别推荐 附件中只有一个默认的index.html文件,其他文件已经上传至...
插件描述:jquery鼠标悬停滑动切换特效. 参考示例:http://www.jq22.com/jquery-info5519
jquery hover事件鼠标悬停九宫格图片高亮显示代码
jQuery鼠标悬停滑动显示图片信息,当鼠标滑动到图片之上的时候,相关的图片文字描述信息就会从图片的顶部下滑到该图片表面,有删除和编辑按钮,可跟根据自己的需要修改其效果
jquery鼠标悬停滑动图片切换特效
jquery实现鼠标悬停图片预览功能的效果下载
不错的图片特效,当鼠标悬停在图片上后,多出div边框的图片会自动左右滚动,底部弹出半透明度的文字说明内容
jquery鼠标悬停动态显示提示文字或者图片
jQuery鼠标悬停图片滑动切换是一款鼠标悬停在图片上后,显示隐藏的另外一张图片,鼠标移走后返回之前图片,整个过程带有翻转效果。
jquery鼠标悬停图片放大滑动显示标题 jquery鼠标悬停图片放大滑动显示标题 jquery鼠标悬停图片放大滑动显示标题 jquery鼠标悬停图片放大滑动显示标题