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文档中对生命周期回调的函数描述的很详细,这里我只是翻译 ...
随机推荐
- 【leetcode】316. Remove Duplicate Letters
题目如下: Given a string which contains only lowercase letters, remove duplicate letters so that every l ...
- sql 基础语法 alter用法和视图，透视
--查询没有被删除的学生 alter table StuInfo --修改列属性 alter column isdelete bit null alter table StuInfo --删除列 dr ...
- 探索Redis设计与实现12：浅析Redis主从复制
本文转自互联网 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial ...
- Django基础篇（一）
Python的Web框架有Django.Tornado.Flask等多种,Django相较其他web框架的优势有: 大而全.框架本身集成了ORM框架.模板绑定.缓存.Session等诸多功能. 1.安 ...
- LightOJ 1030 Discovering Gold (概率/期望DP)
题目链接:LightOJ - 1030 Description You are in a cave, a long cave! The cave can be represented by a \(1 ...
- bootstrap Grid布局（网格布局）
基本网络结构 <div class="container"> <div class="row"> <div class=" ...
- windows 安装虚拟环境
步骤一:安装virtualenv 在windows cmd终端下使用输入:pip install virtualenv 步骤二:新建虚拟环境 在cmd终端输入virtualenv testvir(环境 ...
- 第六周实验总结&学习总结
一.实验目的 (1)掌握类的继承方法 (2)变量的继承和覆盖,方法的继承,重载和覆盖实现 二.实验内容 源代码 package java2; import java.util.Scanner; cla ...
- php的闭包函数use的使用
PHP在默认情况下,匿名函数不能调用所在代码块的上下文变量,而需要通过使用use关键字. function getMoney() { $rmb = 1; $dollar = 6; $fun ...
- HBase版本进化史及大版本特性
HBase 2.0 新特性介绍 2018年4月30日HBase发布了2.0的Release版本.HBase的2.0版本承载了太多的Features,共包含4551个Issues,可以说是迄今最大的一个 ...