固定任意地方的tips

最新推荐文章于 2024-09-05 23:16:39 发布
最新推荐文章于 2024-09-05 23:16:39 发布
阅读量268 收藏
点赞数
文章标签： function div xhtml html jquery null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ylrainbow/article/details/4384791
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <HEAD>
  <TITLE> New Document </TITLE>

 </HEAD>
 <script src="http://www.cssrain.cn/demo/1/SildeTab/jquery-1.2.6.pack.js" type="text/javascript"></script>
<style>
body, div{
 margin:0 auto;
 padding:0px
}
</style>
<script>
(function($){
$.fn.srcollFlow = function(opt){
  var defaults = {
  position:'',
        top: 0,
        left: 0,
  timeout:200
 };
    var opt = $.extend(defaults, opt);

 var _self = $(this);
 var timeoutHandle = null;
 function flow(){
  if(timeoutHandle != null){
   clearTimeout(timeoutHandle);
   timeoutHandle = null;
  }
  _self.hide();
  switch(opt.position){
   case 'left|top' :
    _self.css('top',$(window).scrollTop() + 'px');
    _self.css('left','0px');
    break;
   case 'right|top' :
    _self.css('top',$(window).scrollTop() + 'px');
    _self.css('left',$(window).width() - _self.outerWidth() + 'px');
    break;
   case 'left|bottom' :
    _self.css('top',$(window).scrollTop() + $(window).height() - _self.outerHeight() + 'px');
    _self.css('left','0px');
    break;    
   case 'right|bottom' :
    _self.css('top',$(window).scrollTop() + $(window).height() - _self.outerHeight() + 'px');
    _self.css('left',$(window).width() - _self.outerWidth() + 'px');
    break;
   default:
    _self.css('top',$(window).scrollTop() + opt.top + 'px');
    _self.css('left', opt.left + 'px');
    break;
  }
  timeoutHandle = setTimeout(function(){
   _self.show();
  }, opt.timeout);
 }
 $(window).resize(function(){
  flow();
 });
 $(window).scroll(function(){
  flow();
 });
 flow();
}
})
(jQuery);

$(document).ready(function(){
 $('#div1').srcollFlow({position:'left|top'});
 $('#div2').srcollFlow({position:'right|top'});
 $('#div3').srcollFlow({position:'left|bottom'});
 $('#div4').srcollFlow({position:'right|bottom'});
 $('#div5').srcollFlow({left:330, top:530});
 
});
</script>
 <BODY>
 <div style="position:absolute; width:200px; height:100px;top:100px; left:1px;border:1px solid #FF0000" id="div1">1</div>
 
 <div style="position:absolute; width:200px; height:100px;top:100px; left:1px;border:1px solid #FF0000" id="div2">2</div>

 
 <div style="position:absolute; width:200px; height:100px;top:100px; left:1px;border:1px solid #FF0000" id="div3">3</div>

 
 <div style="position:absolute; width:200px; height:100px;top:100px; left:1px;border:1px solid #FF0000" id="div4">4</div>

 <div style="position:absolute; width:200px; height:100px;top:100px; left:1px;border:1px solid #FF0000" id="div5">5</div>

 <div  style="width:200px; height:10000px; border:1px solid #CC0000" ></div>
 </BODY>
</HTML>

