左右镜像滚动效果demo

最新推荐文章于 2021-09-17 17:40:14 发布
最新推荐文章于 2021-09-17 17:40:14 发布
阅读量2.2k 收藏
点赞数 1
分类专栏： 实际应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013970232/article/details/87370185
版权

分享一个有趣的效果,并不复杂,

 

关键在于

横向,纵向的布局;

滚动时坐标的运算;

10毫秒的延迟;

 

代码超简单,看看就懂了

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=0)">
		<title>左右镜像滚动</title>
		<style type="text/css">
			td { height: 50px; }
			/*滚动条整体部分,必须要设置*/
			 ::-webkit-scrollbar { width: 0; height: 0; background-color: transparent; }
			/*滚动条的轨道*/
			 ::-webkit-scrollbar-track { box-shadow: none; background-color: transparent; }
			/*滚动条的滑块按钮*/
			 ::-webkit-scrollbar-thumb { background-color: transparent; box-shadow: none; }
			/*滚动条的上下两端的按钮*/
			 ::-webkit-scrollbar-button { height: 0; background-color: transparent; }
			#all { outline: 1px solid #f00; width: 100%; max-width: 500px; margin: auto; height: 300px; overflow-x: hidden; overflow-y: auto; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
			#fall1, #fall2 { outline: 1px solid #f00; float: left; width: 50%; overflow: auto; }
			#fall1 {}
			#fall2 {}
		</style>
	</head>

	<body>
		<div id="all">

			<div id="fall1">
				<table border="" cellspacing="" cellpadding="">
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
						<td>7</td>
						<td>8</td>
						<td>9</td>
						<td>10</td>
						<td>11</td>
						<td>12</td>
					</tr>
					<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
					<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
					<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
					<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
					<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
					<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
				</table>
			</div>
			<div id="fall2">
				<table border="" cellspacing="" cellpadding="">
					<tr>
						<td>12</td>
						<td>11</td>
						<td>10</td>
						<td>9</td>
						<td>8</td>
						<td>7</td>
						<td>6</td>
						<td>5</td>
						<td>4</td>
						<td>3</td>
						<td>2</td>
						<td>1</td>
					</tr>
					<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
					<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
					<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
					<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
					<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
					<tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr>
				</table>
			</div>

		</div>

		<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
		<script type="text/javascript">
			'use strict';

			window.onload = function() {

				var wf1 = $("#fall1").width()
				var wf2 = $("#fall2").width()
				var tf1 = $("#fall1 table").width()
				var tf2 = $("#fall2 table").width()
				var setTimeoutName;
				var isFall1Click = false;
				var isFall2Click = false;
				var fall1Layer = {}
				var fall2Layer = {}

				$("#fall2").scrollLeft(tf2)

				if('ontouchstart' in document.documentElement) {
					//移动端
					$("#fall1").scroll(function() {
						var lin = $("#fall1").scrollLeft()
						$("#fall2").scrollLeft(tf2 - wf2 - lin)
					})
					$("#fall2").scroll(function() {
						var lin = $("#fall2").scrollLeft()
						$("#fall1").scrollLeft(tf1 - wf1 - lin)
					})
				} else {
					//pc端
					document.getElementById("fall1").onmousedown = function(e) {
						clearTimeout(setTimeoutName)
						isFall1Click = true
						isFall2Click = !isFall1Click
						fall1Layer.x = e.layerX + $("#fall1").scrollLeft()
						fall1Layer.y = e.layerY + $("#fall1").scrollTop()
					}
					document.getElementById("fall1").onmousemove = function(e) {
						if(isFall1Click && !isFall2Click) {
							clearTimeout(setTimeoutName)
							setTimeoutName = setTimeout(function() {
								var lin = fall1Layer.x - e.layerX
								$("#fall1").scrollLeft(lin)
								$("#fall2").scrollLeft(tf2 - wf2 - lin)
							}, 10)
						}
					}
					document.getElementById("fall1").onmouseup = function(e) {
						clearTimeout(setTimeoutName)
						isFall1Click = isFall2Click = false
					}
					//==================
					document.getElementById("fall2").onmousedown = function(e) {
						clearTimeout(setTimeoutName)
						isFall2Click = true
						isFall1Click = !isFall2Click
						fall2Layer.x = e.layerX + $("#fall2").scrollLeft()
						fall2Layer.y = e.layerY + $("#fall2").scrollTop()
					}
					document.getElementById("fall2").onmousemove = function(e) {
						if(isFall2Click && !isFall1Click) {
							clearTimeout(setTimeoutName)
							setTimeoutName = setTimeout(function() {
								var lin = fall2Layer.x - e.layerX
								$("#fall2").scrollLeft(lin)
								$("#fall1").scrollLeft(tf1 - wf1 - lin)
							}, 10)
						}
					}
					document.getElementById("fall2").onmouseup = function(e) {
						clearTimeout(setTimeoutName)
						isFall1Click = isFall2Click = false

					}
					//==================
					document.onmouseup = function(e) {
						clearTimeout(setTimeoutName)
						isFall1Click = isFall2Click = false
					}
				}

			}
		</script>

	</body>

