江南春色,斑斓梅林
<meta charset="utf-8"><meta name="referrer" content="never">
<style>
#oBlk {
margin: 30px 0 30px calc(50% - 721px);
width: 1280px;
height: 822px;
box-shadow: 3px 3px 8px black;
position: relative;
overflow:hidden;
}
#showSVG {width:1280px;background-color:lightgray;position:absolute; let:0;top:0;}
#controlBox {position:absolute; right:10px;bottom:10px;width:80px;z-index:100;}
</style>
<div id="oBlk">
<div id="showSVG" ></div>
<div id="controlBox">
<svg viewbox="0 0 100 100" >
<circle r="36" cx="50" cy="50" fill="none" stroke="red" stroke-width="4" />
<circle r="30" cx="50" cy="50" fill="none" stroke="red" stroke-width="2" />
<path fill="#f00" d="M35 35 l30 15 -30 15 z" id="playCtrl"/>
</svg>
</div>
<audio id="bjMusic" src="https://music.163.com/song/media/outer/url?id=1895365577.mp3" loop autoplay />
</div>
<script>
//-----------------------------------------------------------------------------
{
const pics = [
"https://mmbiz.qpic.cn/mmbiz_jpg/7yE00p5pNLTLHtSpYribve14lGMrrc0bPgErX6LqRt5zk9KYhTg8gWdcJ8REgNvnE01ZjDhCyEaxV6763kRwXbg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/7yE00p5pNLTLHtSpYribve14lGMrrc0bPTEPdaurFyB5MgYvogI2KkKWsK2Xq2J5ehI56wGKbAD5sCweWoF3s9Q/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/7yE00p5pNLTLHtSpYribve14lGMrrc0bPtmdkbVYvibR5fcYYb5vibTzNAXDCjhDZbqeLbicoA3ibSnaslAC11rQ9hA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/7yE00p5pNLTLHtSpYribve14lGMrrc0bPcXtLlP2YMEFw7tQ2XmicPVESQ8t3mjWpsx1nK0w2OwicibRbHgdn2urDA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/7yE00p5pNLTLHtSpYribve14lGMrrc0bPHObnnZJRybycwTnbgR6cLSrPMU3O5x0QozzPahmPX4icRKfTyuDqtSA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/7yE00p5pNLTLHtSpYribve14lGMrrc0bPnHBhrlttPFZ1qdCMaiaAPTxJM6IKoiarCvhp6ibP4MVfyNNic2CknUIbIw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/7yE00p5pNLTLHtSpYribve14lGMrrc0bPFAicGqtY5IEK9T1zN7ltQIicmDvAvCicibIYa8YGHjtqIgWvMBUc6nhZtg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/7yE00p5pNLTLHtSpYribve14lGMrrc0bPPMFkWiapoFdB2l18WdZQwNVSlTC66AibElmPQ96uB90DfAxoO8n7BfjA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/7yE00p5pNLTLHtSpYribve14lGMrrc0bPrSaoZISwIiahLdAeJaZM2hV5SbemJRqiac3QlVoP5vHUZrVa3OnsA3zw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/7yE00p5pNLTLHtSpYribve14lGMrrc0bPb9Adjj0A4CkjfTkcx6naozC4TibmSGKMVqv65I78rI0OeAJicyBN5yaQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/7yE00p5pNLTLHtSpYribve14lGMrrc0bPQNfYGh3oMia2QqLVOoD4mCBvCkoibqNNhUuWAaNmDm0xVmD1ILxzwsCg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/7yE00p5pNLTLHtSpYribve14lGMrrc0bPtGKLzLYLMj28zZjY7Pq0zzhrnB0OUI7XXdE7OwNA7qmOUr9TlHnGng/640",
];
let aniObjs = ;
let picArr = [], errCount = 0;
function genTagObj(parentNode,jsonData){let sObj=document.createElementNS("http://www.w3.org/2000/svg",jsonData.tag);for(let key in jsonData){if(key==='tag'){continue}else if(jsonData.hasOwnProperty(key)){sObj.setAttribute(key,jsonData)}};if(parentNode)parentNode.appendChild(sObj);return sObj};
let getPictureSize = (url,pIdx) => {
let img = new Image();
img.onerror = () => {
console.log(url+" 图片加载失败，请检查url是否正确");
errCount++;
};
img.onload = () => {
picArr.push({'index':pIdx, 'url':url, 'width':img.width, 'height':img.height});
img.onload=null;//避免重复加载
}
img.src = url;
}
let dataReady = ()=> {
if(picArr.length != (pics.length - errCount)) setTimeout(dataReady,50);
else {
picArr.sort(function(a, b) {
return (a.index - b.index);
});
const viewWidth = 1680, viewHeight = 1080;
let mysvg = genTagObj(null ,{'tag':'svg', 'id':'sObj', 'xmlns:xlink':"http://www.w3.org/1999/xlink" ,'xmlns':"http://www.w3.org/2000/svg", 'viewBox':`0 0 ${viewWidth} ${viewHeight}`});
let gObj = genTagObj(mysvg ,{'tag':'g', 'transform':`rotate(-90)`});
picArr.forEach((pic, idx) => {
let beginStr = idx == 0 ? `0; ep${picArr.length-1}.end` : `ep${idx - 1}.end-1.5`;
//console.log(viewWidth-pic.height);
let imgObj = genTagObj(gObj ,{'tag':'image', 'xlink:href':pic.url, 'width':pic.width, 'height':pic.height, 'opacity':0, 'x':-pic.width, 'y':0,'preserveAspectRatio':"none"});
let aniObj = genTagObj(imgObj,{'tag':'animate','id':`bp${idx}`, 'attributeName':'opacity', 'from':0, 'to':1, 'dur':3, 'begin':beginStr, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'id':`mp${idx}`, 'attributeName':'y', 'from':0, 'to':viewWidth-pic.height, 'dur':(pic.height - viewWidth) / 100, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'id':`np${idx}`, 'attributeName':'y', 'from':viewWidth-pic.height, 'to':0, 'dur':(pic.height - viewWidth) / 100, 'begin':`mp${idx}.end + 3`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate','id':`ep${idx}`, 'attributeName':'opacity', 'from':1, 'to':0, 'dur':3, 'begin':`np${idx}.end+2`, 'fill':'freeze'});
});
showSVG.innerHTML = mysvg.outerHTML;
sObj.addEventListener('mouseover', () => {sObj.pauseAnimations();});
sObj.addEventListener('mouseout', () => {sObj.unpauseAnimations();});
/**/
}
}
pics.forEach((url,pIdx) => getPictureSize(url, pIdx));
dataReady();
//-----------------------------------------------------------------------------
const pausePath = "M35 35 h12 v30 h-12 z m18 0 h12 v30 h-12 z";
const playPath = "M35 35 l30 15 -30 15 z";
const musicObj = bjMusic;
playCtrl.onclick = () => musicObj.paused
? (musicObj.play()) : (musicObj.pause());
musicObj.addEventListener('play', () => {playCtrl.setAttribute('d', pausePath); sObj.unpauseAnimations();});
musicObj.addEventListener('pause', () => {playCtrl.setAttribute('d', playPath), sObj.pauseAnimations();});
}
</script>
这么多淡入淡出的长景图，每幅图图还是左右移动的，鼠标触碰还能暂停，可以让仔细欣赏梅的秀丽{:4_199:} 梅花似花的海洋一般，掩映着其中的亭台楼阁。这场景太美了。若能进入画中，登楼赏花，那感觉一定好极了，弄得好想找个地方去赏梅啊，这么美的初春岂可辜负{:4_199:} 真的美翻了，美醉了，感谢难难带来的美好视听享受{:4_199:} 移动场景美不胜收。 江南好，江南景色美如画。怎不爱江南！{:4_199:} 红影 发表于 2025-2-24 13:37
这么多淡入淡出的长景图，每幅图图还是左右移动的，鼠标触碰还能暂停，可以让仔细欣赏梅的秀丽
长图不好处理只好让它左右摇摆了。 红影 发表于 2025-2-24 13:40
梅花似花的海洋一般，掩映着其中的亭台楼阁。这场景太美了。若能进入画中，登楼赏花，那感觉一定好极了，弄 ...
原作了的解说词：
这里是悬浮在晨光里的水墨江南。俯瞰的园林群落，像被孩童失手打翻的八宝盒，琉璃瓦顶在薄雾中泛起粼粼青斑，蜿蜒的廊桥化作琥珀色丝线，将散落的亭台楼阁缝缀成流动的锦缎。最醒目的是那片多色梅林，粉白绛紫在黛色庭院间晕染，恍若工笔长卷上未干的彩墨。 红影 发表于 2025-2-24 13:41
真的美翻了，美醉了，感谢难难带来的美好视听享受
谢谢支持与欣赏！ 梦油 发表于 2025-2-24 14:17
移动场景美不胜收。
谢谢支持与欣赏！ 梦江南 发表于 2025-2-24 14:20
江南好，江南景色美如画。怎不爱江南！
谢谢支持与欣赏！ 起个网名好难 发表于 2025-2-24 15:59
谢谢支持与欣赏！
“难难”朋友别客气。 做的真漂亮！赞赞赞 燕归来 发表于 2025-2-24 19:07
做的真漂亮！赞赞赞
谢谢支持与欣赏！ 起个网名好难 发表于 2025-2-24 15:57
长图不好处理只好让它左右摇摆了。
能找到这么多大图的梅花绽放，真的不容易呢{:4_187:} 起个网名好难 发表于 2025-2-24 15:59
原作了的解说词：
这里是悬浮在晨光里的水墨江南。俯瞰的园林群落，像被孩童失手打翻的八宝盒，琉璃瓦顶 ...
这解说词好美啊{:4_187:} 起个网名好难 发表于 2025-2-24 15:59
谢谢支持与欣赏！
应该谢谢难难带来的好帖才是{:4_187:} 难难看了代码，太佩服了，这个长图的效果太美了{:4_199:} 好美 这个播放器也是挺喜欢的