【jQuery实现文章图片弹出放大效果】教程文章相关的互联网学习教程文章

jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)【图】

对于 Boxy弹出框的使用之前写过一些文章(查看jquery.boxy基础),今天主要是在解决一个需要之后,觉得值得把它记录下来,所以就再写一篇,主要功能是,在弹出对话框后,隔N秒后自动隐藏,还有就是自动跳转! 效果如图: 而所封装的代码如下: 代码如下:// boxy对话框扩展 var Boxy_Extensions = { options: { title: 艺吧提示, closeText: x }, //弹出后N秒后隐藏 alertDelayFun: function (info, timer, options) { options = ...

js弹出框轻量级插件jquery.boxy使用介绍

当你需要使用弹出框时,当然可以使用jquery-ui,artdiag,blockUI等等,但今天我介绍一个轻量级的插件 boxy!它可以把美工设计的弹出框很容易的体现出来,而且兼容性还不错! 代码如下:<script type=text/javascript> $(function() { $(#ask-actuator).click(function() { Boxy.ask("How are you feeling?", ["Great", "OK", "Not so good"], function(val) { alert("You chose: " + val); }, {title: "This is a question..."}); re...

使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体【图】

模态窗体已经成为Web开发人员设计界面时经常要使用的传输数据的方式。通过模态窗口,可以提高网站的可用性。正好项目的需要,有个客户想要模态弹出的窗体来提交网站的反馈,经过一番测试实现了,我使用jQuery fancybox插件来创建一个漂亮的模态窗体,提交表单的数据在服务器端实现Ajax调用。你可以在你的邮件里收到用户发送的反馈消息html代码 header部分主要的JS文件如下引入jquery代码和fancybox代码 代码如下:<script type="tex...

jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)【图】

功能:zhou en ce同学最近写了个基于jquery的信息弹出插件showInfoDialog,该插件对背景进行遮罩,然后弹出信息显示框,信息显示种类包括: 一、信息种类说明: 1.1、操作成功信息1.2、错误信息1.3、警告信息1.4、通知信息二、使用说明 代码如下:<!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; cha...

jQuery弹出窗口完整代码(居中,居左,居右)【图】

核心代码: 代码如下://获取窗口的高度 var windowHeight; //获取窗口的宽度 var windowWidth; //获取弹窗的宽度 var popWidth; //获取弹窗高度 var popHeight; function init(){ windowHeight=$(window).height(); windowWidth=$(window).width(); popHeight=$(".window").height(); popWidth=$(".window").width(); } //关闭窗口的方法 function closeWindow(){ $(".title img").click(function(){ $(this).parent().parent().hi...

jQuery 右下角滑动弹出可关闭重现层完整代码【图】

效果图: 完整代码如下: jquery右下角滑动弹出可关闭重现层 博客园 计划 教程 *{ margin:0px; padding:0px;} #jihuaslide{ width:300px; height:200px; border:1px solid #000; position:fixed; bottom:2px; right:2px; display:none; background-color:White;} #jihuaslide a{ position:absolute; top:8px; right:8px; font-size:12px; text-decoration:none; color:Blue;} #jihuaslide h2{ font-size:24px; text-align:cent...

jquery.Jwin.js 基于jquery的弹出层插件代码

代码如下: 代码如下:(function ($) { var imgdir = images/;//图片文件夹路径 var autoHide=false;//悬浮div是否自动隐藏 var hideType=hide;//隐藏的方式 可选参数 hide、slide、fade var hideDelay=0;//悬浮div隐藏过程使用的时间 var hideTime=0;//悬浮div延迟隐藏时间 var zIndex=100;//多个div时获取焦点的div处于顶层 var showType=show;//悬浮div显示方式 可选参数 hide、slide、fade var showTime=0;//悬浮div显示过程使...

仿中关村在线首页弹出式广告插件(jQuery版)

其的就不多说啦,直接上代码: jquery 插件: 代码如下:/* 疯狂秀才 制作 于 2012-04-24 17:00 QQ: 1055818239 email: hxl_apple@163.com */ (function($){ $.fn.quickAd = function(settings){ settings = $.extend({ width:760, height:400, html:我是广告内容, top:130, sec:5, //广告显示时长,单位秒 border:true //显示外框 },settings); var fkxc_ad = 0; var bodyWidth = $(window).width(); var _adBodyContainerID = "b...

jQuery UI Dialog 创建友好的弹出对话框实现代码

主要参数 jQuery UI Dialog常用的参数有: 1、autoOpen:默认true,即dialog方法创建就显示对话框 2、buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式: {"确定":function(){},"取消":function(){}} [{text:"确定", click: function(){}},{text:"取消",click:function(){}}] 3、modal:默认false,是否模态对话框,如果设置为true则会创建一个遮罩层把页面其他元素遮住 4、title:标题 5、draggable:是否可手动,默认...

Jquery弹出窗口插件 LeanModal的使用方法【图】

开发网站少不了要经常用弹出窗口的形式,今天在网上搜了个小插件LeanModal,记录于此,方便自己,亦方便他人使用。 此插件是个老外写的,体积小是它最大的优点,压缩后1k不到。当然,此插件是寄生于JQuery上. 一. 效果图 二.使用步骤:   1.引用Jquery.js和leanModal.min.js 代码如下:<script src="Javascript/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="Javascript/jquery.leanModal.min.js" type="...

基于jQuery的弹出框插件

html如下: 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.7.min.js"></script> <script type="text/javascript" src="jquery-1.0.popwin.js"></script> <scr...

jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件

最终效果: 代码如下:<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>弹出层插件:jquery.artwl.thickbox.js</title> <script src="/js_lib/jQuery-1.7.1.js" type="text/javascript"></script> <script type="text/javascript"> /* File Created: 三月 1, 2012 Author:artwl */ ;(function ($) { $.extend({ artwl_bind: function (options) { options=$.extend({ ...

40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一【图】

以其语法简单灵活而大受Web designer欢迎。所以很多网页设计师结合jQuery的强大功能制作出了许多成熟的图片滑动插件,我们可以很简单地直接将这些图片滑动插件嵌入到网页中,很容易就得到了即酷又实用的jQuery图片滑动效果。从这篇文章开始到接下来的几篇文章我们将向大家分享40多种非常有用,又有创意的jQuery图片滑动插件,及其演示和下载地址。你可以按你网页风格找到合适的jQuery图片滑动插件,然后点击演示链接查看具体效果,...

40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二【图】

在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片。相信大家都知道jQuery是最优秀的Javascript框架之一。以其语法简单灵活而大受Web designer欢迎。所以很多网页设计师结合jQuery的强大功能制作出了许多成熟的图片滑动插件,我们可以很简单地直接将这些图片滑动插件嵌入到网页中,很容易就得到了即酷又实用的jQuery图片滑动效果。在这是jQuery滑动切换插件系列的第...

js弹出层之1:JQuery.Boxy (二)【图】

4.1、手动创建实例 代码如下:<script type="text/javascript"> $(function() { $("#a1").click(function() { //实例化一个Boxy对象 var box1 = new Boxy("<h3>这个参数是显示的内容</h3>" //显示内容 , { title: "标题", //对话框标题 modal: false, //是否为模式窗口 afterHide: function(e) { alert("dialog hide"); }, //隐藏时的回调函数 afterShow: function(e) { alert("dialog show"); }, //显示时的回调函数 closeText: "...