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文档中对生命周期回调的函数描述的很详细,这里我只是翻译 ...
随机推荐
- string.format()详解
java中: 从 Java 5.0 开始,String 类新增了一个强大的字符串格式化方法 format().这个方法到现在用的人还是不多,实在是一种浪费.本文带你快速过一遍这个方法的功能,将来你要用 ...
- Java多线程状态切换
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11426573.html 线程状态 NEW RUNNABLE BLOCKED WAITING TIMED ...
- mac 安装Navicat_Premium 破解版带汉化
因为近期要用mongodb,本想着下载一个Navicat for mongodb 但是一直没有给力带帖子,所以就靠着百度自己找,功夫不负有心人. 下面附上百度网盘,里面有一个txt文档,在安装前一定要 ...
- Ceph中PG和PGP的区别
http://www.zphj1987.com/2016/10/19/Ceph%E4%B8%ADPG%E5%92%8CPGP%E7%9A%84%E5%8C%BA%E5%88%AB/ 一.前言 首先来一 ...
- QGroundControl编译出错记录
运行时出现错误: /home/myfly2/Downloads/qgroundcontrol/QGroundControl: error : cannot open shared object fil ...
- Service系统服务(三)：查看进程信息、进程调度及终止、系统日志分析、使用systemctl工具
一.查看进程信息 目标: 本例要求掌握查看进程信息的操作,使用必要的命令工具完成下列任务: 找出进程 gdm 的 PID 编号值 列出由进程 gdm 开始的子进程树结构信息 找出进程 sshd 的父进 ...
- delphi 将Dll等生成资源文件
资源文件一般为扩展名为res的文件,其自带的资源编译工具BRCC32.EXE(位于/Delphi/BIN目录下) 1.编写rc脚本文本用记事本或其它文本编辑器编写一个扩展名为rc的文件,格式分别为在资 ...
- 在 MacBook 上安装 Ubuntu
建立ubuntu 安裝U盤,加入usb port,按住option key 開機,正常安裝. 完成後,會缺少wifi drive sudo apt-get install bcmwl-kernel-s ...
- cent OS 7 下安装 python 3.6
step1:安装依赖环境 # yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readli ...
- python locust_TaskSet声明任务的典型方法是使用task装饰器的两种方法
为TaskSet声明任务的典型方法是使用task装饰器.该min_wait和MAX_WAIT属性也可以在使用taskset类中重写. from locust import Locust, TaskSe ...