临近期末,某专业课期末作业为制作一组拥有三个字页面的静态网页,故想做一个播放器出来。
恰逢昨晚偶然翻到硬盘角落里尘封的,上古之前网站使用的在线试听的页面。
对比某miku.fm,发现居然似乎是很早期之前的miku.fm改的……
而且由于那时候技术渣如狗,各种效果渣效果渣……
嘛嘛总之是由于一些原因想到写一个图像永远居中,图片永远有一侧刚好和浏览器对齐且图片比浏览器大的效果……
然后……
css写了一大堆P用没有……那么……
只好上js大法……
参考各大教程网站写了如下这么一小段……
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 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语句使用错误……
前面两行正确玩法是……
1 2 | var bg_img_width = parseInt(bg_img.width); var bg_img_height = parseInt(bg_img.height); |
parseInt();
这货用途是强行转换字符串为数字……在我这个例子中用途是去掉"px"这货
然而这货并不是jQ那种属性的用法,老老实实加括号才是正解……
以上……
记录如上……
并上传相关学习文档
这里是最终修改后的效果
最后附曲一首……跑路
[广告]我觉得学渣柄需要看一下这本《Javascript权威指南》呢。 [领券链接]
有点帅啊 在玩前端么?
既然是期末作业。。。我们这学期学的就是css和HTML。。。前端挺想玩的但是更想玩后端
parseInt 是函数(方法)呀 不是属性~~~
所以才是错误用法示范,外加快看在线工具里面的Handle!fm,那个是我的期末作业
然而我现在正在开发一个二期需求,炸出了一大堆遗留BUG,我是填坑小能手
程序语言是?外加乃的论坛什么时候重开
啊不对,博客
开着 ,只是太久不更新 首页重定向到一个其他页面了 我是java开发
两年后一起喝咖啡吧???