无缝滚动

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Insert title here</title>
  6. <style type="text/css">
  7. #content{overflow:hidden;margin:20px auto;position:relative;width:800px;height:240px;border:5px solid red;}
  8. #dong{position:absolute;height:240px;width:4400px;}
  9. #dong img{display:block;float:left;}
  10. </style>
  11. <script type="text/javascript" src="../js/jquery.js"></script>
  12. <script type="text/javascript">
  13. var t;
  14. function d(){
  15.     L=parseInt($("#dong").css("left"))-1;
  16.     if(L<=-2200){
  17.         L=0;
  18.     }
  19.     $("#dong").css('left',L+"px");
  20. }
  21. $().ready(function(){
  22.     var content=$("#dong").html();
  23.     $("#dong").html(content+content);
  24.     t=setInterval(d,10)
  25.     $("#content").mouseenter(function(){
  26.         clearInterval(t);
  27.     });
  28.     $("#content").mouseleave(function(){
  29.         t=setInterval(d,10);
  30.     })
  31. })
  32. </script>
  33. </head>
  34. <body>
  35. <div id="content">
  36.     <div id="dong" style="left:0;top:0;">
  37.         <img src="../images/a.jpg"/>
  38.         <img src="../images/b.jpg"/>
  39.         <img src="../images/c.jpg"/>
  40.         <img src="../images/d.jpg"/>
  41.     </div>
  42. </div>
  43. </body>
  44. </html>

选项卡

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Insert title here</title>
  6. <style type="text/css">
  7. #content{width:400px;border:0px solid red;margin:50px auto;}
  8. #nav{padding:0;margin:0;background:#e2e2e2;height:28px;}
  9. #nav li{text-align:center;list-style:none;float:left;width:70px;height:28px;line-height:28px;}
  10. </style>
  11. <script type="text/javascript" src="../js/jquery.js"></script>
  12. <script type="text/javascript">
  13. function showDiv(num,allNum){
  14.     for(var i=1;i<=allNum;i++){
  15.         if(i==num){
  16.             $("#div"+i).show();
  17.  
  18.             $("#li"+i).css("border-top","3px solid orange");
  19.             $("#li"+i).css("background","white");
  20.             $("#li"+i).css("border-right","1px solid orange");
  21.             $("#li"+i).css("border-left","1px solid orange");
  22.             $("#li"+i).css("border-bottom","0");
  23.             $("#li"+i).css("line-height","23px");
  24.             $("#li"+i).css("height","25px");
  25.         }else{
  26.             $("#div"+i).hide();
  27.             //恢复为默认状态
  28.             $("#li"+i).css("border","0");
  29.             $("#li"+i).css("line-height","28px");
  30.             $("#li"+i).css("height","28px");
  31.             $("#li"+i).css("background",'#e2e2e2');
  32.         }
  33.     }
  34. }
  35. </script>
  36. </head>
  37. <body>
  38. <div id="content">
  39. <ul id="nav">
  40.     <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>
  41.     <li id="li2" onmouseover="showDiv(2,4)">国际</li>
  42.     <li id="li3" onmouseover="showDiv(3,4)">体育</li>
  43.     <li id="li4" onmouseover="showDiv(4,4)">娱乐</li>
  44. </ul>
  45. <div id="div1">
  46.     <ul>
  47.         <li>[国内]<a href="#">文章标题</a></li>
  48.         <li>[国内]<a href="#">文章标题</a></li>
  49.         <li>[国内]<a href="#">文章标题</a></li>
  50.         <li>[国内]<a href="#">文章标题</a></li>
  51.         <li>[国内]<a href="#">文章标题</a></li>
  52.         <li>[国内]<a href="#">文章标题</a></li>
  53.         <li>[国内]<a href="#">文章标题</a></li>
  54.         <li>[国内]<a href="#">文章标题</a></li>
  55.     </ul>
  56. </div>
  57. <div id="div2" style="display:none;">
  58.     <ul>
  59.         <li>[国际]<a href="#">文章标题</a></li>
  60.         <li>[国际]<a href="#">文章标题</a></li>
  61.         <li>[国内]<a href="#">文章标题</a></li>
  62.         <li>[国内]<a href="#">文章标题</a></li>
  63.         <li>[国内]<a href="#">文章标题</a></li>
  64.         <li>[国内]<a href="#">文章标题</a></li>
  65.         <li>[国内]<a href="#">文章标题</a></li>
  66.         <li>[国内]<a href="#">文章标题</a></li>
  67.     </ul>
  68. </div>
  69. <div id="div3" style="display:none;">
  70.     <ul>
  71.         <li>[体育]<a href="#">文章标题</a></li>
  72.         <li>[体育]<a href="#">文章标题</a></li>
  73.         <li>[国内]<a href="#">文章标题</a></li>
  74.         <li>[国内]<a href="#">文章标题</a></li>
  75.         <li>[国内]<a href="#">文章标题</a></li>
  76.         <li>[国内]<a href="#">文章标题</a></li>
  77.         <li>[国内]<a href="#">文章标题</a></li>
  78.         <li>[国内]<a href="#">文章标题</a></li>
  79.     </ul>
  80. </div>
  81. <div id="div4" style="display:none;">
  82.     <ul>
  83.         <li>[娱乐]<a href="#">文章标题</a></li>
  84.         <li>[娱乐]<a href="#">文章标题</a></li>
  85.         <li>[国内]<a href="#">文章标题</a></li>
  86.         <li>[国内]<a href="#">文章标题</a></li>
  87.         <li>[国内]<a href="#">文章标题</a></li>
  88.         <li>[国内]<a href="#">文章标题</a></li>
  89.         <li>[国内]<a href="#">文章标题</a></li>
  90.         <li>[国内]<a href="#">文章标题</a></li>
  91.     </ul>
  92. </div>
  93. </div>
  94. </body>
  95. </html>

