jquery-offset与position方法

offset  方法

position  方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹幕</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<style>
         .father{
          width: 400px;
          height: 400px;
          background-color: pink;
          position: relative;
          margin: 100px;
         }
         .son{
          width: 200px;
          height: 200px;
          background-color: red;
          position: absolute;
          top:100px;
          left: 100px;
         }
         </style>
</head>
<body>
   <div class="father">
        <div class="son"></div>
   </div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
                                  	
<script>

      $(function(){
           //获取元素的相对应document的位置,也就是相对于页面的一个位置。
           console.log($(".son").offset());

           //获取元素相对于有定位的父元素的位置。
           console.log($(".son").position());
           console.log($(".son").position().left);
           console.log($(".son").position().top); 
		});
</script>
</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery是一种JavaScript库,它可以帮助我们更轻松地操作HTML和CSS,它本身并没有提供时间轴功能。但是,我们可以使用jQuery和CSS来轻松创建时间轴。下面是一个简单的例子: HTML代码: ``` <div class="timeline"> <div class="timeline-item"> <div class="timeline-date">2021-06-01</div> <div class="timeline-content"> <h3>事件标题</h3> <p>事件描述</p> </div> </div> <div class="timeline-item"> <div class="timeline-date">2021-06-02</div> <div class="timeline-content"> <h3>事件标题</h3> <p>事件描述</p> </div> </div> <div class="timeline-item"> <div class="timeline-date">2021-06-03</div> <div class="timeline-content"> <h3>事件标题</h3> <p>事件描述</p> </div> </div> </div> ``` CSS代码: ``` .timeline { position: relative; padding: 0; list-style: none; } .timeline:before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background-color: #ccc; transform: translateX(-50%); } .timeline-item { position: relative; margin: 10px 0; } .timeline-date { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); background-color: #fff; padding: 0 10px; border: 2px solid #ccc; border-radius: 20px; font-size: 14px; font-weight: bold; line-height: 40px; } .timeline-content { position: relative; margin-left: 30px; } .timeline-content h3 { margin-top: 0; } .timeline-content p { margin-bottom: 0; } ``` jQuery代码: ``` $(function() { $('.timeline-date').each(function() { var date = $(this).text().trim(); var timestamp = (new Date(date)).getTime(); $(this).attr('data-timestamp', timestamp); }); $('.timeline-date').on('click', function() { var timestamp = $(this).attr('data-timestamp'); $('html, body').animate({ scrollTop: $('[data-timestamp="'+timestamp+'"]').offset().top }, 500); }); }); ``` 这个示例中,我们使用了一个HTML列表来表示时间轴,每个时间轴项目包含一个日期和事件描述。在CSS中,我们使用了绝对定位来创建时间轴线和时间轴日期。在jQuery中,我们使用了一个循环来将日期转换为时间戳,并将其存储在data-timestamp属性中。当用户单击日期时,我们使用jQuery的animate()函数来滚动到相应的时间轴项目。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值