今天无意间看见一个网站，这个网站不大，页面也不多，但是我还是被它震惊了，因为它在动，没错是在动，瞬间被这个网站吸引了，怀着一颗好奇猫的心，我踏上了探索之旅，先附上链接让大家一起震惊震惊：http://pro.weltrade.com/en/
ok。动了没? 是不是duang了一分钟，我的感觉跟你一样，那首湿写得好：“威武霸气吊炸天，狂拽炫酷亮瞎眼”，请原谅我当时的情节，但是渐渐的我的理智告诉我这不神秘，毕竟这是个单纯的网页，我伸出手指按下了F12，^_^!果然不出我所料，原来是视频+图片组合出这个效果，哟西。。。废了九牛二虎之力我download下了网站资源，然后来重现精彩。 <!DOCTYPE html><html><head><meta charset="utf-8"><title>five-man</title><link rel="stylesheet" type="text/css" href="css/style.css" /></head><body><div class="container"><div class="center"></div></div></body></html>
css： html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font: inherit;font-size: 100%;vertical-align: baseline}html {line-height: 1}ol, ul {list-style: none}table {border-collapse: collapse;border-spacing: 0}caption, th, td {text-align: left;font-weight: normal;vertical-align: middle}q, blockquote { quotes: none}q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none}a img { border: none}article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block}html,body{height: 100%;font:14px/1.4 "Lucida Grande", "Helvetica", "Arial", "Verdana", "sans-serif"}.container{height: 100%;overflow: hidden}.container{background: url("../images/home.jpg") no-repeat center center;background-size: 100% auto}.container .center{width: 66.77809%;height:100%;margin: 0 auto;}写好代码结构开始插入5个男人,只是这五个男人是以视频的方式出现： <body><div class="container"><div class="center"><div class="man01"><video src="src/home.mp4"></video></div><div class="man02"><video src="src/home1-up.mp4"></video><video class="down"src="src/home1-down.mp4"></video></div><div class="man03"><video src="src/home2.mp4"></video></div><div class="man04"><video src="src/home3.mp4"></video></div><div class="man05"><video src="src/home4.mp4"></video></div><div class="man05"><video src="src/home5.mp4"></video></div></div></div></body> 使用css分别将五个男人精确的和背景重合，注意是精确!!css如下: .container .center>div{position: absolute;}.container .center>div video{width: 100%;height: 100%}.container .center>div.man01{width:26.30769%;left: 2%;top: 27.5%}.container .center>div.man02{width:12.76923%;left: 25.69231%;top: 19.1%}.container .center>div.man02 .down{width:71.08434%;margin-left: 21.68675%}.container .center>div.man03{width:15.23077%;left: 40%;top:18.4%}.container .center>div.man04{width:19.53846%;left: 56.1%;top: 40%}.container .center>div.man05{width:24.46154%;left: 82.5%;top: 13.9%}接下来该js出马了，只需要在鼠标略过的时候播放它就OK了，这里为了方便我使用了jQuery!
当然，播放video的方法在这里《html5-video标签》。 $(function(){$(".center div").on("mouseover",function(){$(this).find("video").each(function(){this.play();})})})至此该特效能看出点效果，当然还有很多问题没有考虑全面，后续再进行调整。
最后附上体验地址：http://lediaos.com/demos/five-man/index.html
如果有兴趣的同学可以点击这里下载文件!
原文：http://lediaos.com/128.html 作者：liyong |
小黑屋|在路上
( 蜀ICP备15035742号-1 ) 
GMT+8, 2025-5-6 15:45
Copyright 2015-2025 djqfx
