- 浏览: 329292 次
- 性别:
- 来自: 上海
文章分类
最新评论
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Strict.dtd">
<html lang="en">
<head>
<style>
<!--
body{ margin:1% 0 0 1%; font-family:Arial,Verdana,Helvetica,sans-serif;font-size:75%;}
img{ border:0; }
a:link, a:visited, a:active{ text-decoration:none;color:#0a84c1;font-size:1em;font-weight:bold; }
a:hover{ text-decoration:none;color:#f59000;font-size:1em;font-weight:bold; }
#hotel_display{ background:#fff; width:269px; padding:10px;}
.title_top{ background:url(http://www.iteye.com/upload/picture/pic/12025/b5e42408-d9d1-3c50-9cad-b719476e9c4d.gif?1208313629) no-repeat;padding:8px 0 8px 25px; }
.title_btm{ background:url(http://www.iteye.com/upload/picture/pic/12023/7f74e0a9-e25d-3a08-beb5-33179fd4f058.gif?1208313628) no-repeat;padding:8px 0 8px 25px;color:#f59000;font-weight:bold; }
-->
</style>
<script type="text/javascript">
<!--
var idxCurrentPromo = 0;
var blnRotation = false;
var numOpenPromoHeight = 190;
var numSlideFactor = .25;
var numRotationTime = 5000;
function initPromos() {
switchPromos(idxCurrentPromo, blnRotation);
}
function QSinfo(link, strIDs, MoreQS) {
var strHREF = "";
if (strIDs && strIDs != "") strHREF = strIDs;
if (MoreQS && MoreQS != ""){
strHREF = (strHREF!="")? strHREF + "&" + MoreQS : MoreQS;
}
if ((strHREF != "") && (link.href.indexOf(".") > 0)) {
if (link.href.indexOf("?") < 0) link.href += "?" + strHREF;
else link.href += "&" + strHREF;
}
return(0);
}numRotationTime
function checkTravelYear(vYear){
var intYear = parseInt("0" + String(vYear),10);
if(intYear < 100) {intYear += 2000;}
return(intYear);
}
function lpad(n, len, ch) {
var s = new String(n);
while (s.length < len) s = ch + s;
return s;
}
function switchPromosByProduct(productForm, keepRotating) {
for (var i=0; i<promoCount; i++) {
var strThisForm = "search_" + arrPromoProducts[i];
if (productForm == strThisForm) {
switchPromos(i, keepRotating);
i=promoCount;
}
}
}
function switchPromos(promoNumber, keepRotating) {
var endRotationHack = true;
var idxOldPromo = idxCurrentPromo;
idxCurrentPromo = new Number(promoNumber);
if (blnRotation) {
if (!keepRotating) {
blnRotation = false;
} else {
var idxNextPromoR = (idxCurrentPromo + 1) % promoCount;
setTimeout('switchPromos(' +idxNextPromoR + ',true)',numRotationTime);
}
} else {
if (keepRotating) {
endRotationHack = false;
}
}
if(endRotationHack) {
for (var i=0; i<promoCount; i++) {
if (i == idxOldPromo) {
document.getElementById("promo" +i+ "_on").style.height = "190px";
document.getElementById("promo" +i+ "_on").style.display = "block";
document.getElementById("promo" +i+ "_on_img").style.height = "190px";
document.getElementById("promo" +i+ "_on_img").style.display = "block";
} else {
document.getElementById("promo" +i+ "_on").style.height = "0px";
document.getElementById("promo" +i+ "_on").style.display = "none";
document.getElementById("promo" +i+ "_on_img").style.height = "0px";
document.getElementById("promo" +i+ "_on_img").style.display = "none";
}
if (i == idxCurrentPromo) {
document.getElementById("promo" +i).style.display = "none";
document.getElementById("promo" +i + "_exp").style.display = "block";
} else {
document.getElementById("promo" +i).style.display = "block";
document.getElementById("promo" +i + "_exp").style.display = "none";
}
}
if (parseInt(idxCurrentPromo) != parseInt(idxOldPromo)) {
animatePromos(idxOldPromo, idxCurrentPromo);
}
}
}
function animatePromos(numOldPromo, numNewPromo) {
var objNewPromoOpen = document.getElementById("promo" + numNewPromo.toString() + "_on");
var objNewPromoOpenImg = document.getElementById("promo" + numNewPromo.toString() + "_on_img");
objNewPromoOpen.style.display = "block";
objNewPromoOpenImg.style.display = "block";
startPromoAnimation = setInterval("playAccordian(" +numOldPromo +"," +numNewPromo + ")",5);
}
function playAccordian(numOldPromo, numNewPromo) {
var objOldPromoOpen = document.getElementById("promo" + numOldPromo.toString() + "_on");
var objOldPromoOpenImg = document.getElementById("promo" + numOldPromo.toString() + "_on_img");
var objNewPromoOpen = document.getElementById("promo" + numNewPromo.toString() + "_on");
var objNewPromoOpenImg = document.getElementById("promo" + numNewPromo.toString() + "_on_img");
if ((parseInt(objOldPromoOpen.style.height) > 3) && (parseInt(objOldPromoOpenImg.style.height) > 3) && (parseInt(objNewPromoOpen.style.height) < numOpenPromoHeight-2) && (parseInt(objNewPromoOpenImg.style.height) < numOpenPromoHeight-2)) {
objOldPromoOpen.style.height = (parseInt(objOldPromoOpen.style.height) - parseInt(numOpenPromoHeight*numSlideFactor)).toString() + "px";
objOldPromoOpenImg.style.height = (parseInt(objOldPromoOpenImg.style.height) - parseInt(numOpenPromoHeight*numSlideFactor)).toString() + "px";
objNewPromoOpen.style.height = (parseInt(objNewPromoOpen.style.height) + parseInt(numOpenPromoHeight*numSlideFactor)).toString() + "px";
objNewPromoOpenImg.style.height = (parseInt(objNewPromoOpenImg.style.height) + parseInt(numOpenPromoHeight*numSlideFactor)).toString() + "px";
} else {
objOldPromoOpen.style.height = "0px";
objOldPromoOpen.style.display = "none";
objOldPromoOpenImg.style.height = "0px";
objOldPromoOpenImg.style.display = "none";
objNewPromoOpen.style.height = numOpenPromoHeight+"px";
objNewPromoOpenImg.style.height = numOpenPromoHeight+"px";
clearInterval(startPromoAnimation);
}
}
-->
</script>
</head>
<body style="background:#a5a5a5;">
<script language="JavaScript" type="text/javascript">
<!--
blnRotation = true;
promoCount = 3;
var arrPromoProducts = ["htl","air","vac"];
-->
</script>
<div id="hotel_display">
<div style="display: none;" id="promo0" class="title_top"><a href="javascript:switchPromos(0, false);">hotels - up to half off</a></div>
<div style="display: block;" id="promo0_exp" class="title_btm"><span>hotels - up to half off</span></div>
<div style="height: 190px; display: block;" id="promo0_on" class="openpromo">
<a onclick="switchPromos(0, false);QSinfo(this, 'irefid=HPDEALS1&irefclickid=nyop_hotels');" href="#"><img style="height: 190px; display: block;" id="promo0_on_img" src="images/img1.jpg" alt="title1" height="190" width="267"></a>
</div>
<div style="display: block;" id="promo1" class="title_top"><a href="javascript:switchPromos(1, false);">spring deals on air + car</a></div>
<div style="display: none;" id="promo1_exp" class="title_btm"><span>spring deals on air + car</span></div>
<div style="height: 0px; display: none;" id="promo1_on" class="openpromo">
<a onclick="switchPromos(1, false);QSinfo(this, 'irefid=HPDEALS2&irefclickid=air+car_spring');" href="#"><img style="height: 0px; display: none;" id="promo1_on_img" src="images/img2.jpg" alt="title2" height="190" width="267"></a>
</div>
<div style="display: block;" id="promo2" class="title_top"><a href="javascript:switchPromos(2, false);">save up to $150 instantly</a></div>
<div style="display: none;" id="promo2_exp" class="title_btm"><span>save up to $150 instantly</span></div>
<div style="height: 0px; display: none;" id="promo2_on" class="openpromo">
<a onclick="switchPromos(2, false);QSinfo(this, 'irefid=HPDEALS3&irefclickid=oneweek_vpsale');" href="#"><img style="height: 0px; display: none;" id="promo2_on_img" src="images/img3.jpg" alt="title3" height="190" width="267"></a>
</div>
</div>
<script type="text/javascript" language="JavaScript">
<!--
initPromos();
// -->
</script>
</body>
</html>
- hotel.rar (122.9 KB)
- 下载次数: 402
评论
图片高度好像不能调整啊
可以调整,img标签里width和height属性
楼主MM厉害啊,我想用一下能不能用呢?
当然可以,不过这个代码太多了,看看jquery写的吧,http://ice-cream.iteye.com/admin/blogs/325305,要简单很多
发表评论
-
如何去掉链接虚线框
2011-10-08 13:58 1715链接的虚线框影响整体风格,我们在工作经常会将它去掉,而采用 ... -
Javascript获得当前地址栏url
2011-02-24 10:36 1389URL即:统一资源定位符 (U ... -
文字滚动
2009-10-24 09:51 1356三种文字滚动效果: 向上滚动 类似marque ... -
会动的眼睛
2009-07-09 23:31 1657<style type="text/css ... -
页面输出时一些常用的小技巧(二)
2009-05-16 22:42 1264页面输出时一些常用的 ... -
keycode值和chr码值
2009-01-09 14:44 2441keycode 8 = BackSpace BackSp ... -
展示图片的例子1
2008-12-01 17:08 1429很炫的展示图片的效果,用纯javascript写的,逻 ... -
二级菜单事件
2008-11-19 23:34 1101<!DOCTYPE html PUBLIC " ... -
删除空白子节点
2008-11-19 20:57 1805<!DOCTYPE html PUBLIC " ... -
javaScript DOM特性/方法
2008-04-27 12:28 3041❑ DOM的核心: Node 由于 ... -
分页效果
2008-04-17 18:40 1486还不错的分页效果,暂时用不上,收藏一下,见附件 -
动画效果打开关闭图层
2008-04-16 13:45 1778<html xmlns="http://www ... -
实用的js动画
2008-04-03 17:06 3796<!DOCTYPE html PUBLIC " ... -
用js给input传值
2008-03-27 18:06 5486<style> #name{ float:left ... -
常用js语句——大全
2008-03-16 17:02 29421.document.write(""); ... -
用javascript来充实文档的内容
2008-03-06 18:35 1669<!DOCTYPE html PUBLIC " ... -
javascript美术馆改进版
2008-03-04 14:31 2070<!DOCTYPE html PUBLIC " ... -
javascript美术馆
2008-02-29 15:56 1319<!DOCTYPE html PUBLIC " ... -
js日历
2008-02-26 22:32 1628<html> <head> <t ... -
javascript的IE和Firefox兼容性问题
2008-02-25 22:12 1313以 IE 代替 Internet Explorer,以 MF ...
相关推荐
这款"图片3D循环滚动-很炫-很亮效果(源码)"就是一种创新的展示技术,它利用3D特效来增强用户体验,使图片展示更加生动、吸引人。下面将详细介绍这个特效的实现原理和相关技术。 首先,我们要理解3D效果是如何在...
**jQuery超炫图片切换效果详解** 在Web开发中,动态且引人注目的图片展示是提升用户体验的关键元素之一。jQuery库以其简洁的API和强大的功能,成为实现这种效果的首选工具。本文将深入探讨如何利用jQuery创建一个...
"炫酷的循环翻页"是Android应用中常见的一种动态效果,它通常用于展示一系列内容,如图片轮播、推荐列表等。这种效果通过结合ViewPager组件和自定义适配器实现,使得用户可以无限制地前后滑动页面,带来流畅且连贯的...
1. **轮播图**:轮播图是网页中最常见的图片展示方式之一,通过定时切换图片或响应用户点击事件来实现多张图片的循环展示。JavaScript可以轻松地控制图片的切换动画,如淡入淡出、左右滑动等。 2. **缩放和旋转效果...
在网页设计中,图片切换效果是提升用户体验的重要手段之一,jQuery作为一个强大的JavaScript库,提供了丰富的功能来实现这种效果。本文将深入探讨如何使用jQuery创建超炫的图片切换效果。 首先,我们需要理解jQuery...
这个“很炫的图片跑马灯功能”是一个包含代码和样式的解决方案,它能让你的图片以循环滚动的方式呈现,营造出一种动态流动的效果。 在实现图片跑马灯功能时,通常会涉及到以下几个关键知识点: 1. **HTML 结构**:...
本文将深入探讨如何实现一个具备自动滚屏、无限循环、炫酷翻页效果以及智能暂停功能的广告轮播器。 首先,我们需要了解Android中的ViewFlipper或者ViewPager这两个核心组件。ViewFlipper是一个方便的视图切换工具,...
// 循环回到第一张图片 } } setInterval(scrollImages, 3000); // 每3秒滚动一次 }); ``` 以上代码将每3秒自动滚动一次图片,图片从底部向上移出视区,然后移到队列末尾重新出现,形成连续滚动的效果。 四、...
6. **动画库支持**:有很多优秀的JavaScript库,如jQuery、React、Vue等,提供了丰富的动画和过渡效果,可以帮助开发者快速实现复杂的图片展示特效。 7. **自定义事件**:JavaScript允许开发者自定义事件,比如当...
跑马灯效果本质上是通过改变View的布局参数,使内容看起来在视图区域内循环滚动。自定义View时,我们需要重写onDraw()方法,绘制文字或图片,同时通过定时器或者Handler更新View的位置。 2. 代码实现 创建一个继承...
如果到达了最后一张图片,可以无缝地返回到第一张,实现循环滑动。 4. **处理边界条件**:当图片滑出屏幕边界时,需要进行适当的处理,比如切换到下一张图片或者重新开始。 5. **定时器与事件驱动**:可以使用...
在本文中,我们将深入探讨如何使用Silverlight技术来创建一个超炫超酷的图片旋转动画效果。Silverlight是Microsoft推出的一种强大的RIA(Rich Internet Application)开发框架,它允许开发者创建丰富的交互式用户...
在JavaScript(简称JS)编程中,图片切换效果是一种常见的网页动态设计技术,它极大地提升了用户体验,使得静态的图片展示变得更加生动有趣。本篇文章将深入探讨几种常用的JS图片切换效果及其实现方法。 首先,我们...
3. **切片图片**:为了实现爆炸效果,我们需要将图片切割成多个小块。这可以通过在canvas上定义一个矩形网格,然后对每个网格内的像素进行复制到新的canvas或数组中。 4. **计算飞散方向**:每个切片在爆炸时应有...
这里,`switchImage`函数负责切换图片,`setInterval`则用来定时调用这个函数,实现自动循环。 此外,为了提供更好的用户体验,我们可能还需要添加一些额外功能,如鼠标悬停暂停、点击按钮手动切换等。这可以通过...
`infinite`关键字使得动画无限循环。 接下来,我们来谈谈如何在网页中实现文字逐个出现的效果。这主要通过JavaScript来完成。可以使用JavaScript的定时器(setTimeout或setInterval)配合DOM操作,将每个字符作为一...