revealtrans

来源：莆仙生活网时间：2024-03-18 22:38:43编辑：莆仙君

谁能把CSS滤镜中的RevelTrans与BlendTrans两个滤镜效果举附源代码例细说一下？

首先，这种滤镜只有IE浏览器才支持，其他标准浏览器（Chrome、Safari、FireFox、Opera等）是没效果的。所以现在基本上都不使用这种滤镜了（改用CSS3动画或过渡效果），除非你能确认你的用户用的都是IE，或者是内部使用的（不公开的）Web应用。下面是用法举例（多张图片循环显示）：window.onload=function(){ var img=document.getElementById("tp"); var pn=[],pi=0; pn[0]="图片1，自己改"; pn[1]="图片2"; pn[2]="图片3，还可以加更多图片"; img.src=pn[0]; setInterval(function(){ pi=(pi+1)%pn.length; if(navigator.userAgent.indexOf("MSIE")>0){ //如果是IE就用滤镜 img.filters.revealTrans.apply(); img.src=pn[pi]; //这三行的顺序一定不能改 img.filters.revealTrans.play(); }else{ //不是IE就不使用滤镜 img.src=pn[pi]; } },4000); //每张图片保持4秒}

CSS RevealTrans滤镜

revealTrans是css中图片切换的动态滤镜啊它能产生23种动态效果，更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。
两个参数Transition和Duration，分别是变换效果和持续时间，其中Duration是浮点数。

　　此外还有两个属性Enabled和Percent分别是是否激活滤镜和当前静态滤镜输出在转换进程中所处的点。

　　设置完后还需要运行apply和play方法，分别是应用变换效果和运行效果

网页设计 CSS RevealTrans滤镜

下面代码放在网页head区域，两行一行是进入网页、一行是离开时：

duration=3 是设置效果时间为3秒

transition = 23 是切换效果

--------------------------------------------------
矩形从大至小 0 随机溶解 12
矩形从小至大 1 从上下向中间展开 13
圆形从大至小 2 从中间向上下展开 14
圆形从小至大 3 从两边向中间展开 15
向上推开 4 从中间向两边展开 16
向下推开 5 从右上向左下展开 17
向右推开 6 从右下向左上展开 18
向左推开 7 从左上向右下展开 19
垂直形百叶窗 8 从左下向右上展开 20
水平形百叶窗 9 随机水平细纹 21
水平棋盘 10 随机垂直细纹 22
垂直棋盘 11 随机选取一种特效 23

谁知道这样的网页过渡特效是怎么实现的？

保存这个页面后研究一下代码，发现页面的所有信息全部保存在/js/index_trade_dir.js这个文件里面，但是直接下载这个js文件的里面却只有5行，没有任何具体的内容。因此这个js文件应该是由服务器根据相应页面后台生成的，而且由于信息量非常大，应该是先将资料输入数据库，再由一套后台程序来生成这个js文件

页面中的1、2、3页也是有js计算后产生的

因为牵涉到jsp的编程，不是单纯的javascript技术，无法解答具体的实现方法

但是如果只是仅仅产生这个由左向右的显示效果，那就简单得多了
楼主可以参考这里：
http://www.8s8s.com/js/
里面的“窗口类”中的“页面效果”1－6
希望对你有帮助

网页设计中如何设置两张图片每隔几秒循环切换怎么写代码

//下面是可配置轮播动画代码
$.fn.slide=function(options){
var defaults= {
affect:1, //1：上下滚动; 2:幕布式; 3:左右滚动；4：淡入淡出
time: 5000, //间隔时间
speed:500, //动画快慢
dot_text:true,//按钮上有无序列号
};
var opts=$.extend(defaults,options);

var $this=$(this);
var ool=$("");
var $box=$this.find("ul");
var $li=$box.find("li");
var timer=null;
var num=0;

$this.append(ool);
$box.find("li").each(function(i){
ool.find("p").append($(""));
if(opts.dot_text){
ool.find("b").eq(i).html(i+1)
}
})
ool.find("b").eq(0).addClass("cur");
switch(opts.affect){
case 1:
break;
case 2:
$box.find("li").css("display","none");
break;
case 3:
$box.css({"width":$li.eq(0).width()*$li.length});
$li.css("float","left");
break;
case 4:
$box.find("li").css("display","none");
break;
}
$box.find("li").eq(0).show(0);
ool.find("b").mouseover(function(){
num=$(this).index();
run ();
})
timer=setInterval(auto,opts.time);
function auto(){
num<$box.find("li").length-1?num++:num=0;
run();
}
function run(){
ool.find("b").eq(num).addClass("cur").siblings().removeClass("cur");
switch(opts.affect){
case 1:
$box.stop(true,false).animate({"top":-240*num},opts.speed);
break;
case 2:
$box.find("li").css({"position":"absolute"});
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).slideDown(opts.speed);
break;
case 3:
$box.stop(true,false).animate({"left":-670*num},opts.speed);
break;
case 4:
$box.find("li").css({"position":"absolute"});
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).fadeIn(opts.speed);
break;
}
}
$this.mouseover(function(){
clearInterval(timer);
})
$this.mouseout(function(){
timer=setInterval(auto,opts.time);
})
}
}(jQuery));

