图文展示特效html代码的简单介绍

今天给各位分享图文展示特效html代码的知识，其中也会对进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、用HTML编写图片特效,如浮雕,透明,扭曲……的关键代码是怎么写?
• 2、怎样把图文转换成html代码?
• 3、高分请高手用HTML编写图片流动效果代码
• 4、html怎样实现图文混排
• 5、html特效
• 6、HTML中如何做图片切换效果，跪求代码

用HTML编写图片特效,如浮雕,透明,扭曲……的关键代码是怎么写?

一楼说的不是很正确!

用HTML编写也行!(百度上面多的是)

IMG src="图片路径" style="filter:invert()" border=0反色

IMG src="图片路径" style="filter:progid:DXImageTransform.Microsoft.Embos(Bias=0.7) ;" border=0浮雕

IMG src="图片路径" style="filter:wav(add=0,freq=3,lightstrength=50,phase=0,strength=3)" border=0扭曲

IMG src="图片路径" style="filter:Alpha(Opacity=80,style=3)" border=0透明

怎样把图文转换成html代码?

最简单的方法是下载一个firework或者是photoshop里面可以直接改成html代码

里面写的是“源文件”点进去即可

给点分吧谢谢

高分请高手用HTML编写图片流动效果代码

script language="JavaScript"

imgArr=new Array()

imgArr[0]="a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'img src= border=0/a"

imgArr[1]="a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'img src= border=0/a"

imgArr[2]="a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'img src= border=0/a"

imgArr[3]="a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'img src= border=0/a"

imgArr[4]="a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'img src= border=0/a"

imgArr[5]="a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'img src= border=0/a"

imgArr[6]="a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'img src= border=0/a"

imgArr[7]="a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'img src= border=0/a"

imgArr[8]="a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'img src= border=0/a"

imgArr[9]="a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'img src= border=0/a"

imgArr[10]="a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'img src= border=0/a"

var moveStep=4 //步长，单位：pixel

var moveRelax=100 //移动时间间隔，单位：ms

ns4=(document.layers)?true:false

var displayImgAmount=4 //视区窗口可显示个数

var divWidth=125 //每块图片占位宽

var divHeight=60 //每块图片占位高

var startDnum=0

var nextDnum=startDnum+displayImgAmount

var timeID

var outHover=false

var startDivClipLeft

var nextDivClipRight

function initDivPlace(){

if (ns4){

for (i=0;idisplayImgAmount;i++){

eval("document.divOuter.document.divAds"+i+".left="+divWidth*i)

}

for (i=displayImgAmount;iimgArr.length;i++){

eval("document.divOuter.document.divAds"+i+".left="+divWidth*displayImgAmount)

}

}else{

for (i=0;idisplayImgAmount;i++){

eval("document.all.divAds"+i+".style.left="+divWidth*i)

}

for (i=displayImgAmount;iimgArr.length;i++){

eval("document.all.divAds"+i+".style.left="+divWidth*displayImgAmount)

}

}

}

function mvStart(){

timeID=setTimeout(moveLeftDiv,moveRelax)

}

function mvStop(){

clearTimeout(timeID)

}

function moveLeftDiv(){

if (ns4){

for (i=0;i=displayImgAmount;i++){

eval("document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left=document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left-moveStep")

}

startDivClipLeft=parseInt(eval("document.divOuter.document.divAds"+startDnum+".clip.left"))

nextDivClipRight=parseInt(eval("document.divOuter.document.divAds"+nextDnum+".clip.right"))

if (startDivClipLeft+moveStepdivWidth){

eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+divWidth)

eval("document.divOuter.document.divAds"+startDnum+".left="+divWidth*displayImgAmount)

eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".left=document.divOuter.document.divAds"+nextDnum+".left+"+divWidth)

eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".clip.left=0")

startDnum=(++startDnum)%imgArr.length

nextDnum=(startDnum+displayImgAmount)%imgArr.length

startDivClipLeft=moveStep-(divWidth-startDivClipLeft)

nextDivClipRight=moveStep-(divWidth-nextDivClipRight)

}else{

eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0")

startDivClipLeft+=moveStep

nextDivClipRight+=moveStep

}

