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文档中对生命周期回调的函数描述的很详细,这里我只是翻译 ...
随机推荐
- Edge Computer：Vision and Challenges
Abstract 随着物联网(Internet of Things)的蓬勃发展和云服务(cloud services)的成功,出现一种新的计算模式:edge computer.用于边缘网络数据的处理, ...
- 手机app安装包apk/ipa放到网上无法下载原因及教程
做好APP后,APP名为app.apk或app.ipa 上传到根目录后,生成二维码 但还是无法下载,哪按以下教程让服务器apache/iis/nginx支持.apk/ipa文件下载 windows i ...
- 模板引擎的简单原理template
var templateStr = "我的名字叫<%=name%>我是一只小狗,今年<%=age%>岁."; var data = { name:'旺财 ...
- java 并发——ReentrantLock
java 并发--ReentrantLock 简介 public class ReentrantLock implements Lock, java.io.Serializable { // 继承了 ...
- Cocos2d-x之引擎框架简介
| 版权声明:本文为博主原创文章,未经博主允许不得转载. 1.cocos2d-x的设计思想 cocos2d-x分为导演,场景,图层,精灵,节点: (1).导演(Director):控制整个游戏的场 ...
- UML指南系列——用例图
可以用用例来描述正在开发的系统想要实现的行为,而不必说明这些行为如何实现. 结构良好的用例只表示系统或者子系统的基本行为,而且既不过于笼统也不过于详细.
- JPA 继承关系实现的三种方式
single table 一张表保存所有类型 join 扩展属性保存在子表中 TABLE_PER_CLASS 每个类型一张表
- linux Jenkins搭建
安装jdk 下载jdk 解压 jdk1.8 vim /etc/profile export JAVA_HOME=/usr/local/java/jdk1.8.0_111export CLASSPA ...
- redis 学习入门篇
基本概念 redis是一个开源的.使用C语言编写的.支持网络交互的.可基于内存也可持久化的Key-Value数据库(非关系性数据库). redis的特点 速度快,因为数据存在内存中,读写数据的时候都不 ...
- Optional int parameter 'pId' is present but cannot be translated into a null value due to being declared as a primitive type.
接口测试的时候遇到了一个问题,导致测试阻断了好久,在此记录,谨防忘记. 具体报错如下: Optional int parameter 'pId' is present but cannot be tr ...