html链接:
目录
注册
首页 web前端 js教程 jQuery制作的别致导航有阴影背景高亮模式窗口_jquery

jQuery制作的别致导航有阴影背景高亮模式窗口_jquery

May 16, 2016 pm 04:52 PM
导航

效果图:
jQuery制作的别致导航有阴影背景高亮模式窗口_jquery 
html链接:

复制代码 代码如下:

css:
复制代码 代码如下:

img{ border:0px;}
#registerwindow{ width:600px; height:400px; top:50px; right:100px; background:#FFF; display:none; border:5px #999 solid; position:absolute; z-index:999;}
#modelshade{width:100%; height:100%; background:#000; display:none; position:absolute; top:0px; z-index:0;}

一:创建和调用模式窗口
复制代码 代码如下:


注册





用户名:

密 码:






1.创建一个jQuery语句,选择具有一类模式的描记标记
复制代码 代码如下:

<script> <BR>$('document').ready(function(){ <BR><!-- 注册model start--> <BR>$('a.model').click(function(){ <BR></script>

2.使用下面的函数,将当前项目中的变量存储为rel属性的值
复制代码 代码如下:

var modelID = $(this).attr('rel');

3.设置模式窗口的效果,并添加关闭窗口的图片链接
复制代码 代码如下:

$('#'+modelID).fadeIn(2000).prepend('close');
$('.close_button').css({'margin-left':'535px','margin-top':'0px'});

二:创建阴影背景
复制代码 代码如下:

$('#modelshade').css('opacity','0.8').fadeIn(2000);

三:关闭模式窗口
复制代码 代码如下:

$('a.close,#modelshade').click(function(){
var thismodelID= $('a.close').parent().attr('id');
$('#modelshade,#'+thismodelID).fadeOut(function(){
$('a.close,#modelshade').remove();
});
return false;
});

关闭点击功能的失败连接,该方法将保持连接并尝试载入另一个页面到浏览器
复制代码 代码如下:

return false;

});


lt;/script>
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
2 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

足球导航语音包在哪个导航软件 足球导航语音包在哪个导航软件 Nov 09, 2022 pm 04:33 PM

足球导航语音包在“高德导航”软件中,是高德地图车机版导航语音包的其中一种,内容为黄健翔足球解说版本的导航语音。设置方法:1、打开高德地图软件;2、点击进入“更多工具”-“导航语音”选项;3、找到“黄健翔热血语音”,点击“下载”;4、在弹出的页面,点击“使用语音”即可。

导航地图上横着的8字是什么 导航地图上横着的8字是什么 Jun 27, 2023 am 11:43 AM

导航地图上横着的8字是霾,中度是黄色8预警信号,重度是橙色8预警信号。

百度地图 App 最新版本 18.8.0 发布,首次引入红绿灯雷达功能,并新增实时停车推荐功能 百度地图 App 最新版本 18.8.0 发布,首次引入红绿灯雷达功能,并新增实时停车推荐功能 Aug 06, 2023 pm 06:05 PM

百度地图App安卓版/iOS版均已发布18.8.0版本,首次引入红绿灯雷达功能,业内领先据官方介绍,开启红绿灯雷达后,支持开车自动探测红绿灯,不用输入目的地,北斗高精可以实时定位,全国100万+红绿灯自动触发绿波提醒。除此之外,新功能还提供全程静音导航,使图区更简洁,关键信息一目了然,且无语音播报,使驾驶员更加专注驾驶百度地图于2020年10月上线红绿灯倒计时功能,支持实时读秒预判,导航会在接近红绿灯路口时,自动展示倒计时剩余秒数,让用户时刻掌握前方路况。截至2022年12月31日,红绿灯倒计时

高德地图推出升级版驾车 ETA 服务:实时解析当前路况,预估到达时间更精准 高德地图推出升级版驾车 ETA 服务:实时解析当前路况,预估到达时间更精准 Apr 30, 2024 am 08:37 AM

本站4月29日消息,高德地图官宣推出升级版的驾车ETA(本站注:ETA即预估到达时间,指的是用户在当前时刻出发按照给定路线前往目的地预计需要的时长)服务,该服务旨在帮助用户的路线规划时长和路况预估更为精准,辅助用户进行出行决策。该地图应用是最新升级的高德地图App,引入了“超大规模图卷积神经网络模型”,该模型可以更好地捕捉和学习交通流动规律,支持城市道路网络、高速公路系统,能以高精度刻画交通状况的时空动态变化。在此外,全新版本的地图还进一步融合了iTransformer时序预测模型,支持实时解析

uniapp中如何实现页面跳转和导航 uniapp中如何实现页面跳转和导航 Oct 20, 2023 pm 02:07 PM

uniapp中如何实现页面跳转和导航uniapp是一款支持一次编码多端发布的前端框架,它基于Vue.js,开发者可以使用uniapp快速开发移动端应用。在uniapp中,实现页面跳转和导航是非常常见的需求。本文将介绍uniapp中如何实现页面跳转和导航,并提供具体的代码示例。一、页面跳转使用uniapp提供的方法进行页面跳转uniapp提供了一组方法用于实现

如何通过Vue实现图片的浏览和缩略图导航? 如何通过Vue实现图片的浏览和缩略图导航? Aug 18, 2023 pm 02:51 PM

如何通过Vue实现图片的浏览和缩略图导航?随着Web应用程序的发展,图片在我们的日常生活中扮演着越来越重要的角色。在许多情况下,我们需要实现图片的浏览和缩略图导航功能。这篇文章将介绍如何利用Vue框架实现这一功能,并提供代码示例。在Vue中,我们可以使用Vue插件来实现图片的浏览和缩略图导航功能。一个流行的插件是vue-gallery,它提供了简单易用的接口

使用PHP和XML实现网页的导航和菜单 使用PHP和XML实现网页的导航和菜单 Aug 07, 2023 am 11:34 AM

使用PHP和XML实现网页的导航和菜单导航和菜单是网页中常见的元素,它们可以使用户快速地找到所需的信息或功能。在网页开发中,PHP和XML经常被用来处理和存储导航和菜单的数据。本文将介绍如何使用PHP和XML实现网页导航和菜单,并提供相关的代码示例。一、创建XML菜单数据文件首先,我们需要创建一个XML文件来存储我们的菜单数据。以下是一个示例的XML文件,它

百度地图导航屏幕常亮怎么设置 百度地图导航屏幕常亮怎么设置 Apr 01, 2024 pm 06:22 PM

百度地图是很多小伙伴们外出都会使用的,可以提供最快捷的路线,而且还可以查看各种不同的出行方式,想要来设置导航屏幕常量的话,就来PHP中文网看小编带来的方法吧。百度地图设置导航屏幕常亮方法分享1.首先点击打开手机中的百度地图APP进入后,在页面的左上方位置点击【个人头像】打开。2.来到个人中心页面后,在其中找到【设置】功能,并在上面点击进入。3.接下来在设置页面里点击【通用设置】这一项进入。4.在通用设置页面里有一个【屏幕常亮】功能,在它的后面显示有一个开关按钮,点击圆形的滑块把按钮设置为开启状态

See all articles