<!DOCTYPE html>                              <!--申明文档类型：html-->

<html lang="en">                               <!--html 根标签 language--en:english--'zh-CN'中文简体-->

<head>                                              <!--网页头部-->

<meta charset="UTF-8">                     <!--字符集：UTF-8编码-->

<meta name="Generator" content="EditPlus">

<meta name="Author" content="千寻">                         <!--作者-->

<meta name="Keywords" content="千寻博客，博客">        <!--关键词-->

<meta name="Description" content="">                          <!--描述-->

<title>UR官网特效</title>                                                               <!--网页标题-->

</head>

<!--css 层叠样式-->

<style>

*{/*通配符*/

margin:0;                                     /*外边距*/

padding:0;                                    /*内边距*/

}

#box{

width:1017x;                                  /*宽：1018像素*/

height:523px;                                 /*高：523像素*/

border:1px solid red                        /*边框：边框大小 直线 颜色*/

margin:100px auto;                        /*外边距：顶部距离*/

position:relative;                            /*定位：相对定位*/

}

/*在页面当中有一个ID命名叫box的标签，下方ul*/

#box ul{

width:100%

height:100%;

border:1px solid red;

position:absolute;                               /*定位：绝对定位 参考定位父级 */

top:0;

}

#box ul li{

list-style:none;/*列表样式：无*/

float:left;/*左浮动*/

width:337px;

height:113px;

border:1px solid white;

position:relative;/**/

}

#box ul li p{

/*

top等，方位词要与定位连用

*/

position:absolute;

top:10px;

left:10px;

color:white;/*文字颜色*/

}

#box ul li .logo{

width:80px;

　　　　height:60px;

position:relative;

left:-40px;

opacity:1;

}

#box ul li img{

opacity:0;/*0完全透明 1完全不透明*/

}

</style>

<body>                                                                    <!--网页主体：结构 可视化区域 双标签-->

<div id="box">                                                     <!--父级-->

<img width='100%' scr="images/bg1.jpg" />                        <!--img图片标签 src="路径"-->

<ul id="oUL">                       <!--ul无序列表标签-->

<li>

　　　　　　　　　　<img class="logo" width=100% scr="images/1.jpg" />

<>

</li>

<li>

<img width=100% scr="images/2.jpg" />

<p>青春YOUTH</p>

</li>

<li>

　　　　　　　　<img width=100% scr="images/3.jpg" />

<p>青春YOUTH</p>

　　         </li>

<li>

　　　　　　　　　　<img width=100% scr="images/4.jpg" />

　                         <p>青春YOUTH</p>　　　　　

</li>

<li>

　　　　　　　　　　<img width=100% scr="images/5.jpg" />

　　　　　　          <p>青春YOUTH</p>

　　　　　　　</li>

<li>

　　　　　　　　　　<img width=100% scr="images/6.jpg" />

　　　　　　　　　　<p>青春YOUTH</p>

　　　　　　</li>

<li>

　　　　　　　　　　<img width=100% scr="images/7.jpg" />

　　　　　　            <p>青春YOUTH</p>

　　　　　　　</li>

<li>

　　　　　　　　　　　<img width=100% scr="images/8.jpg" />

　　　　　　　　　　　<p>青春YOUTH</p>　　　　　　　

　　　　　　 </li>

<li>

　　　　　　　　　　<img width=100% scr="images/9.jpg" />

　　　　　　　　　　<p>青春YOUTH</p>

　　　　　　　</li>

</div>

<script>

/在文档中获取元素，通过ID名（“”）/

//var oBox=document.getElementByID('box');

//在文档中获取元素，通过标签

var a=document.getElementsByTagName('img');

var arr=['images/bg1','images/bg2.jpg'];//数组

num=0;

aImg[0].src=arr[num];

setInterval(function(){

num=num++;

if(num==2){

num=0;

}

aImg[0].src=arr[num];

},2000);//定时器  每1000毫秒执行一次