ylrainbow
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小费数据集 tips.csv
09-28
利用Python进行数据分析，小费数据集。
详解Vue组件实现tips的总结
08-28
Vue 组件实现 Tips 的总结 在本文中，我们将探讨 Vue 组件实现 Tips 的总结，通过详细的分析和讲解，帮助大家更好地理解 Vue 组件的实现机制。 一、组件的概念 在 Vue 中，组件是将一个相对独立且会多次使用的...
Swifter-Swift必备Tips
05-11
基于swift4.0，由王巍翻译的Swift必备tips，讲解了swift里面常用的知识点，可帮助你提高对swift的认识，更好的在工作中使用。
javascript tips提示框组件实现代码
10-28
JavaScript Tips提示框组件是一种常见的用户交互元素，用于在鼠标悬停在特定元素上时显示额外信息。这个组件的实现代码展示了如何用纯JavaScript创建一个功能类似于`title`属性但更加强大的提示效果。下面我们将详细...
第二百一十六节 JSF教程 - JSF基本标签、JSF表单文本框示例
2301_78772942的博客
09-05 282
第二百一十六节 JSF教程 - JSF基本标签、JSF表单文本框示例
怎么使用html中的div元素画圆
wangyufei0815的博客
09-05 145
元素会呈现为一个直径为 100px 的蓝色圆形。属性的值，你可以改变圆的大小。的宽度和高度相等，并应用。
html简单注册页面
lizhiwei21的博客
09-02 311
简单的html注册页面，代码如下，效果如下。
html,css学习记录
2301_79347603的博客
09-01 2148
html,css学习记录htmlcss盒子模型 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>mykingdom</title> <link
前端知识HTML&CSS
w13114的博客
08-31 1314
前端知识
HTML语义化标签的重要性及常见错误
官方推荐
09-02 3310
HTML语义化标签的重要性及常见错误
VitePress 文件路由解析：从 Markdown 到 HTML 的映射艺术
软考鸭
09-05 251
VitePress 采用文件路由的方式，将 Markdown 文件的目录结构直接映射为生成的 HTML 页面的 URL 路径。这种设计使得网站的结构清晰易懂，同时也方便了内容的组织和维护。VitePress 的文件路由机制为文档网站的构建提供了一种直观且高效的方式。通过简单地组织和编写 Markdown 文件，你可以快速生成结构清晰、易于导航的静态网站。无论是个人博客、项目文档还是企业官网，VitePress 都是一个值得尝试的选择。
vscode写markdown(引入html及css语法)
2301_79347603的博客
09-01 581
用ctrl+shift+p 搜索"Markdown Preview Enhanced:Customize CSS"在style中使用css语法改格式（太牛啦）
web前端HTML
2301_77599154的博客
09-05 449
作用：根据元素的结构关系查找元素使用公式设置多个元素，根据元素的结构关系查找多个元素例。如：(注意n从0开始算术)
SpringBoot开发——结合Thymeleaf模板整合HTML
最新发布
bjzhang75的博客
09-05 744
Thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可。Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。
【html】新建一个html并且在浏览器运行
qq_43720551的博客
09-02 375
想要运行上述代码，可以直接拖到浏览器里，但是为了实时地查看我们修改后的样式，可以使用 vscode 安装插件， Live Server。以下是一个简单的 HTML 小项目，展示一个包含标题、按钮和点击按钮后弹出提示框的基本页面。
前端面试题总结（HTML篇和CSS篇）
hyx_1225的博客
08-31 2565
BFC是一个独立渲染区域，它丝毫不会影响到外部元素BFC特性BFC内部元素是垂直排列的同一个BFC下margin会重叠计算BFC高度时会算上浮动元素BFC不会影响到外部元素BFC区域不会与float元素重叠如何创建BFCposition设为absolute或fixedfloat不为noneoverflow设置为hidden、autodisplay设置为inline-block或者inline-table或flexBFC的作用：解决margin的重叠问题。
HTML 总结
2301_77527830的博客
08-29 929
包含了所有的头部标签，例如：<title>, <style>, <meta>, <link>, <script>e.g.：比 如 < 和 > ,我们不能直接在页面中使用 < 和 > 号，因为浏览器会将它解析为html 签。网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器。注：下拉框的name,id,事件等需要在select中定义，而value需要在option中定义。为了可以使用这些预留字符，我们必须在html中使用字符转义。
网站开发：HTML + CSS - CSS选择器
qq_51222843的博客
09-03 1279
CSS（Cascading Style Sheets，层叠样式表）是一种用于控制 HTML 文档样式和布局的语言。它为 Web 页面提供了许多功能，使开发者能够创建美观且功能丰富的用户界面。提供了丰富的功能来控制网页的外观和布局，增强用户体验，并支持现代 Web 开发的最佳实践。通过合理使用 CSS，可以创建视觉上引人入胜、功能丰富、易于维护的 Web 应用。
Swift编程技巧：100个必备Tips
"Swifter - 100 个 Swift 必备 tips，由王巍（onevcat）创作，提供了一本关于 Swift 编程语言的实用技巧集锦，涵盖多个核心概念和技术，旨在帮助开发者提升 Swift 开发效率。" 在 Swift 编程语言中，这100个必备 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值