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文档中对生命周期回调的函数描述的很详细,这里我只是翻译 ...
随机推荐
- Window01
1 <script src="~/jquery-easyui-1.5.5.2/jquery.min.js"></script> <link href= ...
- c++11 继承构造函数
若基类拥有数量众多的不同版本的构造函数,而派生类中只有一些成员函数,则对于派生类而言,其构造函数就等同于构造基类. struct A { A(int i) {} A(double d, int i) ...
- hdu 4826 Labyrinth（简单dp）
Description 度度熊是一只喜欢探险的熊,一次偶然落进了一个m*n矩阵的迷宫,该迷宫只能从矩阵左上角第一个方格开始走,只有走到右上角的第一个格子才算走出迷宫,每一次只能走一格,且只能向上向下向 ...
- react教程 — 开发 总结
本文章是在熟练使用 VUE 的基础上,对比VUE 功能进行的一个技术总结. 1.react项目快速搭建 https://blog.csdn.net/mapbar_front/article/deta ...
- MySQL允许远程登录配置
1.查看user表mysql> use mysqlReading table information for completion of table and column namesYou ca ...
- mybatis plus的条件构造器
我们在使用条件构造器的时候要使用QueryWrapper或者UpdateWrapper来充当条件语句来进行构造 QueryWrapper(LambdaQueryWrapper) 和 UpdateWra ...
- extract specified contents from two files.
src_dir=$(pwd)/All_h dst_dir=$(pwd)/All diff_dir=$(pwd)/diff if [ ! -d $diff_dir ] then mkdir $diff_ ...
- IO Processing
Types of IO IRP Buffer Management 首先区分一下page的内存与nonpaged的内存,内存如果用页管理,就难免面对被swap out的命运:但是如果用nonpaged ...
- 爬虫（三）—— BeautifulSoup模块获取元素
目录 BeautifulSoup 一.BeautifulSoup简介 二.安装模块 三.解析器 四.Beautiful Soup的使用 五.查找元素 1.遍历文档树 2.搜索文档树 Beautiful ...
- cmd 运行 java 文件
在安装好jdk 并配置好环境变量的情况下 原因一:没有指定class文件的路径 例如HI是变异好的class文件,并且在d:/RJAZB里面 如果写成 Java HI 则会报错 正确做法 java ...