for(var i){

aLi[i.onmouseover=function(){//鼠标滑入

aLi[0].style.opacity=1;aLi

}

</script>

</body>

</html>

UR官网特效的更多相关文章

  1. 一款仿PBA官网首页jQuery焦点图的切换特效

    一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...

  2. 一款jQuery仿海尔官网全屏焦点图特效代码

    一款jQuery仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效. 当焦点图切换时,下方的三块小图也相对应的进行切换.并且特效还兼容头疼的IE6.赶快去和谐了它吧! 适用浏览器: ...

  3. three.js的wave特效（ivew官网首页波浪特效实现）

    查看效果请访问:https://521lbx.github.io/Web3D/index.html公司的好几个vue项目都是用ivew作为UI框架,所以ivew官网时不时就得逛一圈.每一次进首页都会被 ...

  4. 基于jQuery仿迅雷影音官网幻灯片特效

    分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览   源码下载 实现的代码. html ...

  5. [WPF] 抄抄超强的苹果官网滚动文字特效实现

    1. 前言 今天 ChokCoco 大佬发布了一篇博客 超强的苹果官网滚动文字特效实现,iPhone 我是买不起的,但不妨碍我对抄特效感兴趣,正好我这周安排的工作已经完成了,于是有空练练手实现了一个 ...

  6. OpenLayers 官网例子的中文详解

    https://segmentfault.com/a/1190000009679800?utm_source=tag-newest 当你希望实现某种功能的时候,即使你对 openlayers 几乎一窍 ...

  7. 千呼万唤始出来，微软Power BI简体中文版官网终于上线了，中文文档也全了。。

    前几个月时间,研究微软Power BI技术,由于没有任何文档和资料,只能在英文官网瞎折腾,同时也发布了英文文档的相关文章:系列文章,刚好上周把文章发布完,结果简体中文版上线了.哈哈,心里有苦啊,早知道 ...

  8. Yeoman 官网教学案例：使用 Yeoman 构建 WebApp

    STEP 1:设置开发环境 与yeoman的所有交互都是通过命令行.Mac系统使用terminal.app,Linux系统使用shell,windows系统可以使用cmder/PowerShell/c ...

  9. 一键生成APP官网

    只需要输入苹果下载地址,安卓市场下载地址,或者内测下载地址,就能一键生成APP的官网,方便在网上推广. 好推APP官网 www.hotapp.cn/app

随机推荐

  1. java集合框架——Map

    一.概述 1.Map是一种接口,在JAVA集合框架中是以一种非常重要的集合.2.Map一次添加一对元素,所以又称为“双列集合”(Collection一次添加一个元素,所以又称为“单列集合”)3.Map ...

  2. Recent plan + Summary (two weeks)

    Plan: Homework: B365 (next week) B392, B335 Interview: Friday, do the assignment Thursday Summary: I ...

  3. 20145238-荆玉茗 《Java程序设计》第4周学习总结

    20145238 <Java程序设计>第4周学习总结 教材学习内容总结第六章 继承与多态 6.1.1 ·继承基本上就是避免多个类间重复定义共同行为. 在游戏中会有很多程序代码重复的片段,这 ...

  4. Maven项目导出可执行jar

    配置文件中添加插件 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>m ...

  5. 2、SpringBoot+MybatisPlus整合-------BaseCRUD

    开发工具:STS 代码下载链接:GitHub管理代码 版本: Springboot:1.5.14.RELEASE 使用2.0以上的Springboot,会报出一些异常.欢迎知道异常原因的大牛解惑. M ...

  6. Ubuntu 16.04安装docker（2018年最新）

    参考https://blog.csdn.net/bingzhongdehuoyan/article/details/79411479 http://www.cnblogs.com/lighten/p/ ...

  7. HTTP:地址栏输入url到显示页面的步骤

    在浏览器地址栏输入URL 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤 如果资源未缓存,发起新请求 如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证. 检验 ...

  8. lintcode_114_不同的路径

    不同的路径   描述 笔记 数据 评测 有一个机器人的位于一个 m × n 个网格左上角. 机器人每一时刻只能向下或者向右移动一步.机器人试图达到网格的右下角. 问有多少条不同的路径? 注意事项 n和 ...

  9. java高并发之CountDownLatch，CyclicBarrier和join

    晚上打车回家,在车上看到一篇文章<22岁大学生获谷歌天价Offer,年薪千万!>,讲的是印度一个22岁大学生多次参加ACM大赛,开源多个项目,以非常牛逼的履历通过了谷歌的AI测试,斩获谷歌 ...

  10. Servlet学习笔记04——什么是重定向，servlet生命周期？

    1.重定向 (1)什么是重定向? 服务器通知浏览器访问一个新的地址. 注: 服务器可以通过发送一个302状态码及一个 Location消息头(该消息头的值是一个地址,一般 称之为重定向地址)给浏览器, ...