随笔分类 -  Jquery

摘要：真心不知道用了less之后，怎么能让css写的更快。有时你定义了变量还得回到开头去看看。关键是定义的变量在css不停的修改中会变得没什么用。用了之后没觉得会加快，感觉让我更加郁闷，求各位大神指点指点，是不是我在哪个地方错了。比如：@color:#ccc;.border(@color:#ccc){ border:1px solid @color;}.div1{ color:@color; .border(red);}.div2{ color:@color; .border(blue);}忽然觉得这个div2字体颜色可能不太适合要换，然后通过四则运算color:@color + 33333(晕这. 阅读全文

摘要：上一章主要是关于分页控件的原理，代码也没有重构。在这一章会附上小插件的下载链接，插件主要就是重构逻辑部分，具体可以下载源文件看下，源代码也有注释。为了测试这个插件是能用的，我弄了个简单的asp.net例子（vs 2010）。通过ajax根据每一页请求数据，数据是使用json格式进行传输，通过knockout.js绑定。在这里顺便推荐一下汤姆大叔的Knockout应用开发指南 ，是学习Knockout非常好的文章。惯例：插件Demo Asp.net Demo效果图： 主要思路是通过分页控件的callback方法把 当前页 和 每页显示数量 传给pageselectCallback方法，... 阅读全文

摘要：以前一直都是用别人的分页控件，虽然用得很爽，但总觉的还是自己写个小插件比较好，这个插件效果、代码等都有参照别人完成的控件。即便功能并不是那么完善，扩展性也不好，bug或许还很多。个人觉得，适合自己用就行了。你对自己写的肯定会比较熟悉，当插件需要不停的重构，这个插件就慢慢完善了。现在要做的是走出开头的那一步。往往都是因为开头的那一步阻碍了我们。废话一大堆........惯例 Demo下载 效果图：一、定义基础数据 //基础数据 var current_page = 1; //当前页 var num_edge = 4; //省略号前后显示数量 var counts... 阅读全文

摘要：之前看到有博友写了一个仿天猫商城左侧导航菜单，可惜不提供免费下载，也没有代码。以前自己也写过类似的效果，只是都是一小块一小块的，现在重新拼凑。我将一步一步的实现拼凑过程，希望对你有所帮助。Demo在ie8 、 谷歌、 火狐、遨游、ie6 浏览器下运行，效果良好！但在ie6下有个bug，就是滚动条可以无限滚动，没有找到好的解决方案，哪位朋友知道怎么改告诉我一下，谢谢！如果没有更好的方法我就打算用js来解决！ 好了，可以先下载例子来看看（Demo）。看看效果图： 一、定位左侧整体菜单栏.slides { position: fixed; top: 22px; z-index: ... 阅读全文

摘要：上一篇是关于手风琴效果的，但是有时候我们需要放大的图片大小不规律，想要在屏幕中间显示大图。图片放大可以做为单独的效果，也可以和其他的效果结合起来。比如Demo 里的Demo5.html是以图片无缝切换和图片放大结合的。整个效果分为两个部分。 1、定义遮罩层 $('.mark').css({ position: "absolute", top: 0, backgroundColor: "#777", zIndex: 1002, left: 0, display: " none" } ) 当点击图片显示大图的时候把整个屏幕 阅读全文

摘要：这篇主要是手风琴效果和无缝切换相结合，在Demo里的Demo3.html、Demo4.html。手风琴原理比较简单，当鼠标经过的时候改变图片的路径，鼠标移到另一张图片时还原路径。虽然原理简单，但是做的过程中也遇到很多纠结的事。一起来看代码吧！（很多变量没有给出，请结合Demo js里的ImageSlide.js） 22222 先是用a标签设置Smallimg 和 Bigimg来存图片的路径，因为img的src会改变。当鼠标经过li的时候我们就改变img的src 把图片变成大图。 $this.find("li").mouseover... 阅读全文

摘要：想要和园友分享一下学习jquery的经验、总结，更希望园友提出点建议。第一次写，有不好的地方请多多见谅！文笔有限，很多时候不知道怎么来描述，唉、硬伤啊！！那只好多做了，贴代码。。。ok，废话少说，先上Demo，里面有5个Demo,从简单的jquery到重构为jquery小插件。包含两个效果，手风琴效果和点击图片放大。上菜：Demo无缝连接原理： 1、定义显示区域，比如你有十张图片每次只显示5张。假如一张图片宽150px，那么可以用一个750px的div来包含一个1500px的ul/div。css: .myul { width: 1500px; ... 阅读全文