类似这种缩略图,想给自己的网站也做一个
怎么弄才能让浏览器(比如chrome啥的),新建标签页的时候,下面不是有一堆你经常访问的网址吗,而且会有网站的截图,而百度、淘宝什么的都是一个大图片,我想问这个是用什么实现的
浏览器标签里的缩略图是怎么设置的?
答案:1 悬赏:60
解决时间 2021-03-12 22:20
- 提问者网友:若相守£卟弃
- 2021-03-12 12:52
最佳答案
- 二级知识专家网友:樣嘚尐年
- 2021-03-12 12:58
首先你要有这种比例的图片,然后直接给图片设置宽和高,也可以动态去的按比例缩放图片,例如:
//直接设置宽高的
<img src="img.jpg" style="width:120px; height:70px"/>
//按比例缩放的
<img src="img.jpg" onload="imagezoom.call(this, 600, 400)"/>
//600是你给定的最大宽度,400是给定的最大高度,这个方法会计算出相对比例的宽和高
<script type="text/javascript">
function imagezoom(new_w, new_h) {
var img = document.createElement('img');
img.src = this.src;
var src_w = img.width;
var src_h = img.height;
var zoom_w = 0, zoom_h = 0;
if (src_w > new_w || src_h > new_h) {
var scale_w = new_w / src_w;
var scale_h = new_h / src_h;
var b = scale_w < scale_h;
if (b) {
zoom_w = src_w * scale_w;
zoom_h = src_h * scale_w;
} else {
zoom_w = src_w * scale_h;
zoom_h = src_h * scale_h;
}
} else {
zoom_w = src_w;
zoom_h = src_h;
}
if (zoom_w > 130) {
this.style.marginLeft = Math.abs(new_w - zoom_w) / 2 + 'px';
this.style.marginTop = Math.abs(new_h - zoom_h) / 2 + 'px';
}
else {
this.style.marginLeft = Math.abs(new_w - zoom_w) / 2 + 'px';
//this.style.marginLeft = '0px';
this.style.marginTop = Math.abs(new_h - zoom_h) / 2 + 'px';
}
this.width = zoom_w;
this.height = zoom_h;
}
</script>
//直接设置宽高的
<img src="img.jpg" style="width:120px; height:70px"/>
//按比例缩放的
<img src="img.jpg" onload="imagezoom.call(this, 600, 400)"/>
//600是你给定的最大宽度,400是给定的最大高度,这个方法会计算出相对比例的宽和高
<script type="text/javascript">
function imagezoom(new_w, new_h) {
var img = document.createElement('img');
img.src = this.src;
var src_w = img.width;
var src_h = img.height;
var zoom_w = 0, zoom_h = 0;
if (src_w > new_w || src_h > new_h) {
var scale_w = new_w / src_w;
var scale_h = new_h / src_h;
var b = scale_w < scale_h;
if (b) {
zoom_w = src_w * scale_w;
zoom_h = src_h * scale_w;
} else {
zoom_w = src_w * scale_h;
zoom_h = src_h * scale_h;
}
} else {
zoom_w = src_w;
zoom_h = src_h;
}
if (zoom_w > 130) {
this.style.marginLeft = Math.abs(new_w - zoom_w) / 2 + 'px';
this.style.marginTop = Math.abs(new_h - zoom_h) / 2 + 'px';
}
else {
this.style.marginLeft = Math.abs(new_w - zoom_w) / 2 + 'px';
//this.style.marginLeft = '0px';
this.style.marginTop = Math.abs(new_h - zoom_h) / 2 + 'px';
}
this.width = zoom_w;
this.height = zoom_h;
}
</script>
我要举报
如以上问答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
大家都在看
推荐资讯
• 手机登qq时,显示手机磁盘不足,清理后重新登 |
• 刺客的套装怎么选啊? |