jquery单击两个图片来回交替样式要怎么做呀

获取这两个按钮的class，然后点击其中一个的时候变样式，另一个也变就可以了。
$(".xx").on("click",function(){
$(this).addClass(".hr1").siblings().removeClass(".hr1");

})
上面的代码只是一个示例，因为不知道你html怎么写的，所以没办法写。
你把代码压缩一下传个附件，我帮你写下。

html5怎么设置网页过渡效果

步骤1 创建空白的HTML 5模版
首先，我们创建一个空白的模版，代码很简单，如下所示：

复制代码
步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。代码如下所示：

复制代码
读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全局CSS样式调整用的步骤3 往HTML 5标签中增加代码
1）首先往标题中增加如下代码：

　Simple HTML5 Template

复制代码
2）往导航标签中添加如下代码，这样很方便地构件了一个简单的页面分类导航：

Home About Parent Page Child
One Child Two with child Child One Child
Two Child Three Child Three
Contact

复制代码
3）使用标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用标签了。如下代码所示：

This is a title for post
Richard KS 20th March 2013 Tutorials HTML5, CSS3
and Responsive 10 Comments Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s

复制代码
4）添加标签 HTML5提供的元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。
根据目前的规范，元素有两种使用方法：

被包含在中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。

在之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

代码如下：

Categories Category 1 Category 2
Parent Category Child One Child Two
Grandchild One Grandchild Two Grandchild Three
Child Three Category 3
Text Lorem Ipsum is simply dummy
text of the printing and typesetting industry.

复制代码
5）加上最后的标签，代码为：

Copyright@ 2013 HTML5.com Privacy Policy - About Us

复制代码
步骤4 增加CSS样式
首先创建一个空白的样式，如下：

