符合标准的似于Flash的超酷特效代码

这个特效是改成用DIV+CSS布局实现的!

<style>
*{font:normal normal 13px/1.5em "宋体"}
dl{width:200px;float:left;}
dd{margin:0;padding:0;line-height:1.8em;padding-left:3px;}
dd a{text-decoration:none;}
img{float:left;}
dd a:hover{color:#f00;}
.first{width:20px;height:190px;border:1px solid #ccc;border-left:0;float:left;text-align:center;cursor:pointer;}
.first0{width:68px;height:190px;border-left:1px solid #ccc;float:left;text-align:center;cursor:pointer;overflow:hidden;}
.second{float:left;border:1px solid #ccc;display:none;"}
</style>
<script>
function (obj){
return document.getElementById(obj);
}
function showAds(n){
for(var i=0;i<6;i++){
if(n==i){
("ads"+i).style.display="block";
}else{
("ads"+i).style.display="none";
}
}
}
</script>
<div>
<!--part0-->
<div class="first0" onmouseover="showAds(''0'')"><img src=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/20070702113533135.jpg title="" /></div>
<div class="second" style="display:block;" id="ads0" ><img src=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/20070702113533600.jpg title="" /></div>
<!--part1-->
<div class="first" onmouseover="showAds(''1'')">美丽地图</div>
<div class="second" id="ads1" >
<dl>
<dd>[上海]典范造型缘于专业
如果您总是先选择发型师,再选择美发店,那么这……</dd>
<dd><a href="#">·[广州]奥龙堡 运动起来</a></dd>
<dd><a href="#">·[广州]青鸟健身新时尚</a></dd>
<dd><a href="#">·[广州]安索瑜珈释放心灵</a></dd>
</dl>
<img src=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/20070702113534395.jpg title="" />
</div>
<!--part2-->
<div class="first" onmouseover="showAds(''2'')">非常食尚</div>
<div class="second" id="ads2" >
<dl>
<dd>[上海]露纳的"养命仙汤"进入露纳餐厅,四处看看,不论是大厅还是包房……</dd>
<dd><a href="#">·[上海]Pasti意菜香气缠绵</a></dd>
<dd><a href="#">·[上海]全罗道 享辛辣乐趣 </a></dd>
<dd><a href="#">·[上海]印度小厨 食之魅</a></dd>
</dl>
<img src="http://webdesign.chi

时间: 2024-11-05 12:13:05

符合标准的似于Flash的超酷特效代码的相关文章

9款HTML5实现的超酷特效

HTML5是HTML的升级版,HTML5有两大特点:首先,强化了 Web 网页的表现性能.其次,追加了本地数据库等 Web 应用的功能.广义论及HTML5时,实际指的是包括HTML.CSS和JavaScript在内的一套技术组合.今天我们推荐9款使用HTML5生成的特 殊效果,希望可以对大家的使用带来帮助!   HTML5 3D 翻转展示幻灯-Banner 在线演示 背景以纯白为主,3D全方位的旋转效果令人震撼,运用起来绝对是你页面的一大亮点! 一个不需要摄像装备在家也能实现的全景演示效果 在线

推荐9款HTML5实现的超酷特效 带给你全新的视角和体验

中介交易 SEO诊断淘宝客 站长团购 云主机 技术大厅 之前我们推荐了8款HTML5实现的特效和应用,今天我们带来的这9款热门的HTML5特效同样会带给你全新的视角和体验. HTML5是HTML的升级版,HTML5有两大特点:首先,强化了 Web 网页的表现性能.其次,追加了本地数据库等 Web 应用的功能.广义论及HTML5时,实际指的是包括HTML.CSS和JavaScript在内的一套技术组合.今天我们推荐8款使用HTML5生成的特殊效果,希望可以对大家的使用带来帮助! HTML5 3D

Flash制作超酷的旋转图像像册视觉效果

旋转 用Flash制作像册的教程已经很多了!这里就不在给大家罗嗦了!只要发挥自己的想象,相信自己!你能!那么超酷的旋转图像像册视觉效果就会出现.因为类似教程太多了,所以在这里不给大家详细讲解,如果你想深入研究,那么就自己下载源文件吧! 网页教学网注:这个源文件是从一个国外站点上下载来的!简单给大家讲解一下制作过程. 先看效果和源文件.(演示效果文件184K,如果您网速慢可能会多等会) 点击这里下载源文件(Flash源文件压缩包大小220K) 简单给大家说一下制作步骤. 首先修改文档属性,准备好动

Flash中超酷的菜单的制作

菜单 学以至用,方能温故而知新,下面我们一起来做一个酷酷的导航菜单吧!点这看演示效果菜单效果简析: 这个菜单主要由两个部分组成:菜单的弹出以及图片Y方向上的滚动.图片的滚动问题现在应该不是问题了(你还可以在原来的基础上自行添加一些效果,比如当鼠标放上图片上面时,图片有Zoom的效果),关键是如何设置菜单的弹出效果. 制作过程简析: 新建三个MC,MC名称分别为images.mask.navigation.在MC(images)中,把图片导入,图片竖直排列,其长度的一半对准MC场景的中心:在MC(

符合这些标准的,才能称得上“下一代超融合”!

由于下一代超融合很难去定义,许多公司都声称他们的产品是 "超融合" 型产品,但这些产品都有不同的功能和缺陷,结果就是:完全没有可比性!那么下一代超融合的标准到底是什么?   身处 IT 圈想必你对 "超融合" 这个词一定不陌生,第一代超融合产品只是超融合领域的初步尝试,举例来说,其不足包括:扩展效率差.数据优化不充分.工作负载支持少,不但存在性能缺陷.安全风险,还会形成新的管理孤岛-- 有不足才有进步!这不,性能更加完善的下一代超融合系统应运而生!! 可是,由于下一

本地检验网页是否符合标准的几种方法

标准|网页  检验网页的代码是否符合标准除了在W3C在线检验(需上传到服务器)以外,还可以在本地检验(不需上传),本文介绍的是几种在本地检验的方法.须注意的是,就算你的页面通过了检验,并不能说明页面就是符合WEB标准了. 静态网页A Real Validator主页地址:http://arealvalidator.com 使用比较麻烦. TopStylePro主页地址:http://www.bradsoft.com/ 教程:TopStyle Pro 使用技巧 UTF-8 编码的中文会乱码. Dr

符合标准的正常工作的对联广告

符合标准的正常工作的对联广告以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

Dreamweaver 8来构建符合标准的Web站点

dreamweaver|web|标准|站点 译者序:这个系列原文一共8篇文章,从普及 Web Standards 入手,讲述如何用 Dreamweaver 8 来构建符合标准的 Web ,由于原作者的此篇文章是对<Build Your Own Standards Compliant Website Using Dreamweaver 8 >(这篇文章是收费的)的摘录,所以我对内容进行了适当的删改,顺序与原文是一致的,但篇幅会有调整,特此告知.翻译水平有限,敬请谅解. 如果您正在读这篇文章,您很

Flash Professional 8超酷实例欣赏和剖析

Flash 8官方发布的消息一经推出,便吸引了无数Flasher的眼光.新版的Flash 8确实有不俗的表现,不仅提供了设计方面强大的新功能,在代码方面,也有许多新增的特性等待大家去一一挖掘.Flash 8将给我们带来焕然一新的视觉冲击,给设计者们带来更多的个人体验,它的性能更加强大,也更加专业. 国外的一些Blog站点已经陆续登出Flash 8的最新实例,下面我们就一起来欣赏Flash爱好者们使用新版Flash 8制作的最新超酷实例. 在欣赏这些实例之前,必须首先下载并安装Flash Play