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

其实也只是一点小小的效果,自定义select边框与下拉箭头嘛。自定义select边框对于火狐与IE8及IE9是很容易的,就IE6与IE7有点问题,但经过多番折腾,基本上也搞定了。可是经过google大师的点化,发现无法自定义右侧的箭头,只能靠模拟select来实现。
......
今天工作中要做弹出窗口,最简单的就是隐藏与显示div,效果太生硬,给人的感觉太平淡。于是在网上找插件,发现了一款不错的jQuery弹出窗口插件:Facebox。
Facebox是一个jQuery为基础的lightbox,可显示图像、div、或者远程页面,它的使用简单,效果也不错:淡入淡出,网速慢的时候还会显示加载中。
由于有多个文件,上传演示不方便,就只截了个效果图。
......
后台中经常会用到表格隔行换色、鼠标经过高亮显示当前行、鼠标经过显示该行的编辑和删除链接,相信童鞋们都用过这些效果,用jQuery实现这些效果灰常的简单:
一、隔行换色:
JavaScript代码
- $("tr:odd").addClass("tr_bg");
就是说将表格的偶数行添加名为tr_bg的样式,当然,tr_bg的样式就是用来表示背景色的。
......
前几天踏雪残情写了一篇文章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>
不多说,点击此处查看演示!
最近做项目时需要用到锚点平滑移动的效果,在网上找了两个列子,还不错。
一、用jquery实现的,代码如下:
XML/HTML代码
- <script type="text/javascript">
- $(function() {
- $("a").click(function() {//给所有的a标记添加单击事件;
- var href = $(this).attr("href");//例如:当点击"滑到底部" 时,获取它的href属性为"#bottom",就会跳转到id为bottom的容器处;
- var pos = $(href).offset().top;//$(href)就相当于找到$("#bottom")(最下面的标记),找到他距离顶部的距离;
- $("html,body").animate({ scrollTop: pos }, 3000);//3秒钟
- return false;
- });
- });
- </script>
- <div id="top">平滑跳转到底部:<a href="#bottom">滑到底部</a></div>
- <img width="300" height="3281" src="http://ss4.sinaimg.cn/bmiddle/6200b7a8t8b6743480673&690" />
- <div id="bottom">平滑回到顶部:<a href="#top">回到顶部链接</a></div>
1、点击此处查看演示效果;
2、优点:代码简洁;
3、缺点:只能用鼠标点击事件触发。
......
最近在做项目时经常会用到jQuery,无意中获得了Dreamweaver的jQuery语法提示插件,在项目开发时带来了很多方便。下面来介绍一下。
其实该Dreamweaver CS5绿色版的jquery代码提示插件是提取于原版之中的,所以简单实用,无需安装,只需要覆盖相应的目录里即可。
点击此处下载插件,然后进行安装:
......
最近在做Widget项目,主要是三星和诺基亚手机上的应用程序。因为手机应用程序的客户端只能动态显示内容,所以只能用Ajax请求服务器和用JavaScript动态显示。此时加载jQuery可以省不少事儿。
在用Ajax请求服务器时,代码如下:
$.ajax(
{
type: "POST",
url: "http://www.wuleilei.com/Widget/WidgetServer/Chat/index.php/Index/doChat",
processData: false,
timeout: 20000,
error: function(){alert("unknow");},
data: "uid=" + uid + "&content=" + content,
success: function(msg)
{
}
}
)//end $.ajax
用火狐调试了半天,没反应。于是,用IE看错误提示,如图:
......
页数1/2 12
白
JankoAtWarpSpeed对...