可选择背景色的广告牌效果
脚本源代码：
<body>
<style>
body {background-color:#999999}
#all {width:100px; height:200px; background-color:#FFFFFF; overflow:hidden; }
#left {width:100px; background-color:#F90FF1; float:left; height:200px}
#left li {cursor:hand; font:bold 12px "Arial Black"; list-style:circle; margin-left:-10px; color:#FFFFFF}
#right {width:100px; background-color:#FFFF00; float:left; height:200px; cursor:hand;font:bold 15px "Arial Black"; color: #333333}
</style>
<script language="javascript">
function $(id) {return document.getElementById(id)}
function left(id) {
var alla= $("alla");
var right= $("right");
var alla_left=parseInt(alla.style.marginLeft);
if (alla_left==0) {
if (id==1) {right.innerHTML="#5AE9FA";;right.style.backgroundColor="#5AE9FA"}
else if (id==2) {right.innerHTML="#ADFA5A";right.style.backgroundColor="#ADFA5A"}
else if (id==3) {right.innerHTML="#F9A40F";;right.style.backgroundColor="#F9A40F"}
left_decrease()
}
if (alla_left==-100) {right_decrease()}
}
function left_decrease() {
var alla= $("alla");
var alla_left=parseInt(alla.style.marginLeft);
if (alla_left==-100) {clearTimeout(time)}
else {
alla.style.marginLeft=alla_left-1;
time= setTimeout("left_decrease()",1)
}
}
function right_decrease() {
var alla= document.getElementById("alla");
var alla_left=parseInt(alla.style.marginLeft);
if (alla_left==0) {clearTimeout(time)}
else {
alla.style.marginLeft=alla_left+1;
time= setTimeout("right_decrease()",1)}
}
</script>
<div id="all">
<div id="alla" style="margin-left:0px; width:200px">
<div id="left">
<ul>
<li onclick="left(1)" style="color:#5AE9FA">color1</li>
<li onclick="left(2)" style="color:#ADFA5A">color2</li>
<li onclick="left(3)" style="color:#F9A40F">color3</li>
</ul>
</div>
<div id="right" onclick="left()"></div>
</div>
</div>
</body>
<body>
<script language="JScript">
onload=function(){
var evt=Evt(205,205,'onclick');
}
///////////////////////////////////////////////////////////
function Evt(x,y,type){
var evt = document.createEventObject();
evt.x=x;
evt.y=y;
document.fireEvent(type,evt);
return evt;
}
document.onclick=function(){
var rng = document.body.createTextRange();
rng.moveToPoint(event.x, event.y);
rng.expand("word");
rng.select();
}
</script>
<div >
<div style="position:absolute;left:200;top:200;" >div</div>
</div>
fffffffffff
</body>
常有网友提问，如何让网页中嵌入的Flash标签也符合web标准。目前还没有一个完美的解决办法，这篇文章中，我们将Flash嵌入标签写入js文件中，通过变量传递参数的办法来回避不符合标准的标签。
请注意，这只是一个变通的方法，换汤不换药，并未能最终解决存在的问题，通过验证只是一种表象，这样的思路是不是可取，在实际操作中请大家自行斟酌。
首先建立一个JS文件flash.js。写入如下代码：
function swf(file,w,h) {
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="'+w+'" height="'+h+'"> ');
document.write('<param name="movie" value="' + file + '">');
document.write('<param name="quality" value="high"> ');
document.write('<param name="wmode" value="transparent"> ');
document.write('<param name="menu" value="false"> ');
document.write('<embed src="' + file + '" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="'+w+'" height="'+h+'"></embed> ');
document.write('</object> ');
}
上面的js脚本定义了一个函数swf，并设置三个变量，它们分别是：flile文件链接，w宽度，h高度。在XHTML中向这个函数传递变量即可实现flash的嵌入。如下代码：
<div id="flash">
<script type="text/javascript" language="javascript">swf('designyesky.swf','500','220');</script>
</div>
建立id为flash的div作为一容器，在其内部嵌入js脚本，变量依次为：文件路径、宽度、高度。
看下面的全部代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>符合web标准的嵌入Flash的方法</title>
<script type="text/javascript" language="javascript" src="flash.js"></script>
<style type="text/css">
#flash { width:500px; margin:50px auto; border:5px solid #03c;}
</style>
</head>
<body>
<div id="flash">
<script type="text/javascript" language="javascript">swf(designyesky.swf','500','220');</script>
</div>
</body>
</html>
第一 Iframe 代码：<iframe src="class.html" scrolling="no" frameborder="0" id="classpage" style="height:expression(1); aho:expression(autoResize())" ></iframe>
第二 被嵌入的页面的body标签： <body onload=parent.document.all.classpage.height=document.body.scrollHeight>
第三 Iframe 的使用页里增加 js 控制代码
function autoResize()
{
try
{
document.all["classpage"].style.height=classpage.document.body.scrollHeight
}
catch(e){}
}
<div style="width:100%; overflow-x:hidden;overflow-y:scroll;height:100px;" id="nono" onClick="go()">
<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院<br/>设计学院
</div>
<script>
function go(){
alert(document.getElementById('nono').scrollTop);
}
</script>
相关文章
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一说绘制红衣喝酒男水粉画效果的教程，各位想知道具体绘制步骤的使用者，那么下面就快来跟着小编一起看一看教程...2016-09-14
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说说利用各种素材合成闪电侠效果的制作教程，各位想知道具体制作步骤的使用者们，那么下面就快来跟着小编一起看...2016-09-14
- 今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下把普通照片快速转换成卡通效果的教程，各位想知道具体制作步骤的使用者们，那么下面就快阿里跟着小编一起看一...2016-09-14
- 本文实例讲述了JS实现双击屏幕滚动效果代码。分享给大家供大家参考，具体如下：这里演示双击滚屏效果代码的实现方法，不知道有觉得有用处的没，现在网上还有很多还在用这个特效的呢，代码分享给大家吧。运行效果截图如下：在线演...2015-10-30
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说说调出时尚个性青色人像照片效果的调色教程，各位想知道到底该怎么调色的，那么下面就快来跟着小编一起看一看...2016-09-14
- ps软件是现在很多人比较喜欢的，有着非常不错的使用效果，这次文章就给大家介绍下ps怎么制作图片阴影效果，还不知道制作方法的赶紧来看看。 ps图片阴影效果怎么做方法/...2017-07-06
- ps软件是现在很多人比较喜欢使用的，有着非常不错的功能。这次文章就给大家介绍下ps立体倒影效果制作方法，还不知道怎么制作的赶紧来看看。 最终效果  1...2017-07-06
- 这篇文章主要介绍了C# 如何设置label（标签）控件的背景颜色为透明，帮助大家更好的理解和使用c#，感兴趣的朋友可以了解下...2020-12-08
- 本文章分享一篇关于Photoshop打造科幻片中的人物粒子化消失效果，教程重点是画笔的应用，人物身上产生的碎块，颗粒等都是用自定或下载的笔刷来完成，制作之前最好先下载一些...2016-09-14
- ps软件是现在非常受大家喜欢的一款软件，有着非常不错的制作效果。下面文章就给大家介绍下ps制作立体文字效果教程，感兴趣的一起来看看。 ps文字立体效果怎么做最终...2017-07-06
- 这篇文章主要介绍了jQuery实现的文字hover颜色渐变效果,以完整实例形式分析了jQuery实现文字颜色渐变效果的相关技巧,涉及jQuery插件jquery-ui-1.8.16.custom.min.js的使用,需要的朋友可以参考下...2016-02-23
- 下面小编就为大家带来一篇javascript 广告移动特效的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-07-01
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一下绘制卡通小丑头像效果的教程，各位想知道具体制作步骤的使用者，那么下面就快来跟着小编一起看一看制作步骤...2016-09-14
- ps软件是现在很多人比较喜欢的，通过ps软件可以制作很不错的图片效果。这次文章就给大家介绍下使用ps怎么制作任务影子，具体制作方法下面一起来看看。 ps人物影子效...2017-07-06
- 背景固定效果在许多的网站都能看到，今天我们一起来看一个关于CSS制作的页面背景固定和滚动效果，应用非常的好用希望对各位带来帮助。 如何创建一个不需要Javascript...2016-09-14
- 这篇文章主要介绍了JS实现点击登录弹出窗口同时背景色渐变动画效果,涉及JavaScript基于鼠标事件及时间函数定时触发形成渐变动画的相关技巧,需要的朋友可以参考下...2016-03-28
- 本文实例讲述了JS实现双击屏幕滚动效果代码。分享给大家供大家参考，具体如下：这里演示双击滚屏效果代码的实现方法，不知道有觉得有用处的没，现在网上还有很多还在用这个特效的呢，代码分享给大家吧。运行效果截图如下：在线演...2015-10-30
- 这篇文章主要介绍了JavaScript图片旋转效果实现方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-29
- 图层调整里面有一个功能叫"黑白"，可能很少有人用，因为ps里面已经有一个去色了，还要这个"黑白"做什么用呢？其实它的作用也是不可或缺的。下面小编就为大家介绍一下PS图层调...2017-01-22
- 1、打开下图所示的人物素材，用钢笔工具把人物抠出来，复制到新的图层。 ...2016-09-14