遮罩效果

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Insert title here</title>
  6. <style type="text/css">
  7. *{padding:0;margin:0;}
  8. .content{width:800px;height:100px;margin:0 auto;}
  9. #advL,#advR{top:0;position:absolute;border:5px solid orange;width:75px;font-size:50px;text-align:center;padding:20px 0;}
  10. #advL{left:5px;}
  11. #advR{right:5px;}
  12. #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;}
  13. #denglu{margin:100px auto;width:300px;border:3px solid purple;background:white;display:none;position:absolute;z-index:1001;}
  14. #denglu h1{font-size:14px;background:orange;height:30px;line-height:30px;}
  15. #denglu h1 b{margin-left:8px;color:white;float:left;}
  16. #denglu h1 a{float:right;margin-right:8px;}
  17. </style>
  18. <script type="text/javascript" src="../js/jquery.js"></script>
  19. <script type="text/javascript">
  20. var mX,mY,wL,wT,start=0;
  21. $().ready(function(){
  22.     //获取页面的高度
  23.     var dH=$(document).height();
  24.     $("#zhezhao").css("height",dH+"px");
  25.     //denglu的left样式属性
  26.     //得到left的值：
  27.     $("#denglu").css('left',($(document).width()-$("#denglu").outerWidth())/2);
  28.     $("#denglu").css('top',"100px");
  29.     //给h1追加一个鼠标按下的事件，记录鼠标位置及窗口位置
  30.     $("#denglu h1").mousedown(function(e){
  31.         mX=e.pageX;
  32.         mY=e.pageY;
  33.         wL=parseInt($("#denglu").css('left'));
  34.         wT=parseInt($("#denglu").css('top'));
  35.         //alert(wT);
  36.         start=1;
  37.     })
  38.     //让窗口和鼠标一起移动
  39.     $(document).mousemove(function(e){
  40.         if(start==1){
  41.         curX=e.pageX;
  42.         curY=e.pageY;
  43.         x1=curX-mX;
  44.         y1=curY-mY;
  45.         $("#denglu").css('left',wL+x1+"px");
  46.         $("#denglu").css('top',wT+y1+"px");
  47.         }
  48.     })
  49.     $(document).mouseup(function(){
  50.         start=0;
  51.     })
  52.  
  53. })
  54. function showDiv(){
  55.     $("#zhezhao").show();
  56.     $("#denglu").show();
  57. }
  58. function closeDiv(){
  59.     $("#zhezhao").hide();
  60.     $("#denglu").hide();
  61. }
  62. </script>
  63. </head>
  64. <body>
  65. <div class="content" style="height:30px;line-height:30px;"><a href="javascript:showDiv();">登录</a></div>
  66. <div id="zhezhao"></div>
  67. <div id="denglu">
  68.     <h1><b>登录</b><a href="javascript:closeDiv()">关闭</a></h1>
  69.     <table>
  70.     <tr height="30">
  71.         <td>用户名：</td>
  72.         <td><input type="text" name="username"/></td>
  73.     </tr>
  74.     <tr height="30">
  75.         <td>密码：</td>
  76.         <td><input type="password" name="pw"/></td>
  77.     </tr>
  78.     <tr height="30">
  79.         <td colspan="2"><input type="button" value="登录"/></td>
  80.     </tr>
  81.     </table>
  82. </div>
  83. <div id="advL">天<br/>王<br/>盖<br/>地<br/>虎</div>
  84. <div id="advR">小<br/>鸡<br/>炖<br/>蘑<br/>菇</div>
  85. <div class="content" style="background:#ccc;"></div>
  86. <div class="content" style="background:#abc;"></div>
  87. <div class="content" style="background:#ccc;"></div>
  88. <div class="content" style="background:#abc;"></div>
  89. <div class="content" style="background:#ccc;"></div>
  90. <div class="content" style="background:#abc;"></div>
  91. <div class="content" style="background:#ccc;"></div>
  92. <div class="content" style="background:#abc;"></div>
  93. <div class="content" style="background:#ccc;"></div>
  94. <div class="content" style="background:#abc;"></div>
  95. <div class="content" style="background:#ccc;"></div>
  96. <div class="content" style="background:#abc;"></div>
  97. <div class="content" style="background:#ccc;"></div>
  98. <div class="content" style="background:#abc;"></div>
  99. <div class="content" style="background:#ccc;"></div>
  100. <div class="content" style="background:#abc;"></div>
  101. <div class="content" style="background:#ccc;"></div>
  102. <div class="content" style="background:#abc;"></div>
  103. <div class="content" style="background:#ccc;"></div>
  104. <div class="content" style="background:#abc;"></div>
  105. <div class="content" style="background:#ccc;"></div>
  106. <div class="content" style="background:#abc;"></div>
  107. <div class="content" style="background:#ccc;"></div>
  108. <div class="content" style="background:#abc;"></div>
  109. </body>
  110. </html>

