Jquery广告浮动效果小案例

时间：2022-09-01 14:23:02

导入<script src="<%=path%>/html5/js/jquery.js"></script>文件

<SCRIPT type="text/javascript">

$(document).ready(function(){
　　var menuYloc = $("#DIVFLOAT").offset().top;
　　$(window).scroll(function (){
　　var offsetTop = menuYloc + $(window).scrollTop() +"px";
　　$("#DIVFLOAT").animate({top : offsetTop },{ duration:100 , queue:false });
　　});
});

</SCRIPT>

<body>                                   <!--与top的距离-->
<div style="POSITION: absolute; top:50px ; left: 100px;background-color: white; width: 50px;padding-left: 60px" id="DIVFLOAT">
<table>

<c:forEach begin="1" end="4" step="1" var="i" >
<tr>
<td>DIV广告浮动效果</td>
<td>&nbsp;&nbsp;</td>
</tr>

</c:forEach>
</table>
</div>

<div style="float:left; top:40px;left:30px;background-color:white;width:100px;">
<c:forEach begin="1" end="200" step="1" var="i" varStatus="r" >
<table>
<tr>
<td>左边参照${i }==${r.index }==${r.count }</td>
</tr>
</table>
</c:forEach>
</div>
</body>

Jquery广告浮动效果小案例的更多相关文章

  1. Javascript 广告浮动效果在浏览器中间N秒后移动到右下角

    Javascript 广告浮动效果在浏览器中间N秒后移动到右下角 闲着无聊做了一个,本人原创...就是这个页面的广告效果....怎么样???? 刚刚学习的javascript

  2. 慕课网4-2 编程练习：jQuery祖先后代选择器小案例

    4-2 编程练习 结合所学的祖先后代选择器,实现如下图所示效果 任务 (1)使用祖先后代选择器将第二段文字背景色变成红色 (2)使用jQuery的.css()方法设置样式,语法css('属性 '属性值 ...

  3. JS--中奖广告浮动效果

    618要到了.要帮公司做一个简单的中奖号码的浮动.怎么玩了.其实只需要使用scrollHeight;scrollTop;offsetHeight这三个就可以实现了. 代码如下: <html&gt ...

  4. jQuery的DOM操作小案例

    案例一:下拉列表左右选择 <body> <div> <select style="width:60px" multiple size="10 ...

  5. &lbrack;jQuery学习系列六&rsqb;6-jQuery实际操作小案例

    前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...

  6. jquery mobile小案例

    ---恢复内容开始--- [jquery mobile小案例]效果图如下: 首先先创建一个页面主要使用data-role="page"这个指令,我们给它起个id="pag ...

  7. VUE小案例--跑马灯效果

    自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...

  8. 非常强大的jQuery万能浮动框插件

    支持hover, click, focus以及无事件触发:支持多达12种位置的定位,出界自动调整:支持页面元素加载,Ajax加载,下拉列表,提示层效果,tip类效果等:可自定义装载容器:内置UI不错的 ...

  9. jQuery实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

随机推荐

  1. IE7浏览器窗口大小改变事件执行多次bug（转）

    var resizeTimer = null; $(window).resize(function() { if (resizeTimer) clearTimeout(resizeTimer); re ...

  2. C&num; 类的介绍，参数传递，各种符号说法

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. iOS通过openURL打开原生应用与页面（包括电话，短信，safari等）

    [[UIApplication sharedApplication] openURL:url];通过给url不同的值,可以实现调用系统自带 电话/短信/邮箱/浏览器/... 1.调用 电话phone[ ...

  4. nodejs 任务调度使用

    使用的模块 node-schedule的使用 例子: 1:确定时间 var schedule = require("node-schedule");console.log(&quo ...

  5. Active Session History &lpar;ASH&rpar; Performed An Emergency Flush Messages In The Alert Log

    Active Session History (ASH) Performed An Emergency Flush Messages In The Alert Log (文档 ID 1385872.1 ...

  6. Nginx - Rewrite Module

    Initially, the purpose of this module (as the name suggests) is to perform URL rewriting. This mecha ...

  7. Castle Windsor 项目中快速使用

    Castle Windsor 项目中快速使用 新建项目如下: 一个模型类,一个接口,一个实现方法.我的目的很明确就是在UI层通过Castle 调用数据访问层的方法. 添加项目引用 CastleDemo ...

  8. &period;bat批处理命令的介绍

    HUC = = D组 http://www.cnhonkerarmy.com/ 63707869 =====================================开始============ ...

  9. 关于 Shell 的相关概念和配置方法，全在这儿了！

    使用Linux的过程中少不了使用各种各样的Shell, 而根据启动环境的不同,Shell会读取不同的配置文件.本文便来详细介绍这些不同名字的配置文件在何时会被Shell读取. 什么是 Shell Sh ...

  10. web&period;xml中&lt&semi;security-constraint&gt&semi;和四种认证类型

    https://blog.csdn.net/lisheng19870305/article/details/40819481 sztc开发中http请求一直发送后无响应,通过soapui定位异常信息为 ...

相关文章