如何做出可以移动的广告特效

发布时间：2017-01-08 19:16:26

发布者：jiangbing

浏览量:

效果截图。

1、首先我们需要注意的是他有一张半透明的背景图，这种特效像是商城网站用的特别多。

2、看清楚构造，接下来就可以写效果了。

html只需要两个div即可。这是他的样式，这里用到的属性有position、z-index还有opacity,当然要对IE做兼容的话透明度需要写filter:alpha(opacity=50)，IE版本低的不支持opacity。

3、下面就可以写JS了，首先引入jQuery库。这里用到的一个知识点是坐标var x=e.pageX-$('.aa').offset().left; var y=e.pageY-$('.aa').offset().top;他需要三个事件：鼠标单击时mousedown、鼠标移动时mousemove、鼠标松开时mouseup。

这样一个可以移动的广告就完成了。

上一篇：前端新手如何使用JQuery插件做出更好的效果

下一篇： animate.css是什么，该如何使用

关键词:

返回列表

2024-04-12

用友移动端app如何实现云修复查看详情

2024-01-01

如何解决vue深层数组修改后不渲染问题查看详情

2023-12-10

如何写好一份项目需求分析说明书查看详情

2019-02-13