导入<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. ASP.NET 4.0 取消表单危险字符验证

    /// <summary> /// ASP.NET4.0 表单验证类 /// </summary> public class FormRequestValidation : R ...

  2. javascript概述

    在我们进行javascript视频的时候,第一集,看到的学习要点: 1.什么是javascript?         a.一种具有面向对象能力的.解释型的程序设计语言(直接读取运行,而非编译型)   ...

  3. 【转】html、css、js文件加载顺序及执行情况

    原链接:http://www.cnblogs.com/Walker-lyl/p/5262075.html 今天看书,看到html,css,js加载执行情况,发现自己并不是真正的了解,网上搜了半小时依然 ...

  4. Html 块级元素和行级元素

    转载:http://blog.csdn.net/yuyanqiao/article/details/8558118 内联元素(inline element)* a - 锚点* abbr - 缩写* a ...

  5. iOS10 UI教程视图和子视图的可见性

    iOS10 UI教程视图和子视图的可见性 iOS10 UI教程视图和子视图的可见性,一个父视图可以通过clipsToBounds属性,定义子视图在边界(边界就是父视图的框架也就是父视图可以显示的范围) ...

  6. canvas 3D运动球效果 多球

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. PLSQL看oracle中汉字显示乱码

    首先执行语句 select * from V$NLS_PARAMETERS  查看第一行中PARAMETER项中为NLS_LANGUAGE 对应的VALUE项中是否为SIMPLIFIED CHINES ...

  8. BestCoder#16 A-Revenge of Segment Tree

    Revenge of Segment Tree Problem Description In computer science, a segment tree is a tree data struc ...

  9. -bash: /bin/rm: Argument list too long的解决办法

    当目录下文件太多时,用rm删除文件会报错: -bash: /bin/rm: Argument list too long 提示文件数目太多. 解决的办法是使用如下命令: rm -fr ls 输出所有的 ...

  10. ccc 多点触控

    研究了一天,多点触控的点无法保存,只能模拟多点触控了 cc.Class({ extends: cc.Component, properties: { wheelStick:{ default:null ...