zoukankan
html css js c++ java
滚动双联广告
一个简单的效果,主要考验对queue的理解。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>test-group-following</title> <!-- // <script type="text/javascript" src="../jquery-1.8.3.min.js"></script> --> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} body{font:12px/1.5 arial;background:#fff;} img{border:none 0;} .scroll{position:absolute;left:10px;} .scroll-outer{position:relative;145px;height:300px;} .scroll-cont{position:absolute;top:0;left:0;height:280px;border:1px solid #cc0;background:#f1f1f1;} .scroll-close{position:absolute;bottom:0;right:0;display:block;text-decoration:none;} .scroll-close:hover{color:#c00;} </style> </head> <body> <div style="height:3000px;"></div> <div class="scroll"> <div class="scroll-outer"> <div class="scroll-cont"> <a href="#" target="_blank"> <img width="143" height="280" src="http://guniangwang.com/user_upload_img/713/201212/s/20121231110033.jpg" alt="" /> </a> </div> <a href="javascript:void(0)" class="scroll-close">关闭</a> </div> </div> <script type="text/javascript"> (function($){ $.fn.dual = function(options){ var defaults = { delaytime : 1000 }, opts = $.extend(defaults, options), win = $(window), right = this.clone().appendTo('body'), // clone other center = (win.height() - this.height()) / 2, ele = $('.scroll'), close = ele.find('.scroll-close'); right.css({left: 'auto', right: '10px'}); // initialize return ele.each(function(){ var that = $(this); $(this).css({top: center}); win.scroll(function(){ that.animate({top: center + win.scrollTop()}, {duration: opts.delaytime, queue: false}); }); close.click(function(){ that.hide(); }); }); } }(jQuery)); $('.scroll').dual(); // call </script> </body> </html>
运行代码
Form:
jQuery动画高级用法(上)——详解animation中的.queue()函数
jQuery中queue和dequeue的用法
jQuery的deferred对象详解
(from:
狐狸
)
jquery api queue
查看全文
相关阅读:
10465
移动Web开发图片自适应两种常见情况解决方案
[置顶] Spring的DI依赖实现分析
Android中两种设置全屏或者无标题的方法
Esper系列(十二)Variables and Constants
Esper系列(十一)NamedWindow语法Merge、Queries、Indexing、Dropping
Esper系列(十)NamedWindow语法delete、Select+Delete、Update
Esper系列(九)NamedWindow语法create、Insert、select
Esper系列(八)Method Definition、Schema
Docker系列(五)OVS+Docker网络打通示例
原文地址:https://www.cnblogs.com/jikey/p/2841401.html
最新文章
6.28 头像预览:form方法和ajax方法
6.27 流程管理
6.27 上传文件
6.25 权限管理
6.24 年月日三级联动和显示当前时间
6.24 数据库实时编辑,分页
Chapter 4: Spring and AOP:Spring's AOP Framework -- draft
python解约瑟夫环问题
Shell下日期循環
ubuntu12.04 安装R语言环境3.01
热门文章
Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock'的解决
LINUX
Java内存泄露的理解与解决
解决eclipse创建maven项目报错!Could not resolve archetype org.apache.maven.archetypes:maven-archetype-webapp
问题分析探讨 --> 大约有700W数据的表,把当天的10W数据select导入新表,整个原来的表就锁死
常见android手机分辨率
java--map容器的hashcode和equals
给定一棵二叉树,每个结点包含一个值。打印出所有满足以下条件的路径: 路径上结点的值加起来等于给定的一个值。注意:这些路径不必从根结点开始。
关于苏宁易购的好坏与网购的心酸苦逼史,有同感的请继续顶起
wpf 计算器布局练习
Copyright © 2011-2022 走看看