UR官网特效
<!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官网特效的更多相关文章
- 一款仿PBA官网首页jQuery焦点图的切换特效
一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...
- 一款jQuery仿海尔官网全屏焦点图特效代码
一款jQuery仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效. 当焦点图切换时,下方的三块小图也相对应的进行切换.并且特效还兼容头疼的IE6.赶快去和谐了它吧! 适用浏览器: ...
- three.js的wave特效(ivew官网首页波浪特效实现)
查看效果请访问:https://521lbx.github.io/Web3D/index.html公司的好几个vue项目都是用ivew作为UI框架,所以ivew官网时不时就得逛一圈.每一次进首页都会被 ...
- 基于jQuery仿迅雷影音官网幻灯片特效
分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览 源码下载 实现的代码. html ...
- [WPF] 抄抄超强的苹果官网滚动文字特效实现
1. 前言 今天 ChokCoco 大佬发布了一篇博客 超强的苹果官网滚动文字特效实现,iPhone 我是买不起的,但不妨碍我对抄特效感兴趣,正好我这周安排的工作已经完成了,于是有空练练手实现了一个 ...
- OpenLayers 官网例子的中文详解
https://segmentfault.com/a/1190000009679800?utm_source=tag-newest 当你希望实现某种功能的时候,即使你对 openlayers 几乎一窍 ...
- 千呼万唤始出来,微软Power BI简体中文版官网终于上线了,中文文档也全了。。
前几个月时间,研究微软Power BI技术,由于没有任何文档和资料,只能在英文官网瞎折腾,同时也发布了英文文档的相关文章:系列文章,刚好上周把文章发布完,结果简体中文版上线了.哈哈,心里有苦啊,早知道 ...
- Yeoman 官网教学案例:使用 Yeoman 构建 WebApp
STEP 1:设置开发环境 与yeoman的所有交互都是通过命令行.Mac系统使用terminal.app,Linux系统使用shell,windows系统可以使用cmder/PowerShell/c ...
- 一键生成APP官网
只需要输入苹果下载地址,安卓市场下载地址,或者内测下载地址,就能一键生成APP的官网,方便在网上推广. 好推APP官网 www.hotapp.cn/app
随机推荐
- jQuery + Stimulsoft.Report 选择gridview多行打印
jQuery + Stimulsoft.Report 报表空间打印多个ID split函数,多行ID 1. 获取选择多行ID(前台) //按钮-打印 function PrinterWorkQuali ...
- 原生Js在各大浏览器上、火狐、ie、谷歌、360等出现的不兼容问题。
1 document.getElementsByName("name") 在Ie低版本,360普通版本,以及火狐低版本不支持. 2 element.innerText 在低版本的 ...
- ring0 进程隐藏实现
最近在学习内核编程,记录一下最近的学习笔记. 原理:将当前进程从eprocess结构的链表中删除 无法被! process 0 0 看见 #include "HideProcess.h&qu ...
- April 27 2017 Week 17 Thursday
Had I not seen the sun, I could have borne the shade. 我本可以忍受黑暗,如果我不曾见过阳光. A poem by Emily Dickinson, ...
- Selenium入门7 内嵌框架iframe
如果网页内嵌iframe,那么iframe里的元素是无法直接定位的,需要使用switch_to.frame进入frame操作: 之后需要再操作页面上非嵌入在iframe里的元素,需要使用switch_ ...
- DP找最优配置,(POJ1018)
题目链接:http://poj.org/problem?id=1018 这个DP,我的头都快晕了. dp[i][j]表示取到第i个设备,宽带为j时的最小价格. 状态转移方程: dp[i][k]=min ...
- HDU(3560)成环,并查集
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3560 并查集查有几个块,修改了之前我的一个方法(用什么map),直接判断根节点的id是i的个数. 然后 ...
- Django之模型(model)中的choices字段的使用
转载自:http://quke.org/post/django-model-choices.html Django模型中的字段有个choices属性,这个属性可以提供被选数据,choices的参数是一 ...
- Oracle Like、Instr以及正则表达式
查看测试数据 select * from student; 1. like 在where字句中使用like可以达到模糊查询的效果,常用通配符如下 ▶ %: 使用 % 有三种情况 ① 字段 like ‘ ...
- dts--framework(三)
tester.py class Tester(Crb) 00. __init__(self, crb, serializer) 01.init_ext_gen(self) 02.set_re_run( ...