jqery基础知识实例(二)的更多相关文章

  1. Java JDBC的基础知识（二）

    在我的上一篇Java JDBC的基础知识(一)中,最后演示的代码在关闭资源的时候,仅仅用了try/catch语句,这里是有很大的隐患的.在程序创建连接之后,如果不进行关闭,会消耗更多的资源.创建连接之 ...

  2. LeetCode刷题191130 --基础知识篇 二叉搜索树

    休息了两天,状态恢复了一下,补充点基础知识. 二叉搜索树 搜索树数据结构支持许多动态集合操作,包括Search,minimum,maximum,predecessor(前驱),successor(后继 ...

  3. Ajax基础知识（二）

    接上一篇  Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...

  4. HTTP基础知识（二）

    接着上一章的内容:HTTP基础知识(一)   二.简单的HTTP协议 1.客户端:请求访问文本或图像等资源的一端称为客户端: 服务器端:提供资源响应的一端   2.以百度为例子 这是请求头: 在起始行 ...

  5. ASP.NET Core 2.2 基础知识(十二) 发送 HTTP 请求

    可以注册 IHttpClientFactory 并将其用于配置和创建应用中的 HttpClient 实例. 这能带来以下好处: 提供一个中心位置,用于命名和配置逻辑 HttpClient 实例. 例如 ...

  6. XML的相关基础知识分享(二)

    前面我们讲了一下XML相关的基础知识(一),下面我们在加深一下,看一下XML高级方面. 一.命名空间 1.命名冲突 XML命名空间提供避免元素冲突的方法. 命名冲突:在XML中,元素名称是由开发者定义 ...

  7. python爬虫之Beautiful Soup基础知识+实例

    python爬虫之Beautiful Soup基础知识 Beautiful Soup是一个可以从HTML或XML文件中提取数据的python库.它能通过你喜欢的转换器实现惯用的文档导航,查找,修改文档 ...

  8. python基础知识（二）

    以下内容,作为python基础知识的补充,主要涉及基础数据类型的创建及特性,以及新数据类型Bytes类型的引入介绍

  9. Android中的一些基础知识（二）

    这几天在回顾Android的基础知识,就把一些常见的知识点整理一下,以后忘了也可以翻出来看一看. 简单介绍一下Activity的生命周期 在API文档中对生命周期回调的函数描述的很详细,这里我只是翻译 ...

随机推荐

  1. 【leetcode】988. Smallest String Starting From Leaf

    题目如下: Given the root of a binary tree, each node has a value from 0 to 25representing the letters 'a ...

  2. leetcode-165周赛-1275-找出井字棋的获胜者

    题目描述: 自己的提交: class Solution: def tictactoe(self, moves: List[List[int]]) -> str: p = [[0] * 3 for ...

  3. cocos2D-X 屏幕适配

    { //https://v.youku.com/v_show/id_XNTIzOTM1MDYw.html }

  4. SQL Wildcards 通配符

    SQL Wildcards通配符 通配符用于替换字符串中的任何其他字符. 通配符与SQL LIKE运算符一起使用.在WHERE子句中使用LIKE运算符来搜索列中的指定模式. 有两个通配符与LIKE运算 ...

  5. 饿了么监控系统 EMonitor 与美团点评 CAT 的对比

    背景介绍 饿了么监控系统EMonitor:是一款服务于饿了么所有技术部门的一站式监控系统,覆盖了系统监控.容器监控.网络监控.中间件监控.业务监控.接入层监控以及前端监控的数据存储与查询.每日处理总数 ...

  6. Ceph BlueStore与FileStore：利用Micron NVMe SSD进行性能比较

    https://www.micron.com/about/blog/2018/may/ceph-bluestore-vs-filestoreblock-performance-comparison-w ...

  7. mysql数据库帐号权限设置

    1.创建帐号 2.给帐号赋权限(xinjinlong帐号只有查看sakila表的权限) 3.更改密码 4.取消授权 revoke all on *.* from sss@localhost ;

  8. C# 语法特性

    C# 2.0 1.泛型(Generics). 2.泛型方法.泛型委托.泛型接口. 3.泛型约束(constraints). 4.部分类(partial). 5.匿名方法. C#3.0/C#3.5 1. ...

  9. NIO浅析(二)

    一:前言 在(一中了解了NIO中的缓冲区和通道),通过本文章你会了解阻塞和非阻塞,选择器,管道 二:完成NIO通信的三要素 * 1.通道(Channel):负责连接* java.nio.channel ...

  10. python学习笔记：sys、os模块

    os模块:负责程序与操作系统的交互,提供了访问操作系统底层的接口; sys模块:负责程序与python解释器的交互,提供了一系列的函数和变量,用于操控python的运行时环境. --os 常用方法-- ...