`
落花虽有意
  • 浏览: 185730 次
  • 性别: Icon_minigender_1
  • 来自: 长春
社区版块
存档分类
最新评论

Node的blocksMouse,translateX,translateY属性

阅读更多

blocksMouse : 当某个 Node 对象将此属性设置为 true 后则该对象在接收鼠标事件后会锁住鼠标事件, 阻止鼠标事件继续向其他 Node 对象传播, 设置该值往往是有必要的

eg:有两个图片对象都触发鼠标点击事件用来隐藏自己, 假如两个图片对象显示时为层叠的, 顶层的图片对象设为 topImage, 底下的设为 bottomImage , 这时在 topImage 上点击鼠标, 如果 topImage 的 blockMouse 为 false , 则 topImage 和 bottomImage 都将会触发这个鼠标点击事件,于是这两张图片都隐藏了, 而也许我们只是想让 topImage 隐藏后显示 bottomImage . 为了实现这个目的需要将 topImage对象 的 blockMouse 设置为 true, 这样 topImage 对象就能终止鼠标事件继续传播了.

 

 

translateX , translateY : 这两个属性是用于控制 Node 对象平移量的, 但必须注意到 它们平移的参照对象是其所属结点的父结点

分享到:
评论

相关推荐

    css3实现平移效果(transfrom:translate)的示例

    translate同时设置 translateX ,translateY translate(translateX,translateY) 第一个参数是向X轴平移,填正数往右平移,填负数,往左平移 第二个参数是向Y轴平移,填正数往下平移,填负数,往上平移 translate3d...

    windows8 WinRT PointAnimationUsingPath(WPF 路径动画 PathAnimation 的移植)

    在Storyboard中添加一个DoubleAnimation,用于改变CompositeTransform的TranslateX或TranslateY属性,以跟随路径移动。 - **步骤四:绑定动画与路径** 为了使动画遵循路径,我们需要计算路径上的点,并相应地更新...

    CSS3 translate实现轮播图丝滑般翻页,setInterval实现定时器等常见操作。

    `translateX()`函数用于沿着X轴移动元素,`translateY()`则沿Y轴移动。在轮播图中,我们通常利用`translateX`进行左右翻页,通过改变元素的X坐标实现平滑的过渡动画效果。例如,当用户点击“下一张”按钮时,轮播图...

    css动画 - 把你喜欢css动画嵌入到浏览器中

    可以通过CSS精灵图(CSS Sprites)和transform的translateX、translateY属性来实现角色的移动,或者使用CSS的scale属性调整大小,配合opacity属性实现淡入淡出效果,让海绵宝宝在页面上生动起来。 五、个人明信片 ...

    纯CSS3精美3D卡片翻转动画特效.zip

    3D转换允许开发者为元素创建出立体空间效果,包括旋转(rotateX, rotateY, rotateZ)、缩放(scaleX, scaleY, scaleZ)和平移(translateX, translateY, translateZ)。通过这些属性,我们可以让网页元素在屏幕上...

    基于jQuery实现的8种fakeloader页面加载等待特效源码.zip

    8. **飞入视图**:元素如同从远处飞入屏幕中央,这种效果可以使用jQuery的animate()函数结合CSS3的translateX和translateY属性实现,让加载过程更具动感。 以上8种特效均基于jQuery的灵活性和易用性,通过与CSS3的...

    CSS3波形loading动画特效

    在这个例子中,我们创建了一个名为`wave-animation`的动画,通过改变元素的translateX和translateY值来模拟波浪的移动。 接着,将这个动画应用到HTML元素上,通过设置`animation`属性的值,如`animation: wave-...

    zJTopo:开源拓扑图工具类jTopo的扩展,jtopo是一个不错的拓扑图,基于html5 canvas,功能强大

    ///将json数据解析到该场景中,加载ems里面的对象以及偏移量(translateX,translateY) JTopo.Scene.prototype.zLoadJson(json) ///通过params的idA与idZ来连线,或通过nodeA与nodeZ来连线(优先) JTopo.Scene.prototype....

    div css3 transform旋转变形属性制作新浪微博图片抖动

    当然,实际的抖动效果可能需要根据具体需求调整,例如改变旋转的角度、增加其他变换属性(如translateX、translateY等),或者调整动画的时间和缓动函数,以达到更逼真的抖动感。 此外,为了增强用户体验,我们还...

    纯js实现两种不同的文字滚动方式

    3. 在JavaScript中获取该元素,并设置初始的`transform`为`translateX(0)`,然后设定一个定时器,每隔一定时间(例如每10毫秒)更新`translateX`值,逐渐增加负值,直到达到元素的宽度。例如: ```javascript let ...

    纯css3绘制飞翔的鲸鱼和小鸟动画特效

    在这个案例中,我们使用`translateX`和`translateY`进行平移,使鲸鱼和小鸟产生移动效果。 - `animation-play-state`属性可以暂停或恢复动画的播放,允许用户交互式地控制动画效果。 - 使用`will-change`属性可以...

    CSS3魔幻按钮 按钮的几种酷炫形态

    这主要包括`translateX()`, `translateY()`, 和 `translateZ()`。这些属性允许我们在三维空间中平移元素,从而创造出各种动态效果。例如,当我们悬停在按钮上时,可以使用`transition`属性结合`translate`让按钮在...

    CSS3 实现的直升机飞翔动画效果源码.zip

    50% { transform: translateX(100px) translateY(-50px) rotate(10deg); } 100% { transform: translateX(0) translateY(0); } } ``` 在这个例子中,动画开始时直升机位于原点(0%),随着动画进行,它会向右移动...

    HTML5+CSS3电商项目综合实战1

    在电商项目中,translateX 属性可以用于实现商品图片的水平方向位移,提高用户体验。 九、setInterval 函数 setInterval 函数是指使用 JavaScript 语言来实现定时器的方式。可以使用 setInterval 函数来实现元素的...

    css3 transform属性制作散乱的照片样式代码

    在制作散乱照片效果时,我们可能需要用到`translateX()`, `translateY()`以及`rotate()`函数,通过随机的平移和旋转来使照片看起来散乱无序。 例如,我们可以为每个照片元素设置一个类,然后在CSS中为这个类定义`...

    纯css3 animation绘制轮船和飞机动画特效

    75% { transform: translateX(100%) translateY(-75%) rotateZ(20deg); } 100% { transform: translateX(100%) translateY(-100%); } } ``` 在实际应用中,我们需要将这些`@keyframes`规则与元素的`animation`...

    关于H5的小鸟飞飞飞的下游戏

    ; height: 100%; position: absolute; left: 0px; top: 0px; display: none; z-index: 100000;...-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)" > </div>

    纯CSS3绘制正方体旋转动画特效.zip

    通过`transform`属性,我们可以对元素进行三维空间的变换,如旋转(rotateX, rotateY, rotateZ)、平移(translateX, translateY, translateZ)以及缩放(scale)。在这个正方体旋转动画中,`rotateX`和`rotateY`将...

    图片3种滚动特效

    CSS3的`translateY`属性配合`transition`或`animation`可以实现平滑的滚动效果。 2. **图片左右翻滚特效**: 左右翻滚特效常见于轮播图组件,图片按照设定的时间间隔或用户触发事件,从左侧滑出,右侧滑入。这可以...

    CSS3圆形汇集在一起动画特效.zip

    在这个特效中,可能使用了`translateX`和`translateY`来改变圆圈的水平和垂直位置,达到动态“汇集”的效果。 结合jQuery,这个动画可能通过JavaScript控制触发和停止,例如使用`.animate()`方法或者绑定事件来控制...

Global site tag (gtag.js) - Google Analytics