[/code] 然后在http://necolas.github.com/normalize.css/中下载这个css,然后将其内容复制到该空白的文件中代码如下： [code]body {
font-family: arial, sans-serif;
font-size: 100%; /* best for all browser using em */
padding:0;
margin:0;
}
*, html { line-height: 1.6em; }
article img { width:auto; max-width:100%; height:auto; }
.sidebar a, article a, header a, footer a { color: #C30; }
header a { text-decoration: none; }
#wrapper {
font-size: 0.8em; /* 13px from 100% global font-size */
max-width: 960px; /* standard 1024px wide */
margin: 0 auto;
}
/* css for */
header { padding: 1em 0; margin: 0px; float: left; width: 100%;
}
header hgroup { width: 100%; font-weight:normal; }
/* css for */
nav
{ display: block; margin: 0 0 2em; padding: 0px;
float: left; width: 100%; background-color: #181919;
}
nav ul ul {display: none;}
nav ul li:hover > ul {display: block;}
nav
ul { padding: 0; list-style: none; position:
relative; display: inline-table; z-index: 9999;
margin: 0px; float: left; width: 100%;
}
nav ul:after {content: ""; clear: both; display: block;}
nav ul li {float: left;}
nav ul li:hover a {color: #fff;}
nav
ul li a { display: block; padding: 1em; font-size:
1.125em; color: #ccc; text-decoration: none;
margin: 0px; background-color: #000; border-right: 1px
solid #333;
}
nav ul li:last-of-type a {border-right: 1px solid transparent !important;}
nav
ul ul { background: #5f6975; border-radius: 0px;
padding: 0; position: absolute; top: 100%; width:
auto; float: none;
}
nav ul li:hover { background: #5f6975; color: #FFF;
}
nav ul ul li a:hover { background-color: #4b545f;
}
nav ul ul li {
float: none;
border-bottom: 1px solid #444240;
position: relative;
}
nav ul ul li a {
padding: 0.5em 1em;
font-size: 1em;
width:10em;
color: #fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
/* css for */
section.content { width: 70%; float:left; }
.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }
article .entry { clear:both; padding: 0 0 1em; }
h1.post-title { font-size: 1.8em; margin:0; padding:0;}
.entry.post-meta { color: #888; }
.entry.post-meta span { padding: 0 1em 0 0; }
.entry.post-content { font-size: 1.125em; margin:0; padding:0;}
/* css for */
aside.sidebar { width: 25%; float:right; }
aside.sidebar ul { width:100%; margin: 0px; padding: 0px; float: left; list-style: none;
}
aside.sidebar
ul li { width:100%; margin: 0px 0px 2em; padding:
0px; float: left; list-style: none;
}
aside.sidebar ul li ul li { margin: 0px 0px 0.2em; padding: 0px;
}
aside.sidebar
ul li ul li ul li { margin: 0px; padding: 0px 0px 0px
1em; width: 90%; font-size: 0.9em;
}
aside.sidebar
ul li h3.widget-title { width:100%; margin: 0px;
padding: 0px; float: left; font-size: 1.45em;
}
/* css for */
footer { width: 98%; float:left; padding: 1%; background-color: white; margin-top: 2em;
}
footer .footer-left { width: 45%; float:left; text-align:left; }
footer .footer-right { width: 45%; float:right; text-align:right; }
复制代码
步骤5 为移动应用使用@media query查询为了进行响应式设计，最佳的方案是使用@media query去进行查询，在上面的CSS代码中添加如下代码：

/* ipad 768px */
@media only screen and (min-width:470px) and (max-width:770px){
body { background-color: red; } #wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}
/* iphone 468px */
@media only screen and (min-width:270px) and (max-width:470px){
body { background-color: yellow; } #wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}
复制代码
步骤6 增加jquery,modernizer和html5shiv到标签中这里推荐使用Modernizr 和html5shiv，它们都是一个能在多种浏览器中通过运行各种脚本兼容运行支持大部分HTML 5标签的插件。我们将它们和jQuery库放在标签前

求助图片切换代码(html)网页

把下面整段插入页面
打了******的地方写图片地址，图片多的话多弄几个就可以了。



<img
style="FILTER: revealTrans(duration=2,transition=20)" height=180
src="" width=180 border=1
name=bannerADrotator>
nextAd()

如何让几个网页之间切换时呈现渐变或百叶窗的效果？

http://school.gaoshou.net/2/6/402.html

Dreamweaver定制网页过渡功能

网页过渡是指当浏览者进入或离开网页时，页面呈现的不同的刷新效果，比如卷动、百叶窗等。这样你的网页看起来会更具有动感，不过也要注意适可而止，否则太花哨的变化也容易引起浏览者的反感。

实现这个功能并不难，只需两步。

首先用Dreamweaver打开页面，然后单击菜单中的InsertHeadMeta（插入/文件头标签/Meta），会弹出如下图所示的对话框。

在对话框中的Attribute选项的下拉列表中选HTTP-equivalent选项，在Value：中键入Page-Enter，表示进入网页时有网页过渡效果。在Content:中键入Revealtrans(Duration=4,Transition=2),Duration=4表示网页过渡效果的延续时间为4秒，Transition表示过渡效果方式，值为2时表示圆形收缩。

输入完后单击确定，存盘。这样当我们点击一个超链接进入这个页面时就可以看到效果了。另外还有二十多种效供你选择，只要将Transition的值改为相应的效果的代号即可，具体效果和设置如下表所示：

效果 Content Transitionv
盒状收缩 RevealTrans 0
盒状展开 RevealTrans 1
圆形收缩 RevealTrans 2
圆形展开 RevealTrans 3
向上擦除 RevealTrans 4
向下擦除 RevealTrans 5
向左擦除 RevealTrans 6
向右擦除 RevealTrans 7
垂直百页窗 RevealTrans 8
水平百页窗 RevealTrans 9
横向棋盘式 RevealTrans 10
纵向棋盘式 RevealTrans 11
溶解 RevealTrans 12
左右向中部收缩 RevealTrans 13
中部向左右展开 RevealTrans 14
上下向中部收缩 RevealTrans 15
中部向上下展开 RevealTrans 16
阶梯状向左下展开 RevealTrans 17
阶梯状向左上展开 RevealTrans 18
阶梯状向右下展开 RevealTrans 19
阶梯状向右上展开 RevealTrans 20
随机水平线 RevealTrans 21
随机垂直线 RevealTrans 22
随机 RevealTrans 23

上一篇：谁能百里挑一男嘉宾

下一篇：没有了