最近需要做一个浮动层的拖动,本来准备手动用js写的,却意外发现了一个jquery的拖动插件EasyDrag,只需简短的一两行代码就可以在主流浏览器上面轻松的拖动。
1、将id为div1的div实现拖动:
$(document).ready(
function(){
$("#div1").easydrag();
}
);
2、EasyDrag还可以指定可拖动的区域,比如只能通过标题拖动整个div:
......
最近美工做了个效果图,为了追求一点效果,可难到我了。

其实也只是一点小小的效果,自定义select边框与下拉箭头嘛。自定义select边框对于火狐与IE8及IE9是很容易的,就IE6与IE7有点问题,但经过多番折腾,基本上也搞定了。可是经过google大师的点化,发现无法自定义右侧的箭头,只能靠模拟select来实现。
......
呵呵,最近加入了.net项目,开始学习和使用.net啦,换个口味,有些兴奋。
这个项目中大量用到javascript和ajax,页面上的主要元素都是用ajax请求和javascript动态显示(和我的博客的留言板比较像哈~),以前对javascript也只是一知半解哈,正好乘此机会补习补习O(∩_∩)O~
1、getElementById()
......
呵呵,折腾博客,想搞个像wordpress那样的3D旋转标签云效果,不出所然,在网上找到了同样效果的代码,灰常不错。先看张效果图:

使用起来灰常的简单,代码就不贴了,点击此处查看演示。
......
今天工作中要做弹出窗口,最简单的就是隐藏与显示div,效果太生硬,给人的感觉太平淡。于是在网上找插件,发现了一款不错的jQuery弹出窗口插件:Facebox。
Facebox是一个jQuery为基础的lightbox,可显示图像、div、或者远程页面,它的使用简单,效果也不错:淡入淡出,网速慢的时候还会显示加载中。
由于有多个文件,上传演示不方便,就只截了个效果图。
......
后台中经常会用到表格隔行换色、鼠标经过高亮显示当前行、鼠标经过显示该行的编辑和删除链接,相信童鞋们都用过这些效果,用jQuery实现这些效果灰常的简单:
一、隔行换色:
JavaScript代码
- $("tr:odd").addClass("tr_bg");
就是说将表格的偶数行添加名为tr_bg的样式,当然,tr_bg的样式就是用来表示背景色的。
......
如果是form用submit提交表单,则回车后即可提交,但项目中很多时候都不需要form,这是则需要回车出发提交事件,来个简单的例子:
XML/HTML代码
- <p><input type="text" onkeydown="return enterSubmit(event)" /></p>
- <p><input type="button" value="提交" id="btn" onclick="login()" /></p>
JavaScript代码
- function enterSubmit(evt){
- evt = (evt) ? evt : ((window.event) ? window.event : "")
- var key = evt.keyCode?evt.keyCode:evt.which;
- if(key == 13){
- document.getElementById("btn").click();
- return false;
- }
- }
- function login(){
- alert("提交成功!");
- }
点击此处查看示例。
前几天踏雪残情写了一篇文章JS按钮滑动切换内容,刚好今天项目要用这个效果,不过只是单纯的图片切换。本来准备在他的源代码上修改的,但发现纯js写的太复杂了,于是在网上找了这个效果,用jquery写的,简洁很多。
JavaScript代码
- $(document).ready(function(){
- $(".imgnav a").click(function(){
- var num=($(this).attr('rel')-1)*(-900);
- $(".imgshowbox").animate({left:num},500);
- $(".imgnav a").removeClass('active');
- $(this).addClass("active");
- });
- });
XML/HTML代码
- <div class="container">
- <div class="imgbox">
- <div class="imgshowbox">
- <img src="http://iamlze.cn/demo/imageslider/1.png" id="img_1" title="" alt="" />
- <img src="http://iamlze.cn/demo/imageslider/2.png" id="img_2" title="" alt="" />
- <img src="http://iamlze.cn/demo/imageslider/3.png" id="img_3" title="" alt="" />
- <img src="http://iamlze.cn/demo/imageslider/4.png" id="img_4" title="" alt="" />
- </div>
- </div>
- <div class="c"></div>
- <ul class="imgnav">
- <li><a href="#" class="active" rel="1"></a></li>
- <li><a href="#" rel="2"></a></li>
- <li><a href="#" rel="3"></a></li>
- <li><a href="#" rel="4"></a></li>
- </ul>
- </div>
点击此处查看演示。
项目中用js改变样式就像平时吃饭喝水一样不可缺少,隐藏与显示div更是使用频繁,你会不会经常对突然显示与隐藏而不满意呢?来看看下面这段代码:
JavaScript代码
-
-
-
-
-
- function show(){
- $("#divObj").show();
- }
-
-
- function hiden(){
- $("#divObj").hide();
- }
-
- function fadeIn(){
- $("#divObj").fadeIn(2000);
- }
- function fadeOut(){
- $("#divObj").fadeOut(2000);
- }
-
-
- function slideDown(){
- $("#divObj").slideDown();
- }
-
-
- function slideUp(){
- $("#divObj").slideUp();
- }
-
-
-
-
-
- function slideToggle(){
- $("#divObj").slideToggle(2000);
- }
-
-
-
-
-
-
- function toggle(){
- $("#divObj").toggle(2000);
- }
XML/HTML代码
- <h3>div里内容的显示隐藏特效</h3>
- <input type="button" value="显示" onclick="show()"/>
- <input type="button" value="隐藏" onclick="hiden()"/>
- <input type="button" value="淡入" onclick="fadeIn()"/>
- <input type="button" value="淡出" onclick="fadeOut()"/>
- <input type="button" value="窗帘效果展开" onclick="slideDown()"/>
- <input type="button" value="窗帘效果折叠" onclick="slideUp()"/>
- <input type="button" value="窗帘效果的切换" onclick="slideToggle()"/>
- <input type="button" value="隐藏显示效果切换" onclick="toggle()"/>
- <div id="divObj" style="display:none">
- 1.测试例子<br/>
- 2.测试例子<br/>
- 3.测试例子<br/>
- 4.测试例子<br/>
- 5.测试例子<br/>
- 6.测试例子<br/>
- 7.测试例子<br/>
- 8.测试例子<br/>
- 9.测试例子<br/>
- 0.测试例子<br/>
- </div>
不多说,点击此处查看演示!
页数1/3 123
白
JankoAtWarpSpeed对...