效果截圖。
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。
這樣一個可以移動的廣告就完成了。
下一篇: animate.css是什么,該如何使用