导入<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> ...

  4. jQuery的DOM操作小案例

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

  5. [jQuery学习系列六]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. Java反射详解及应用示例

    反射是Java中最重要的内容之一,了解反射原理对我们学习各种框架具有很大的帮助 反射的原理: 反射应用示例: import java.lang.reflect.Constructor; import ...

  2. PHP入门 - - 07-->HTML的表单

    一.<form>标签及其属性 <from></form>标签对用来创建一个表单,即定义表单的开始和结束位置,<form>标签具有下面等属性.       ...

  3. hdu3535 背包大杂汇

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=3535 //不想写题解,这道题让我对背包的理解更深了,我相信我不会忘记的.... 代码: # ...

  4. Mysql远程连接，并解决wordp主题添加问题

    1.增加允许远程连接 MySQL 用户并授权. 在 Linux 主机中在命令提示行下输入下面的命令. > MySQL -uroot -p 密码 2.创建远程登陆用户并授权 grant all P ...

  5. 最火的.NET开源项目

    综合类 微软企业库 微软官方出品,是为了协助开发商解决企业级应用开发过程中所面临的一系列共性的问题, 如安全(Security).日志(Logging).数据访问(Data Access).配置管理( ...

  6. linux（centos6）搭建ftp服务器

    前提 ssh服务已经开启,关闭防火墙,主机和虚拟机能ping通 查看ssh和防火墙的状态 service sshd status service iptables status 开启ssh服务 ser ...

  7. sql 循环某段时间的每一天

    create table #t1( 日期 datetime) declare @stime datetime;declare @etime datetime set @stime ='2015-01- ...

  8. PHP如何实现文件上传

    PHP如何实现文件上传 1.表单部分  允许用户上传文件,在HTML表单的声明中要加上一个上传的属性:  enctype = 'multipart/form-data'  表单的method必须是PO ...

  9. 看Ue4角色代码——跳跃与实现二段跳

    看了一下终于发现了跳跃的关键代码 bool UCharacterMovementComponent::DoJump(bool bReplayingMoves) { if ( CharacterOwne ...

  10. 安装和配置Tomcat

    今天第一个技术难题,说难也不难,被鄙视的彻彻底底. 理解上的问题纠正:Xftp里面我们看到的只是自己电脑上和所连接服务器里面的文件,集群里面有master  服务器和slaves 服务器 ,一个Nam ...