鼠标的滑轮向下移动，广告不移动的小案例

最新推荐文章于 2021-12-13 11:00:47 发布
最新推荐文章于 2021-12-13 11:00:47 发布
阅读量189 收藏
点赞数
分类专栏： 前端 关于前端的技术探讨 文章标签： jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stay_hungry_stay/article/details/81189864
版权

鼠标的滑轮向下移动，广告不移动的小案例

这个案例需要用到jquery

jquery-3.3.1.js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-3.3.1.js"></script>
<style>
   body{
       display:flex;
       margin: 0;
   }
   .box{
       cursor: pointer;
       width: 100px;
       height: 100px;
       background: green;
       border: 1px solid #aaa;
       border-radius: 8px;
       text-align: center;
       line-height: 100px;
       color: #fff;
       font-size: 24px;
       position: absolute;
       left: 600px;
       top: 200px;
   }
</style>
</head>
<body style="height: 3000px;">
<div class="box animate swing">我是广告</div>
<script>
    $(function(){
        var t = $('.box').offset().top;
        $(document).scroll(function(){
            var l = $(document).scrollTop();
            $(".box").css('top',t+l);
        })
    })
</script>
</body>
</html>
Endless-love
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html如何设置滑轮效果,HTML中鼠标滚轮事件onmousewheel处理
weixin_39771987的博客
06-03 1624
滚轮事件是不同浏览器会有一点点区别，一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件，其他的浏览器滚轮事件使用mousewheel，下面我来给大家具体介绍。Firefox使用DOMMouseScroll，其他的浏览器使用mousewheel。滚动事件触发时Firefox使用detail属性捕捉滚轮信息，其...
Javaweb的增删改查的小案例（jsp+tomcat+eclipse+mysql）
Endless love
07-22 3789
后台中数据的增删改查的小案例 我使用的是 eclipse-jee-oxygen-3a-win32-x86_64 apache-tomcat-8.0.50-windows-x64 mysql-connector-java-5.1.40-bin mysql-5.7.22-winx64 jdk-8u171-windows-x64 工具来做。 jsp部分代码： Login.js ...
仿京东首页右侧广告位，上下可拖动，伴随页面滚动显示与隐藏
wj_12113114的博客
07-28 232
仿京东首页右侧广告位，上下可拖动，伴随页面滚动显示与隐藏自定义控件继承AppCompatImageButton显示与隐藏 并伴随着动画效果绑定滚动控件 可以是recyclerView 和NestScrollView支持自定义属性，隐藏时控件的透明度，控件隐藏显示百分比，执行动画的时长全部自定义控件代码使用：布局中：代码调用！！！注意使用 一定不要自已调用控件的点击事件 自定义控件继承AppCompatImageButton 控件可上下滑动需要处理控件的onTouchEvent事件 canSlide控制是否可
js实现鼠标拖动+滚动的小案例
Free_Ya的博客
03-13 1809
前言： 之前练习阴阳师网页时，有如下的效果要实现，答主在网上找了很多教程，最后参考了某一篇博客写出，时间已久，忘记该博客地址。如有侵权，定及时删除！ 正文: 对于以上的效果，我们可以先来分析下，涉及的事件有 鼠标按下（onmousedown），鼠标移动onmousemove)，鼠标释放(onmouseup)，鼠标滑动(onmousewheel) 那么我们可以想一想：当鼠标按下的时候，我们是不是可以触发开关，让内容睡着滑块移动，当鼠标释放的时候，关闭开关。则内容也暂停移动。 好了，下面我们来看下代码： HTM
【实用】js实现将鼠标的上下滚动改为页面的左右滚动
qq_38211443的博客
12-13 1759
element.addEventListener('wheel', (event) => { event.preventDefault(); element.scrollBy({ left: event.deltaY < 0 ? -30 : 30, // >0 是下滑，<0是上滑 }); });
鼠标滚轮控制网页横向移动实现思路
09-05
设置window的scrollLeft值，这里一定要是window不能是body否则滚动有问题,绑定事件mousewhell 也必须是在body上,感兴趣的各位可以了解下哈，希望可以帮助到你
易语言鼠标滑轮控制图片框大小
08-21
易语言鼠标滑轮控制图片框大小源码系统结构:易语言鼠标滑轮控制图片框大小源码,鼠标滑轮控制图片框大小 ======窗口程序集1 || ||------__启动窗口_滚轮被滚动 || ||------__启动窗口_创建完
滚动条响应鼠标滑轮事件实现上下滚动的js代码
10-25
javascript实现滚动条响应鼠标滑轮的实现上下滚动，示例代码如下
win10下 苹果鼠标滑轮不能用
09-27
最近 弄啦一个新的 苹果本装完 win10后magic mouse 2鼠标滑轮不能用，最后安装啦 2次这个驱动就可以用啦！亲测！
用html5实现图片和文字拖拽到下面的文本框里的Demo
Endless love
07-26 3384
用html5实现图片和文字拖拽到下面的文本框里的Demo jquery-3.3.1.js &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=dev
用html5和jquery写的一个文件上传的Demo
Endless love
07-26 1592
用html5和jquery写的一个文件上传的Demo jquery-3.3.1.js &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;
用jquery写一个选项卡
Endless love
07-24 1368
用jquery写一个选项卡 该实例需要自己下载 jquery-3.1.1.js 代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &am
用css3做阴影
Endless love
07-24 936
用css3做阴影 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css" media="scr
用jquery写的图片在固定盒子中移动（遇到边界自动翻转）
Endless love
07-24 831
用jquery写的图片在固定盒子中移动（遇到边界自动翻转） jquery-3.3.1.js &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;乱蹦的图片&lt;/title&gt; &lt;script src=&
用js实现一个下拉列表小案例
Endless love
07-24 762
实现下拉菜单对于地址的选择 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt;
Local Storage来记住登录名和密码
Endless love
07-26 735
Local Storage来记住登录名和密码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;bod
关于maven jstl pom.xml
Endless love
08-05 681
关于maven jstl pom.xml &lt;dependencies&gt; &lt;dependency&gt; &lt;groupId&gt;javax.servlet&lt;/groupId&gt; &lt;artifactId&gt;jstl&lt;/artifactId&gt; &lt;version&gt;1.2&
pyqt5实现导入图片鼠标滑轮放缩和左键按住移动
最新发布
05-29
要实现导入图片鼠标滑轮放缩和左键按住移动，可以使用QGraphicsView和QGraphicsScene来实现，具体步骤如下： 1. 创建一个QGraphicsView对象和QGraphicsScene对象，并将QGraphicsScene设置为QGraphicsView的场景。 2. 使用QGraphicsPixmapItem将图片添加到QGraphicsScene中。 3. 重写QGraphicsView的wheelEvent()方法，实现鼠标滑轮放缩图片的功能。 4. 重写QGraphicsView的mousePressEvent()、mouseMoveEvent()和mouseReleaseEvent()方法，实现鼠标左键按住移动图片的功能。 下面是一个简单的代码示例： ```python from PyQt5.QtWidgets import QGraphicsView, QGraphicsScene, QGraphicsPixmapItem from PyQt5.QtGui import QPixmap from PyQt5.QtCore import Qt class ImageViewer(QGraphicsView): def __init__(self, parent=None): super().__init__(parent) # 创建QGraphicsScene对象 self.scene = QGraphicsScene(self) self.setScene(self.scene) # 添加图片 self.image = QGraphicsPixmapItem() self.scene.addItem(self.image) # 设置滚动条策略 self.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff) self.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff) self.setRenderHint(QPainter.Antialiasing, True) # 设置鼠标追踪 self.setMouseTracking(True) # 设置缩放比例 self.scaleFactor = 1.0 def loadImage(self, filename): # 加载图片 pixmap = QPixmap(filename) self.image.setPixmap(pixmap) self.setSceneRect(pixmap.rect()) def wheelEvent(self, event): # 放缩图片 if event.angleDelta().y() > 0: self.scaleFactor *= 1.1 else: self.scaleFactor /= 1.1 self.scale(self.scaleFactor, self.scaleFactor) def mousePressEvent(self, event): # 记录鼠标按下的位置 if event.button() == Qt.LeftButton: self.lastPos = event.pos() def mouseMoveEvent(self, event): # 移动图片 if event.buttons() & Qt.LeftButton: delta = event.pos() - self.lastPos self.lastPos = event.pos() self.translate(delta.x(), delta.y()) def mouseReleaseEvent(self, event): pass ``` 在上面的代码中，loadImage()方法用于加载图片，wheelEvent()方法用于放缩图片，mousePressEvent()、mouseMoveEvent()和mouseReleaseEvent()方法用于移动图片。注意，在mousePressEvent()方法中要记录鼠标按下的位置，在mouseMoveEvent()方法中要计算鼠标移动的距离，并将场景平移相应的距离。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值