eval("document.divOuter.document.divAds"+startDnum+".clip.left="+startDivClipLeft)

eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+nextDivClipRight)

}else{

for (i=0;i=displayImgAmount;i++){

eval("document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.left=document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.pixelLeft-moveStep")

}

startDivClipLeft=parseInt(eval("document.all.divAds"+startDnum+".currentStyle.clipLeft"))

nextDivClipRight=parseInt(eval("document.all.divAds"+nextDnum+".currentStyle.clipRight"))

if (startDivClipLeft+moveStepdivWidth){

eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+divWidth+","+divHeight+",0"+")'")

eval("document.all.divAds"+startDnum+".style.left="+divWidth*displayImgAmount)

eval("document.all.divAds"+parseInt((nextDnum+1)%imgArr.length)+".style.left=document.all.divAds"+nextDnum+".style.pixelLeft+"+divWidth)

startDnum=(++startDnum)%imgArr.length

nextDnum=(startDnum+displayImgAmount)%imgArr.length

startDivClipLeft=moveStep-(divWidth-startDivClipLeft)

nextDivClipRight=moveStep-(divWidth-nextDivClipRight)

}else{

startDivClipLeft+=moveStep

nextDivClipRight+=moveStep

}

eval("document.all.divAds"+startDnum+".style.clip='rect(0,"+divWidth+","+divHeight+","+startDivClipLeft+")'")

eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+nextDivClipRight+","+divHeight+",0)'")

}

if (outHover){

mvStop()

}else{

mvStart()

}

}

function writeDivs(){

if (ns4){

document.write("ilayer name=divOuter width=750 height="+divHeight+"")

for (i=0;iimgArr.length;i++){

document.write("layer name=divAds"+i+"")

document.write(imgArr[i]+" ")

document.write("/layer")

}

document.write("/ilayer")

document.close()

for (i=displayImgAmount;iimgArr.length;i++){

eval("document.divOuter.document.divAds"+i+".clip.right=0")

}

}else{

document.write("div id=divOuter style='position:relative' width=750 height="+divHeight+"")

for (i=0;iimgArr.length;i++){

document.write("div id=divAds"+i+" style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'")

document.write(imgArr[i]+" ")

document.write("/div")

}

document.write("/div")

for (i=displayImgAmount;iimgArr.length;i++){

eval("document.all.divAds"+i+".style.clip='rect(0,0,"+divHeight+",0)'")

}

}

}

/script

BODY onload=javascript:mvStart()

SCRIPT language=JavaScriptwriteDivs();initDivPlace();/SCRIPT

html怎样实现图文混排

网页中有时也需要像word那样实现图文混排。那么如何通过CSS实现网页图文混排。

工具/原料

Dreamweaver CS5

方法/步骤

用下面这段话做测试：“百度经验是百度于2010年10月推出的一款生活知识系新产品。它主要解决用户"具体怎样做"，重在解决实际问题。在架构上，整合了百度知道的问题和百度百科的格式标准。经验是一篇能指导人们达到某种目的的文章，通常包括概述、工具/原料、步骤/方法、注意事项、参考资料等几个部分，其中步骤/方法详细的描述了达到目的的操作过程，便于学习和模仿。经验一般含有丰富的图片（如果必要），和简明的文字，通常和现实生活联系紧密，能帮助人们解决实际问题。”如何实现图文混排。

网页在没有实现图文混排前的效果，先做CSS样式，看以下代码：

#title{

font-size:19px; /* 字号大小 */

font-weight:bold; /* 粗体 */

text-align:center; /* 居中 */

}

#content{

font-size:16px; /* 字号大小*/

}

这段样式就是对文字作一个简单的设置。

然后就是通过测试段落做测试：

body

div id="title"百度经验/div

div id="content"

img src="baidu.png" border="0"

百度经验是百度于2010年10月推出的一款生活知识系新产品。它主要解决用户"具体怎样做"，重在解决实际问题。在架构上，整合了百度知道的问题和百度百科的格式标准。经验是一篇能指导人们达到某种目的的文章，通常包括概述、工具/原料、步骤/方法、注意事项、参考资料等几个部分，其中步骤/方法详细的描述了达到目的的操作过程，便于学习和模仿。经验一般含有丰富的图片（如果必要），和简明的文字，通常和现实生活联系紧密，能帮助人们解决实际问题。/div

