jqery基础知识实例(二)
无缝滚动
<!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" />
<title>Insert title here</title>
<style type="text/css">
#content{overflow:hidden;margin:20px auto;position:relative;width:800px;height:240px;border:5px solid red;}
#dong{position:absolute;height:240px;width:4400px;}
#dong img{display:block;float:left;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
var t;
function d(){
L=parseInt($("#dong").css("left"))-1;
if(L<=-2200){
L=0;
}
$("#dong").css('left',L+"px");
}
$().ready(function(){
var content=$("#dong").html();
$("#dong").html(content+content);
t=setInterval(d,10)
$("#content").mouseenter(function(){
clearInterval(t);
});
$("#content").mouseleave(function(){
t=setInterval(d,10);
})
})
</script>
</head>
<body>
<div id="content">
<div id="dong" style="left:0;top:0;">
<img src="../images/a.jpg"/>
<img src="../images/b.jpg"/>
<img src="../images/c.jpg"/>
<img src="../images/d.jpg"/>
</div>
</div>
</body>
</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" />
<title>Insert title here</title>
<style type="text/css">
#content{width:400px;border:0px solid red;margin:50px auto;}
#nav{padding:0;margin:0;background:#e2e2e2;height:28px;}
#nav li{text-align:center;list-style:none;float:left;width:70px;height:28px;line-height:28px;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
function showDiv(num,allNum){
for(var i=1;i<=allNum;i++){
if(i==num){
$("#div"+i).show(); $("#li"+i).css("border-top","3px solid orange");
$("#li"+i).css("background","white");
$("#li"+i).css("border-right","1px solid orange");
$("#li"+i).css("border-left","1px solid orange");
$("#li"+i).css("border-bottom","0");
$("#li"+i).css("line-height","23px");
$("#li"+i).css("height","25px");
}else{
$("#div"+i).hide();
//恢复为默认状态
$("#li"+i).css("border","0");
$("#li"+i).css("line-height","28px");
$("#li"+i).css("height","28px");
$("#li"+i).css("background",'#e2e2e2');
}
}
}
</script>
</head>
<body>
<div id="content">
<ul id="nav">
<li id="li1" onmouseover="showDiv(1,4)" style="border-top:3px solid orange;background:white;border-right:1px solid orange;border-left:1px solid orange;border-bottom:0;line-height:23px;height:25px;">国内</li>
<li id="li2" onmouseover="showDiv(2,4)">国际</li>
<li id="li3" onmouseover="showDiv(3,4)">体育</li>
<li id="li4" onmouseover="showDiv(4,4)">娱乐</li>
</ul>
<div id="div1">
<ul>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
</ul>
</div>
<div id="div2" style="display:none;">
<ul>
<li>[国际]<a href="#">文章标题</a></li>
<li>[国际]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
</ul>
</div>
<div id="div3" style="display:none;">
<ul>
<li>[体育]<a href="#">文章标题</a></li>
<li>[体育]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
</ul>
</div>
<div id="div4" style="display:none;">
<ul>
<li>[娱乐]<a href="#">文章标题</a></li>
<li>[娱乐]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
<li>[国内]<a href="#">文章标题</a></li>
</ul>
</div>
</div>
</body>
</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" />
<title>Insert title here</title>
<style type="text/css">
*{padding:0;margin:0;}
.content{width:800px;height:100px;margin:0 auto;}
#advL,#advR{top:0;position:absolute;border:5px solid orange;width:75px;font-size:50px;text-align:center;padding:20px 0;}
#advL{left:5px;}
#advR{right:5px;}
#zhezhao{display:none;opacity:0.5;filter:alpha(opacity=50);width:100%;height:100%;left:0;top:0;position:absolute;z-index:1000;background:#ccc;}
#denglu{margin:100px auto;width:300px;border:3px solid purple;background:white;display:none;position:absolute;z-index:1001;}
#denglu h1{font-size:14px;background:orange;height:30px;line-height:30px;}
#denglu h1 b{margin-left:8px;color:white;float:left;}
#denglu h1 a{float:right;margin-right:8px;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
var mX,mY,wL,wT,start=0;
$().ready(function(){
//获取页面的高度
var dH=$(document).height();
$("#zhezhao").css("height",dH+"px");
//denglu的left样式属性
//得到left的值：
$("#denglu").css('left',($(document).width()-$("#denglu").outerWidth())/2);
$("#denglu").css('top',"100px");
//给h1追加一个鼠标按下的事件，记录鼠标位置及窗口位置
$("#denglu h1").mousedown(function(e){
mX=e.pageX;
mY=e.pageY;
wL=parseInt($("#denglu").css('left'));
wT=parseInt($("#denglu").css('top'));
//alert(wT);
start=1;
})
//让窗口和鼠标一起移动
$(document).mousemove(function(e){
if(start==1){
curX=e.pageX;
curY=e.pageY;
x1=curX-mX;
y1=curY-mY;
$("#denglu").css('left',wL+x1+"px");
$("#denglu").css('top',wT+y1+"px");
}
})
$(document).mouseup(function(){
start=0;
}) })
function showDiv(){
$("#zhezhao").show();
$("#denglu").show();
}
function closeDiv(){
$("#zhezhao").hide();
$("#denglu").hide();
}
</script>
</head>
<body>
<div class="content" style="height:30px;line-height:30px;"><a href="javascript:showDiv();">登录</a></div>
<div id="zhezhao"></div>
<div id="denglu">
<h1><b>登录</b><a href="javascript:closeDiv()">关闭</a></h1>
<table>
<tr height="30">
<td>用户名：</td>
<td><input type="text" name="username"/></td>
</tr>
<tr height="30">
<td>密码：</td>
<td><input type="password" name="pw"/></td>
</tr>
<tr height="30">
<td colspan="2"><input type="button" value="登录"/></td>
</tr>
</table>
</div>
<div id="advL">天<br/>王<br/>盖<br/>地<br/>虎</div>
<div id="advR">小<br/>鸡<br/>炖<br/>蘑<br/>菇</div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
<div class="content" style="background:#ccc;"></div>
<div class="content" style="background:#abc;"></div>
</body>
</html>
jqery基础知识实例(二)的更多相关文章
- Java JDBC的基础知识（二）
在我的上一篇Java JDBC的基础知识(一)中,最后演示的代码在关闭资源的时候,仅仅用了try/catch语句,这里是有很大的隐患的.在程序创建连接之后,如果不进行关闭,会消耗更多的资源.创建连接之 ...
- LeetCode刷题191130 --基础知识篇 二叉搜索树
休息了两天,状态恢复了一下,补充点基础知识. 二叉搜索树 搜索树数据结构支持许多动态集合操作,包括Search,minimum,maximum,predecessor(前驱),successor(后继 ...
- Ajax基础知识（二）
接上一篇 Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...
- HTTP基础知识（二）
接着上一章的内容:HTTP基础知识(一) 二.简单的HTTP协议 1.客户端:请求访问文本或图像等资源的一端称为客户端: 服务器端:提供资源响应的一端 2.以百度为例子 这是请求头: 在起始行 ...
- ASP.NET Core 2.2 基础知识(十二) 发送 HTTP 请求
可以注册 IHttpClientFactory 并将其用于配置和创建应用中的 HttpClient 实例. 这能带来以下好处: 提供一个中心位置,用于命名和配置逻辑 HttpClient 实例. 例如 ...
- XML的相关基础知识分享(二)
前面我们讲了一下XML相关的基础知识(一),下面我们在加深一下,看一下XML高级方面. 一.命名空间 1.命名冲突 XML命名空间提供避免元素冲突的方法. 命名冲突:在XML中,元素名称是由开发者定义 ...
- python爬虫之Beautiful Soup基础知识+实例
python爬虫之Beautiful Soup基础知识 Beautiful Soup是一个可以从HTML或XML文件中提取数据的python库.它能通过你喜欢的转换器实现惯用的文档导航,查找,修改文档 ...
- python基础知识（二）
以下内容,作为python基础知识的补充,主要涉及基础数据类型的创建及特性,以及新数据类型Bytes类型的引入介绍
- Android中的一些基础知识（二）
这几天在回顾Android的基础知识,就把一些常见的知识点整理一下,以后忘了也可以翻出来看一看. 简单介绍一下Activity的生命周期 在API文档中对生命周期回调的函数描述的很详细,这里我只是翻译 ...
随机推荐
- Nacos 常见问题及解决方法
Nacos 开源至今已有一年,在这一年里,得到了很多用户的支持和反馈.在与社区的交流中,我们发现有一些问题出现的频率比较高,为了能够让用户更快的解决问题,我们总结了这篇常见问题及解决方法,这篇文章后续 ...
- apue 第10章 信号signal
每种信号都有名字,都是以SIG开头 信号机制最简单的接口是signal函数 #include <signal.h> typedef void (*sighandler_t)(int); s ...
- subsequence 1
题目链接 题意:给你两个字符串都是数字,让你求第一个字符串的子序列中大于第二个字符串的个数. 思路:dp[i][j] 表示 str1的前i个,匹配 str2的前 j 个的种类数,那么 if(s[i] ...
- JS-监听整个页面上的DOM树变化
# [在线预览](https://jsfiddle.net/1010543618/fyf913t0/) ## 方法 - 使用<Web API 接口>的<MutationObserve ...
- 用 Flask 来写个轻博客 (13) — M(V)C_WTForms 服务端表单检验
目录 目录 前文列表 WTForms WTF 的基础使用 常用的字段类型 fieldsDateField fieldsIntegerField fieldsFloatField fieldsStrin ...
- 使用python实现希尔、计数、基数排序
希尔排序 希尔排序是一个叫希尔的数学家提出的一种优化版本的插入排序. 首先取一个整数d1=n//2,将元素分为d1个组,每组相邻元素之间的距离为d1,在各组内进行直接插入排序. 取第二个整数d2=d1 ...
- 11.Jmeter 快速入门教程 -- jmeter事务控制器
你肯定知道, jmeter是一个跨系统平台的性能测试工具, 比如他可以在linux,freebsd,windows,solaris 等等各种系统上可以运行. 我可以说, 事务 transaction ...
- 转 MySQL乐观锁和悲观锁
悲观锁(Pessimistic Lock) 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁.传统的关系型数据库 ...
- Redis源码编译安装
介绍 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统.Redis是一个开源的使用ANSI C语言编写.遵 ...
- python调用tushare获取沪深A股票资金流向数据
接口:moneyflow 描述:获取沪深A股票资金流向数据,分析大单小单成交情况,用于判别资金动向 限量:单次最大提取4000行记录,总量不限制 积分:用户需要至少1500积分才可以调取,基础积分有流 ...