滚动双联广告

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="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:
查看全文

相关阅读:
硕士时代的数学知识点小节
 电子科技大学易查分网站爬虫批量爬取成绩
 使用SKlearn(Sci-Kit Learn)进行SVR模型学习
 使用经验风险最小化ERM方法来估计模型误差开坑
 二分图最大匹配模版 m√(n) 复杂度
 支持向量机SVM 初识
 K-means + PCA + T-SNE 实现高维数据的聚类与可视化
 Bin Packing 装箱问题——NPH问题的暴力枚举状压DP
CDQ分治_占坑
 Logistic回归逻辑回归练习——以2018建模校赛为数据源

原文地址：https://www.cnblogs.com/jikey/p/2841401.html

滚动双联广告

Form: