毕业论文开发语言企业开发JAVA技术.NET技术WEB开发Linux/Unix数据库技术Windows平台移动平台嵌入式论文范文英语论文
您现在的位置: 毕业论文 >> WEB开发 >> 正文

js或者jquery如何修改元素的位置

更新时间:2015-3-24:  来源:毕业论文

想做一个类似安卓Toast的效果,是用在手机web上的。

打印一行信息后,在屏幕中间显示,然后过段时间自己消失。
我用jq的height()获取屏幕的高度..但是效果不是很好的。
因为当手机网页上面内容很少的时候(就是说 页面没有下拉的滚动条),这个时候 height()就获取到屏幕的高度了。
但是有时候内容大多,下拉很长的时候,用height()获取到了这个html的高度,即便拿这个高度除以2,都得到的值也不是当前
手机浏览器的屏幕的中间...这个时候可能Toast就打印在浏览器的上方,或者超出浏览器了...
我想问,这种怎么处理啊。

我的代码:
alertToast: function (msgInfo, delTime) {
        if (delTime == undefined) { delTime = 3000; }
        $('#toastMsg').remove();
        var jContext = $('body');
        var jMsg = $('#toastMsg');
        var msgDIV = new Array();
        msgDIV.push('<div id="toastMsg" style="font-size:18px;background-color:black;color:white">');
        msgDIV.push('<span>' + msgInfo + '</span>');
        msgDIV.push('</div>');
        jMsg = $(msgDIV.join('')).appendTo(jContext);
        var left = jContext.width() / 2 - jMsg.find('span').width() / 2;
        var top = jContext.height() / 2 - jMsg.find('span').height() / 2;
        jMsg.hide();
        jMsg.css({ position: 'absolute', top: top, 'z-index': '99', left: left, padding: '10px', margin: '10px' });
        jMsg.fadeIn(delTime / 2)

html { height: 100%; margin: 0; padding: 0; }
设置这个css就能在网页上面内容很少的时候获取到正确浏览器页面的高度了。

用position: fixed;方式定位信息层。就无视页面滚动了,

设为首页 | 联系站长 | 友情链接 | 网站地图 |

copyright©youerw.com 优尔论文网 严禁转载
如果本毕业论文网损害了您的利益或者侵犯了您的权利,请及时联系,我们一定会及时改正。