thickbox是jQuery的一个插件，其作用是弹出对话框、网页框，使用户体验度更加愉悦，下面就来简单介绍它的几种用法。 声明一下：这只是个人的总结记载而已。 准备工作：你需要三个文件：thickbox.js、thickbox.css、jquery.js，网上到处可下 具体使用： 第一步：将这三个文件引入到你要使用thickbox的页面代码如下: <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="thickbox.j...
本屌丝最近工作要求重写网站所有代码，so...极其蛋疼的事情出现了，管我的人要求不能用网上的插件，oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能： 需求：网页遮罩层/弹出层，兼容IE6 幸好本屌丝以前聪明收集了个js的版本，so，自己改写成了jQuery插件形式的，方便以后使用。 屁话不多放，无码无真相！ 代码如下:/******************************* * @name Layer跨浏览器兼容插件 v1.0 *...
1、创建一个jsp页面，内容如下，js和css根据自己的实际情况而定 代码如下:<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link href="Share.css" re...
代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title> New Document </title> <script type="text/javascript" src="../jquery-1.7.2.js"></script> <script type="text/javascript"> //创建一个弹出层,title 标题，width 宽度，height 高度，content 内容，url 如果...
代码演示： http://www.imqing.com/demo/movediv.html 大概原理： 使div的position为绝对定位absolute，然后控制其top与left值，需要监听鼠标事件，主要用到mousedown, mousemove, mouseup。 在mousedown后，记录mousedown时鼠标与需要移动的div的位置，然后取得两者之差，得到在鼠标移动后，div的位置。即： left = 当前鼠标位置.x - (鼠标点击时的.x值 - div的初始位置x值) top = 当前鼠标位置.y - (鼠标点击时的.y值 - div的初始...
jquery实现弹出层完美居中效果 代码如下:showDiv($("#pop"));function showDiv(obj){ $(obj).show(); center(obj); $(window).scroll(function(){ center(obj); }); $(window).resize(function(){ center(obj); }); } function center(obj){ var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupHeight = $(obj).height(); var popupWidth =...
弹出层在实际应用中我们经常会碰到大量的弹出层效果，下面我来做一个基于jquery的简单的弹出层效果实例，各位朋友有兴趣可参考。 效果代码如下： 在 弹出层 中下面是核心代码 代码如下:<script type="text/javascript">// 渐变弹出层$(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定事件处理 event.stopPropagation(); var offset = $(event.target).offset();//取消事件冒...
代码如下:<input type="button" value="高级搜索" id="click_test4" />";var content4 = "<center>高级搜索</center><form action='' method='post' id='formUserSuperSearch'>" + "用户名 ： <input type='text' name='username' id='username'>" + "<br/><br/>电子邮箱: <input type='text' id='email'/>" + "<br/><br/>单位: <input type='text'id='unit'/>" + "<br/><br/>电话：<input type='text'id='tel'/> " + "...
iDrag & iDialog 介绍特点：iDialog.js依赖于jquery编写的简单易用的对话框，同时还可以通过添加css3，改变对话框的展现动画。提供了两个方法： ?1、拖拽函数 iDrag() 或 $.drag();?2、对话框函数 iDialog() 或 $.dialog(); 跨平台兼容:兼容：IE6+、Firefox、Chrome等主流浏览器(其它暂时没条件测试)。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件。 渐进增强的体验:确保IE家族功能完善的前提下，现代浏览器适当的...
代码如下:var t9 = new PopupLayer({trigger:"#ele9",popupBlk:"#blk9",closeBtn:"#close9",useOverlay:true,useFx:true,offsets:{x:0,y:-41}});t9.doEffects = function(way){ if(way == "open"){ this.popupLayer.css({opacity:0.3}).show(400,function(){ this.popupLayer.animate({ left:($(document).width() - this.popupLayer.width())/2, top:(document.documentEleme...
JQuery插件fancybox解决无法在弹出层使用左右键的问题。无法使用的原因在于，插件接管了左右键，用于多张图片的翻页。 如果不需要这个功能，可以在fancybox插件中，禁止接管就好了。 具体在插件下的js文件 jquery.fancybox-1.3.4.js 中的598行，注释掉就好了。 // _set_navigation();
点击弹出层外区域关闭弹出层jquery特效,废话不说，上代码，简洁明了： 代码如下:<html> <head> <style> .hide{display:none;} .con{width:500px;height:300px;background:#000;} </style> <title>点击弹出层 ，点击弹出层外区域关闭弹出层jquery特效</title> <script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("div.down").click...
代码如下: $("#firefoxicon").click(function() { $("#window1").chinaz({ windowtitle: "firefox", windowpositiontop: "center", windowpositionleft: "center", windowwidth: 500, windowheight: 500, windowanimation: "easeoutcubic" });}); 轻松设置弹出层的效果,和弹出方...
之前做一个项目，感觉里面的弹出层做的挺好，但是代码结构有问题，这次用到了，重构了一下，改成jQuery的插件形式，并增加了reLoad的功能，感觉还不错，代码如下： 代码如下:(function($){ $.module={ _showCoverLayer:function(){//显示遮盖层 this.coverLayer=$("#TB_overlay"); var height=$(document).height()+"px"; var width=$(document).width()+"px"; if(this.coverLayer.length>0){ this.coverLayer.css({"visibility":...
此Jquery插件是一款非常实用的特效，是很多网站不可缺少的推广神兵利器，传统的一般都用百度、加网的分享插件，但样式外观都不怎么好看，用户体验效果差一点，此作品不但有分享功能，还具备了动画效果，提高了用户体验。由于用了CSS3，为了可以看到插件的最佳效果，建议大家使用谷歌、火狐等浏览器。。。作品包括以下功能： 1、弹出层 2、遮罩层 3、动画效果 4、CSS3 效果如下： 源码下载 代码片段(1) 代码如下:$(document).ready...