jQuery实例-简单选项卡-【一些常见方法(2)-练习】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../jq-practice/jq/jquery-2.2.1.min.js"></script>
<script>
$(function(){
$('.input1').click(function(){
var oLogin=$('<div class="login"> <p>用户名:<input type="text" /></p> <p>密码:<input type="text" /></p> <div class="closeIcon">X</div> </div>');
$('body').append(oLogin);
oLogin.css('left',($(window).width()-oLogin.width())/);
oLogin.css('top',($(window).height()-oLogin.height())/); $(window).on('resize scroll',function(){
oLogin.css('left',($(window).width()-oLogin.width())/);
oLogin.css('top',($(window).height()-oLogin.height())/ + $(window).scrollTop());
})
$('.closeIcon').click(function(){
oLogin.remove();
})
}) })
</script>
<style>
.login{
position: absolute;
width: 300px;
height: 300px;
border: 1px solid red;
}
.closeIcon{
position: absolute;
right: 0px;
top:0px;
}
</style>
</head>
<body style="height: 2000px;">
<input type="button" value="点击" class="input1"/>
<!--<div class="login">-->
<!--<p>用户名:<input type="text" /></p>-->
<!--<p>密码:<input type="text" /></p>-->
<!--<div class="closeIcon">X</div>-->
<!--</div>--> </body>
</html>
jQuery实例-简单选项卡-【一些常见方法(2)-练习】的更多相关文章
- Jquery&JS简单选项卡
结果,如图 为了明显,用绿色+红色 第一步:静态布局 先写html代码和css样式 要点一: ul li都为块级元素,可以用height,但是里面字体不居中,我们用line-height,即达到居中 ...
- Jquery实现简单选项卡
<html> <head> <meta charset="UTF-8"> <title>选项卡</title> < ...
- jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...
- 三种动态加载js的jquery实例代码另附去除js方法
!-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...
- vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据
摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...
- vue教程2-04 vue实例简单方法
vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...
- PHP+jQuery开发简单的翻牌抽奖实例
PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: <ul ...
- jQuery实现TAB选项卡切换特效简单演示
本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...
- JQuery常见方法
<!DOCTYPE htmi> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- PHP strlen() 函数
定义和用法 strlen() 函数返回字符串的长度. 语法 strlen(string) 参数 描述 string 必需.规定要检查的字符串. 例子 <?php echo strlen(&quo ...
- Java数据抓取经验【转载】
本人担任职友集的java工程师五年,其中抓取数据占主要的一部分,抓取的信息只要有两部分,职位和简历,其中职位的抓取量为日均插入量为30万,更新量 为60万,抓取全国300多个人才网站.职友集(现在改名 ...
- Redis的Time Event与File Event的微妙关系
redis里设计了两类事件,一类是file event,一类是time event. 其中file event主要为网络事件而设计,而time event为一些后台事件设计. 在两类事件的管理设计上, ...
- Struts1中ActionForward的技巧介绍
ActionForward是做什么的?他是用来封装转发和重定向路径的. 在struts- config.xml中<forward name="error" path=&quo ...
- paip.提升性能---- 网站并发数的总结.txt
paip.提升性能---- 网站并发数的总结.txt 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.n ...
- iOS开发——网络编程OC篇&GCDAsyncSocket编程
GCDAsyncSocket编程 同上一篇文章一样,这里也是使用Socket实现一个聊天室,但是这里使用的是一个常用的框架实现的:GCDAsyncSocket 一:导入这个框架 二:声明这个Socke ...
- AIR 程序开发系列 之五 保存数据的几种方式
Local SharedObject 这种方法比较简单方便的保存少的数据到到设备中.你不用自己去管理这些数据,设备会自动管理他. SharedObject 在 flash.net 包中,继承自Even ...
- JavaScript/jQuery选择器简介
DOM提供的选择器 选择器是帮助我们选择页面元素的工具,在网站制作中常常会涉及到某个元素的改变,通过选择器提取这些元素可以很轻易的实现(DOM术语把所说的“元素”称作是“节点”).JavaScript ...
- 10 Technologies That will Shape Future Education--reference
http://dizyne.net/technologies-that-will-shape-future-education/ Technology is on the rise and with ...
- iOS 开发中你是否遇到这些经验问题(一)
前言 小伙伴们在开发中难免会遇到问题, 你是如何解决问题的?不妨也分享给大家!如果此文章其中的任何一条问题对大家有帮助,那么它的存在是有意义的! 反正不管怎样遇到问题就要去解决问题, 在解决问题的同时 ...