滑动定位对应项

最新推荐文章于 2022-05-07 18:30:43 发布
最新推荐文章于 2022-05-07 18:30:43 发布
阅读量296 收藏
点赞数
分类专栏： jQuery学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LzzMandy/article/details/80930574
版权

1、源码

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>


<!--   引入jQuery -->
<script src="scripts/jquery.js" type="text/javascript"></script>


<script type="text/javascript">
$(function(){
	//为圆圈定位：1、先获取虚线的左坐标；2、获取虚线的宽度；3、设置圆圈的left值
	var rx=$("#innerright").position().left;
	var rw=$("#innerright").outerWidth(true);
	var setx=rx+rw-20;
	$("#circle").css("left",setx);
	//初始化圆圈的top
	var $first=$(".out .innerleft div:first");
	showHeight($first);	
});
var showHeight=function(obj){
	var rt=$(obj).position().top;
	var rtdivh=$(obj).outerHeight(true);
	var seth=rt+rtdivh/2-10;
	//$("#circle").css({"top":seth});//没有动画效果
	$("#circle").animate({top:seth},"slow");//带有动画的滑动显示
}
</script>
<style type="text/css">
body {
	font: normal 12px/17px Arial;
	margin:0px;
	padding:0px;
}
.out{width:600px;height:600px;margin:2% auto;border:1px solid green;padding:2%;position:relative;}
.innerleft{width:60%;height:100%;margin:2%;padding:1%;float:left;}
.out .innerleft div{width:90%;height:15%;max-height:80px;line-height:80px;margin:2%;border:1px dashed green;text-align:center;font-size:20px;}
.out .innerleft div:hover{background:green;}
.innerright{width:10%;height:100%;border-right:1px dashed green;margin:10px;float:left;}
.circle{width:20px;height:20px;border-radius:50%;background:#F69;position:absolute;}
</style>
</head>
<body>


<div class="out">
	<div class="innerleft">
	<div οnclick="showHeight(this)">No1</div>
    	<div οnclick="showHeight(this)">No2</div>
    	<div οnclick="showHeight(this)">No3</div>
    	<div οnclick="showHeight(this)">No4</div>
    	<div οnclick="showHeight(this)">No5</div>
    </div>
    <div id="innerright"  class="innerright"></div>
    <div id="circle" class="circle"></div>
</div>
</body>
</html>

佛佛ง
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
UGUI ScrollRect滑动定位优化
Stephanie的专栏
07-18 1万+
UGUI的滑动组建虽然表现上和NGUI的ScrollView一致，但是它更美好的是开放源码的，不了解原理的时候直接查源码就OK。 在使用ScrollRect的时候，想滑动流畅然后定位，既待惯性的滚动设置，如图MovementType指定为Elastic则为带惯性的滑动模式，同时调整Inertia为惯性系数，值越大则惯性表现越大，即滑动手离开后自由滑动到停止所需的时间也越长。Inertia=0时则表
Android ScrollView+GridView左右滑动 自动定位滑动到某一项
08-01
为了实现在GridView中的滑动定位，我们需要跟踪用户的滑动事件，并根据需要调整GridView的滚动位置。 在"创建时自动定位滑动到某一项"这个需求中，我们可能需要在GridView的初始化阶段设置一个默认选中项。这可以...
滑动定位的三种方法，以及热启动（五）
weixin_30652491的博客
04-18 123
from init_driver.Init_driver import init_driver driver = init_driver() # 坐标-->坐标，定位滑动 driver.swipe(309, 1353, 537, 511, duration=3000) # 元素-->元素，定位滑动 start_ele = driver.find_element...
页面滚动定位
zzzz121380的博客
05-07 567
页面滚动定位 一、文本框类型的滚动 介绍：点击右侧框，左侧对应的文本框出现红色边框并定位到此处。 1、效果图 2、代码实现 <template> <div id="app"> <Row> <Col span="16" v-for="(item,i) in list"> <Input style="width: 95%;margin: 10px 0" v-model="item.templateNa
Vue实现app中滑动定位效果
うさぎの喫茶店
03-01 309
先来看看效果 项目结构大概是这样 点击切换主要是兄弟组件之间的传值，本篇不再介绍，这里主要是滑动改变CityList中的列表的位置 <template> <ul class="list"> <li class="item" v-for="item of letters" :key="item" @click="handleLetter...
jquery左侧导航滑动网页定位效果.
05-26
"jQuery左侧导航滑动网页定位效果"是一种常见的交互设计手法，它增强了用户在网站中浏览和寻找信息的效率。在这个设计中，左侧通常会有一个固定的导航栏，列出了网页的主要部分或章节。当用户点击某个菜单项时，页面...
jquery左侧导航滑动网页定位效果.zip
07-04
【jQuery左侧导航滑动网页定位效果】是一种常见的前端交互设计，它主要应用于具有大量内容的长页面，使得用户可以通过导航栏快速跳转到页面的特定部分。这种效果大大提升了用户体验，因为用户无需手动滚动浏览整个...
recyclerview 横向纵向滑动，滑动置顶，跳转到某一项item
01-11
跳转到RecyclerView中的特定项，我们可以通过找到该项的位置并滚动到对应位置来实现。可以使用`smoothScrollToPosition(int position)`方法平滑滚动到指定位置： ```java recyclerView.smoothScrollToPosition...
Android tabLayout+recyclerView实现锚点定位的示例
08-27
实现锚点定位的思路可以分为两步：首先，在 RecyclerView 滑动时，监听滑动到的位置，并将对应的标签项在 TabLayout 中切换；其次，在 TabLayout 中点击标签项时，RecyclerView 滑动到对应的内容区域。 监听 ...
Unity ScrollRect滑动定位优化
04-06
Unity ScrollRect滑动定位优化
ngTouch 滑动定位
03-07
修改ngTouch模块并参考网上资料，支持实时获取touch dom，以实现菜单栏滑动定位
[Unity UGUI]ScrollRect滚动效果大全
09-10
[Unity UGUI]ScrollRect滚动效果大全 支持缩放滑动效果 - 支持动态缩放循环加载 - 支持大数据固定Item复用加载 - 支持不用Mask遮罩无限循环加载 - 支持ObjectPool动态加载 - 支持无限不规则子物体动态加载 - 支持拖动并点击和拖拽 - 支持拖动并拖拽 - 支持ScrollRect拖动自动吸附功能(拖动是否超过一半自动进退)
无缝滑动定位js
10-21
无缝滑动定位js，可用于导航菜单定位或者模拟楼层
android 点击实现滑动到指定位置效果
07-26
android 标题点击动态滑动到指定位置，
android实现3种定位的切换,Android 滑动定位+吸附悬停效果实现
weixin_40003780的博客
05-26 474
在前两篇文章中，分别介绍了tablayout+scrollview 和 tablayout+recyclerview 实现的滑动定位的功能，文章链接：Android 实现锚点定位Android tabLayout+recyclerView实现锚点定位仔细看的话，这种滑动定位的功能，还可以整体滑动，再加上顶部tablayout 吸附悬停的效果。实现效果：布局这里采用的是两个 tablayout。一个...
swipe实现滑动页面，定位元素
qq_30044187的博客
10-08 2409
driver.swipe(768/2, 1000, 768/2, 300, 1000); 方法swipe(startx, starty, endx, endy, duration) startx, starty为开始坐标    endx, endy为结束坐标  duration为滑动持续的时间。注（时间要设置稍长一点，否则就成为了点击操作） 如，当duration=10时，则效果为在st
点击导航，滑动到网页中的指定位置（JS实现滑动锚点定位）
热门推荐
王永存
01-10 2万+
在一个网页页面中，可能会分为很多的模块内容，当我点击导航栏的某一项时，希望显示对应的内容，例如，点击下图导航中的报告服务后，希望网页滑动到 “报告服务” 的模块，点击城市品牌滑动到“城市品牌”的模块。 城市品牌模块 js代码 $(function () { //获取城市模块到顶部的距离 var city_top = $('#ci
selenium元素定位 滑动
最新发布
07-28
你可以使用 Selenium 来定位网页中的元素，并且可以通过滑动页面来定位元素。下面是一个示例代码，演示如何使用 Selenium 进行滑动和元素定位： ```python from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.action_chains import ActionChains # 创建浏览器实例 driver = webdriver.Chrome() # 打开网页 driver.get('https://www.example.com') # 执行滑动操作 actions = ActionChains(driver) actions.move_by_offset(0, 500) # 向下滑动500像素 actions.perform() # 定位元素 element = driver.find_element(By.XPATH, '//div[@class="example-element"]') ``` 在上面的代码中，首先创建了一个 Chrome 浏览器实例，并打开了一个示例网页。然后，使用 `ActionChains` 类来执行滑动操作，通过 `move_by_offset` 方法指定滑动的偏移量。最后，使用 `find_element` 方法来定位元素，通过传入合适的定位器（如 XPath）和定位表达式来定位元素。 请注意，上述代码仅为示例，实际应用中可能需要根据具体的网页结构和元素属性进行相应的定位和滑动操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

佛佛ง

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值