Re: [问题] 如何把这个改成RWD?

楼主: nottt (无)   2016-12-03 02:16:20
半夜睡不着试了一下,看有没有高手提出更好的解法
https://jsfiddle.net/uqe6s8n2/
思考方向:
‧div#slideshow的高度会变动
原始范例的jquery,是将第一个div淡出、第二个淡入,然后把第一个塞到最后面
故div的顺序会变动
‧图片高度会变动
原始范例利用 固定高度(height:240px)和溢位隐藏(overflow: hidden)
避免图片高度超过版面的问题
解决方式:
每次div顺序被调整后,就把#slideshow的高度设定成第一个div下的图片高度
$('#slideshow').css("height", $('#slideshow > div:first>img').height());
优点:
原始范例基本上不需要改动,只要补上计算用的js就搞定了
缺点:
如果很喜欢拉萤幕视窗的话,在js被触发前高度都不会被重新计算
※ 引述《virgin7 ()》之铭言:
: 大家晚安
: 对RWD一直有个疑问,请看这个范例:https://jsfiddle.net/t79o7rqy/
: 一个简单的幻灯片效果,如果要改成RWD
: 例如把 #slideshow 固定宽高改成 width: 50%; height: auto;
: 问题来了:
: 1.#slideshow高度设成auto或不设高度,会因为里头div设了绝对定位而变成高度为零
: 就看不到任何图片了!如果设一个固定高度,RWD的宽度变动时高度却固定
:  效果就不对(不懂意思可以拉动视窗试试)
: 2.要如何在幻灯片宽高自动变动下,底下的"内容内容内容"文字能贴著幻灯片区块
:  因为slide中的图片都用绝对定位
:  那底下的"内容内容"就会往上跑而不能贴著幻灯片下方了
: 以上,感谢前辈们指导,其实类似问题常出现,希望能知道怎么做才好,感思~
: 范例出处:
: https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/
作者: yulymoon (Yuly)   2016-12-03 10:40:00
...写一个div 再用一个div width:100% paddingtop:100%高度就永远固定了,图片用背景cover解决

Links booklink

Contact Us: admin [ a t ] ucptt.com