临近期末，某专业课期末作业为制作一组拥有三个字页面的静态网页，故想做一个播放器出来。
恰逢昨晚偶然翻到硬盘角落里尘封的，上古之前网站使用的在线试听的页面。
对比某miku.fm，发现居然似乎是很早期之前的miku.fm改的……
而且由于那时候技术渣如狗，各种效果渣效果渣……

嘛嘛总之是由于一些原因想到写一个图像永远居中，图片永远有一侧刚好和浏览器对齐且图片比浏览器大的效果……
然后……
css写了一大堆P用没有……那么……
只好上js大法……

参考各大教程网站写了如下这么一小段……

function rechange_img () {
var bg_img = new Image();
bg_img.src = document.getElementById('bg_img').src;
var bg_img_width = bg_img.width.parseInt;
var bg_img_height = bg_img.height.parseInt;
var doc_width = document.documentElement.clientWidth;
var doc_height = document.documentElement.clientHeight;
if (bg_img_width < doc_width) {
bg_img_height = bg_img_height * doc_width / bg_img_width;
bg_img_width = doc_width;
}
if (bg_img_height < doc_height){
bg_img_width = bg_img_width * bg_img_height / doc_height;
bg_img_height = doc_height;
}
var bg_img_top = doc_height - bg_img_height;
bg_img_top /= 2;
bg_img_left = doc_width - bg_img_width;
bg_img_left /=2;
console.log(bg_img_width);
console.log(bg_img_height);
console.log(bg_img_top);
console.log(bg_img_left);
$("#bg_img").css({
"width":bg_img_width + "px",
"height":bg_img_height + "px",
"top":bg_img_top + "px",
"left":bg_img_left + "px"
})
}

window.onload = function() {
rechange_img();
}

window.onresize = function() {
rechange_img();
}

运行调试发现宽度未定义，
添加大量console.log();
并查阅相关教程后发现：
parseInt语句使用错误……
前面两行正确玩法是……

var bg_img_width = parseInt(bg_img.width);
var bg_img_height = parseInt(bg_img.height);

parseInt();
这货用途是强行转换字符串为数字……在我这个例子中用途是去掉”px”这货
然而这货并不是jQ那种属性的用法，老老实实加括号才是正解……
以上……
记录如上……
并上传相关学习文档
这里是最终修改后的效果
最后附曲一首……跑路

[广告]我觉得学渣柄需要看一下这本《Javascript权威指南》呢。 [领券链接]

0

0

相关文章

前端攻略 – JavaScript 设计模式