/body

运行后如下所示

文字上方空出一大片，既占空间，也不美观，因此想像word那样实现图文混排，那就要对图片进行控制。

style type="text/css"

/style

中加入：

img{

float:left;

}

即控制图片进行左浮动。

以下是可以实现图文混排的完整的代码：

html

head

title图文混排/title

style type="text/css"

#title{

font-size:19px; /* 字号 */

font-weight:bold; /* 粗体 */

text-align:center; /* 居中 */

}

#content{

font-size:16px; /* 字号 */

}

img{

float:left; /* 图文混排 */

}

/style

/head

body

div id="title"百度经验/div

div id="content"

img src="baidu.png" border="0"

百度经验是百度于2010年10月推出的一款生活知识系新产品。它主要解决用户"具体怎样做"，重在解决实际问题。在架构上，整合了百度知道的问题和百度百科的格式标准。经验是一篇能指导人们达到某种目的的文章，通常包括概述、工具/原料、步骤/方法、注意事项、参考资料等几个部分，其中步骤/方法详细的描述了达到目的的操作过程，便于学习和模仿。经验一般含有丰富的图片（如果必要），和简明的文字，通常和现实生活联系紧密，能帮助人们解决实际问题。/div

/body

/html

运用后效果显示：

html特效

1、你的那段放在body/body之间

2、要把文章内容放在p id="ccon"/div中间，并接在你那段后面；

2、再就是将这段代码放到head/head之间

script language="javascript"

//保存背景颜色和字号

function setSz()

{

var va = document.getElementById("bjColor").value;

setCookie("bjColor", va, 30);

va = document.getElementById("wzSize").value;

setCookie("wzSize", va, 30);

va = document.getElementById("wzColor").value;

setCookie("wzColor", va, 30);

va = document.getElementById("gd").value;

setCookie("gd", va, 30);

alert("保存成功!");

return ;

}

//设置背景颜色和字号

function getSz()

{

var bjColor = getCookie('bjColor');

var wzSize = getCookie('wzSize');

var wzColor = getCookie('wzColor');

var gd = getCookie('gd');

if(bjColor != null)

{

document.getElementById("ccon").style.background=bjColor;

setSelect(bjColor,"bjColor");

}

if(wzSize != null)

{

document.getElementById("ccon").style.fontSize=wzSize;

setSelect(wzSize,"wzSize");

}

if(wzColor != null)

{

document.getElementById("ccon").style.color=wzColor;

setSelect(wzColor,"wzColor");

}

if(gd != null)

{

SetScrollValue(gd);

setSelect(gd,"gd");

}

}

/*

* 设置滚动速度

*/

var currentpos,timer;

var scrollValue = 100;

function SetScrollValue(value)

{

scrollValue = value * 20;

}

function initialize()

{

timer = window.setInterval("scrollwindow()",scrollValue);

}

function sc()

{

clearInterval(timer);

}

function scrollwindow()

{

currentpos = document.documentElement.scrollTop;

window.scroll(0,++currentpos);

window.status = currentpos;

if (currentpos != document.documentElement.scrollTop) sc();

}

document.ondblclick = function()

{

initialize();

}

document.onmousedown = function()

{

sc();

}

/script

HTML中如何做图片切换效果，跪求代码

1、首先输入代码：

div class="wrapper"

div id="focus"

ul

lia href="" target="_blank"img src="img/01.jpg" alt="QQ商城焦点图效果下载" //a/li

2、然后输入代码：

lia href="" target="_blank"img src="img/02.jpg" alt="QQ商城焦点图效果教程" //a/li

lia href="" target="_blank"img src="img/03.jpg" alt="jquery商城焦点图效果" //a/li

lia href="" target="_blank"img src="img/04.jpg" alt="jquery商城焦点图代码" //a/li

3、然后再输入代码：

lia href="" target="_blank"img src="img/05.jpg" alt="jquery商城焦点图源码" //a/li

/ul

/div

/div!-- wrapper end --

/body

4、然后就完成了。

关于图文展示特效html代码和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。