</html>

 

 

 

 

 

 

 

352328759
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java上的touch,在使用触摸和鼠标的设备上聆听mousedown和touchstart（例如Surface）[重复]...
weixin_30775883的博客
03-14 355
这个问题在这里已有答案：因此，我在处理Microsoft Surface的Web应用程序时遇到了一个有趣的问题 .我想在用户与DOM元素交互时添加事件监听器 . 现在我能做到：if ('ontouchstart' in document.documentElement) {//Attach code for touch event listenersdocument.addEventListene...
引入driver.js后，为什么点击引导按钮无效了？
wen81643956的专栏
02-20 741
driver.js在chrome66上点击失效，原因是'ontouchstart' in document.documentElement执行有误
js/jquery 判断支持touchstart
dianjiumao4195的博客
03-26 409
if ('ontouchstart' in document.documentElement) { //... } 转载于:https://www.cnblogs.com/zfdai/p/3624809.html
Unity：图片翻动浏览效果Demo
Tan
09-25 3868
本Demo涉及的Unity知识点有： 1.天空盒的添加；http://blog.csdn.net/tanmengwen/article/details/8013410 2.镜面反射效果的实现；http://blog.csdn.net/tanmengwen/article/details/8015138 3.给摄像机添加Image Effect效果使用，比如Depth of Field ，Mo
java windows 触摸技术_使用触摸屏在Windows 8上检测Chrome中的触摸事件
weixin_34005314的博客
02-16 407
我构建了一个触摸/鼠标友好的jQuery插件 . 它适用于手机(ios，android ...)和桌面浏览器 . 但我在触摸屏笔记本电脑上安装Windows 8 Chrome时遇到了一些问题 . 不幸的是我没有这样的设备，不能做任何测试 . IE10工作正常 .让我解释一下我的内容(非常简化的代码)：1.检查是触摸设备：base.isTouch = ("ontouchstart" in docum...
UIScrollView实现图片无限滚动Demo
11-15
这种效果通常通过添加额外的“镜像”图片视图来实现，即在图片数组的开头和结尾分别加上最后一个和第一个图片的副本。 接下来，`UIPageControl` 是一个常用的UI组件，用于在用户滚动`UIScrollView` 时提供视觉反馈...
仿Launcher的GridView拖动.zip
07-10
5、到GridView的item过多的时候，可能一屏幕显示不完，我们手指拖动item镜像到屏幕下方，要触发GridView想上滚动，同理，当我们手指拖动item镜像到屏幕上面，触发GridView向下滚动 6、GridView交换数据，刷新界面，...
XPopup::fire:XPopup2.0版本重磅来袭，2倍以上性能提升，带来可观的动画性能优化和交互细节的提升！！！功能强大，交互优雅，动画丝滑的通用弹窗！可以替代Dialog，PopupWindow，PopupMenu，BottomSheet，DrawerLayout，Spinner等组件，自带十几种效果良好的动画， 支持完全的UI和动画自定义！(Powerful and Beautiful Popup，can absolutely replace Dialog，PopupWindow，PopupM
05-10
交互优雅，实现了优雅的手势交互，智能的嵌套滚动，智能的输入法交互，具体看Demo 适配全面屏，目前适配了小米，华为，谷歌，OPPO，VIVO，三星，魅族，一加全系全面屏手机 自动监听Activity生命周期，自动释放资源。...
vue+web端仿微信网页版聊天室功能
11-28
5. **vue-gemini-scrollbar**：这个库用于实现自定义滚动条，提供美观的滚动效果，使得聊天室的交互体验更佳。 6. **Element UI**：Element UI 是一套基于 Vue.js 的企业级 UI 组件库，由饿了么团队开发。它包含...
图形处理类的实例40个
05-11
利用OpenGL实现动画效果 逆滤波处理 实现图案化和抖动技术以及bmp2txt源代码 屏幕保护程序与源代码 屏幕颜色拾取器源代码 曲线处理 贝塞尔曲线程序 实现图象平滑（去噪声） 锐化算法的源代码 视频捕获程序代码 贴片...
Unity3D图片滑动效果
01-09
Unity3D图片滑动，滚动效果，C#语言！
div左右滑动demo
07-23
两个div在一个父div中左右滑动，在一个页面分为登录注册两个div。
Unity图片切换轮播功能
12-06
一个可以在Unity进行图片轮播的demo，只需要给一个texture 2d的图片数组就可以直接用，有多种切换特效
图片左右滚动特效，很简单，你绝对看的懂
04-19
这是一个左右图片滚动的特效，代码很短，但是功能却完成实现了，你绝对可以看的懂。
Vue镜像滚动条
02-15
Nuxt Content静态启动器 使用Nuxt Content和静态站点生成的Nuxt完整配置的PWA。 利用Nuxt，Nuxt Content和静态网站生成的功能，快速引导博客，CMS或静态网站。 使用Vuetify UI库放大了开发。 一键式Netlify部署。 针对性能进行了优化。 生产准备就绪。 目录 关于 该入门项目旨在引导现代无头CMS博客或静态网站的开发。 借助Nuxt的强大功能，您可以预先配置PWA，以最大程度地提高性能和SEO机会。 Vuetify用于UI库，该项目具有响应字体，主题缓存，全局断点修复等更多功能。 该项目还将与Netlify一起使用，后者提供了免费的入门计划，用于免费托管个人项目，爱好站点和实验。 其它功能： Docker支持 Vuetify断点修复 Vuetify主题缓存以提高性能 主导航的自定义滚动指令 先决条件 您将需要安装Node和n
如何解决 touchstart 事件与 click 事件的冲突
aifeishike的博客
10-23 489
一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时，我们想要站点在移动设备上有更快的响应速度，以带给用户更好的体验，此时，我们应该使用移动设备专用的事件系统，例如，使用 touchstart 事件代替 click 事件。 为什么这样效果会更好呢？根据Google开发者文档中的描述： 移动设备上的浏览器将会在 click 事件触发时延迟 300ms ，以确保这是一个“单击”事件而非“双击”...
CSS3动画实现左右滚动效果
chenlim87的博客
09-17 4845
CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。项目中一些比较酷炫的页面效果就是CSS3做出来的。今天我们做一个简单的左右滚动的动画效果。 效果如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=devi.
canvas画板总结
weixin_44809439的博客
11-29 460
制作Canvas画板 画板预览 源码地址 canvas的使用查mdn文档就可以了 下面主要讲的是实现画板的思路，以及我的踩坑记录 先不用canvas标签 先用div，首先知道用户点了哪里 使用console.log调试 <div id="canvas"></div> xxx.onClick = (e) => { console.log(e) //e.clientX //e.clientY } 在点击的地方出现圆点 let div = document.creat
检测是不是触摸设备（手机端移动端）
wang_liuyong的博客
07-27 721
function isTouchDevice() { return 'ontouchstart' in document.documentElement; } if (isTouchDevice()) { // on Mobile } else { // on Desktop }
u3d实现镜像模糊的demo
最新发布
09-04
### 回答1： 镜像模糊是一种常见的图像处理技术，可以用于模糊化图像的某些区域或者创建艺术效果。在Unity3D中，可以通过Shader...根据实际需要，可以进一步扩展和改进这个demo，来实现更加丰富和复杂的镜像模糊效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值