web/olddwProgram/tu.md

多玩图库

开发人员（维护）

百醇，定造（后端接口）

目录

dw_f2e\amkit\p\tu

需求（2019/07）

需求: 商务需求（背景图要适配屏幕大小显示）

思路: 监听页面resize事件，动态调整背景图background-size 和页面主内容的宽度（有设下限宽度）

测试

随便复制一个图库详情页源代码，在本地测试 http://tu.duowan.com/gallery/139208.html#p1

//视图适配不同尺寸的屏幕
	var viewWidth = {
		viewWidthTimer : null,
		$window : $(window),
		$show : $("#show")  ,
		$imageShow:$("#image-show"),
		$imageShowImg:$("#image-show .show-img"),
		$main:$("#main"),
		$conR:$("#con-r"),
		isFirstInitViewWidth : false,
		initViewWidth: function(){
			var winWidth = this.$window.width();
			var scaleRate = (winWidth/1760).toFixed(2);
			var minRate = 0.88;
			var originalWidth = 990;

			if(scaleRate>=1) scaleRate=1;
			scaleRate = scaleRate<minRate? minRate : scaleRate;

			var finnalWidth = originalWidth*scaleRate;
			if(winWidth<1760){
				if(!this.isFirstInitViewWidth) {
					this.isFirstInitViewWidth = true;
					$("head").append("<style>.tu-cebian-da{transform-origin:top;background-size:100%!important}</style>");
				}

				this.$imageShow.css({
					'width': finnalWidth+'px'
				})
				this.$main.css({
					'width': finnalWidth+'px'
				})
				this.$imageShowImg.css({
					'width': finnalWidth+'px'
				})
				this.$conR.css({
					'width': finnalWidth-352+'px'
				})
				this.$show.css({
					'background': '#202020',
					'width': finnalWidth+'px',
					'overflow': 'hidden'
				})
			}
		},
		init:function(){
			var _this = this;

			if(!'transform' in this.$show[0].style) return

			this.$window.on('resize',function(){
				clearTimeout(_this.viewWidthTimer)
				_this.viewWidthTimer = setTimeout(function(){
					_this.initViewWidth()
				},200);
			})
			_this.initViewWidth()
		}
	};

	viewWidth.init();

注意

由于当时和评论的档期一起，不能发布这块资源，所以代码直接给定造在页面输出了，后续可调整为前端js里面增加，页面删除

需求（2018）

需求: 增加爆笑视频栏目，在原来图片轮播的基础上，加个播放按钮，用户点击播放

思路: 看源码解决

访问地址：

http://tu.duowan.com/gallery/139208.html#p1

测试：方法采用了 多玩虎牙旧项目文档下提供的调试方式2

需求（2017）

h5列表页和详情页添加广告位，涉及广告预览上报和点击上报