求HTML动态图片代码

求HTML动态图片代码,第1张

<div id="demo" style="overflow:hidden;width:670px;color:#ffffff;">

<table cellpadding="0" cellspacing="0" border="0">

<tr><td id="demo1" valign="top" align="center">

<table cellpadding="2" cellspacing="0" border="0">

<tr align="center">

<td><img src="http://wwwhaaocn/logogif" width="88"></td>

<td><img src="http://wwwhaaocn/logogif" width="88"></td>

<td><img src="http://wwwhaaocn/logogif" width="88"></td>

<td><img src="http://wwwhaaocn/logogif" width="88"></td>

<td><img src="http://wwwhaaocn/logogif" width="88"></td>

</tr>

</table>

</td>

<td id="demo2" valign="top"></td>

</tr>

</table>

</div>

<script>

var speed=1//速度数值越大速度越慢

demo2innerHTML=demo1innerHTML

function Marquee(){

if(demo2offsetWidth-demoscrollLeft<=0)

demoscrollLeft-=demo1offsetWidth

else{

demoscrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

demoonmouseover=function() {clearInterval(MyMar)}

demoonmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

我的这段代码不会出现跑一段就停下的现象

<DIV align=center>

<DIV id=scroll_div

style="OVERFLOW: hidden; WIDTH: 778px;"

align=center>

<TABLE border="0" cellpadding="0" cellspacing="0">

<TBODY>

<TR>

<TD id=scroll_begin>

<A href="#"><IMG src="http://bbsblueideacom/images/blue/logogif" border=0></A><A href="#"><IMG src="http://bbsblueideacom/images/blue/logogif" border=0></A><A href="#"><IMG src="http://bbsblueideacom/images/blue/logogif" border=0></A><A href="#"><IMG src="http://bbsblueideacom/images/blue/logogif" border=0></A><A href="#"><IMG src="http://bbsblueideacom/images/blue/logogif" border=0></A><A href="#"><IMG src="http://bbsblueideacom/images/blue/logogif" border=0></A><A href="#"><IMG src="http://bbsblueideacom/images/blue/logogif" border=0></A><A href="#"><IMG src="http://bbsblueideacom/images/blue/logogif" border=0></A></TD>

<TD id=scroll_end>

</TR></TBODY></TABLE>

</DIV></DIV>

<SCRIPT>

var speed=30

var scroll_end = documentgetElementById("scroll_end");

var scroll_div = documentgetElementById("scroll_div");

scroll_endinnerHTML=scroll_begininnerHTML

function Marquee(){

if(scroll_endoffsetWidth-scroll_divscrollLeft<=0)

scroll_divscrollLeft-=scroll_beginoffsetWidth

else{

scroll_divscrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

scroll_divonmouseover=function() {clearInterval(MyMar)}

scroll_divonmouseout=function() {MyMar=setInterval(Marquee,speed)}

</SCRIPT>

html文件笔记本什么的都可以修改,可以直接以浏览器运行,但是一个网站和一个网页差别很大的,一般网上有模版,懂点html都可以修改,这个不难,做个网页用一模板修改就行,可以自己上网找然后修改。一般有这个代码就可以了。

动态生成的HTML标签样式一般可以使用2中方式确定

1、在生成HTML时将样式直接以style=""写在标签上;也就是使用行内样式

例如:

//动态生成html时,给html赋值行内样式

$("body")append("<div style='width:100px;height:100px;background:red;'>动态生成的div</div>");

2、预先定义好css样式,动态生成html时,将css类赋值给html

例:

/定义css样式/

content{

    width:100px;

    height:100px;

    background:red;

}//在动态生成html时,将css样式赋值class

$("body")append("<div class='content'>动态生成html赋值class样式</div>");

总结:在动态生成html标签时,直接使用行内样式快捷,但不容易修改;使用预先定义好的css样式赋值html标签的class属性,容易修改;建议使用后者。

<label><span>都可以用。 <div>也可以。

实现方法很多,不一一举例了。给你一个思路

<div id="msg1" style="display:none">提示1</div>

<div id="msg2" style="display:none">提示2</div>

用js 去判断文本框的value,然后去控制标签的id的display:为空,,那么这个标签就显示了。

1、直接贴图:

在界面上贴一个gif动态等待效果

gif获取方式:网上找素材,会ps的可以自己制作

<img src="waitgif" />

2、CSS3/SVG/HTML5 Canvas手动绘制等待效果:

这种效果:网上有很多类似素材,可以根据需要选择,或使用上述技术绘制

下面提供一个CSS3绘制的范例

<style>

loading {

width:0;

height:0;

border-right:20px solid #fff;

border-top:20px solid #000;

border-left:20px solid #fff;

border-bottom:20px solid #000;

border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

}

loading {

animation: bganim 06s linear 0s infinite;

-moz-animation: bganim 06s linear 0s infinite;

-webkit-animation: bganim 06s linear 0s infinite;

}

@keyframes bganim {

from { transform:rotate(0deg); } to { transform:rotate(360deg); }

}

@-moz-keyframes bganim {

from { -moz-transform:rotate(0deg); } to { -moz-transform:rotate(360deg); }

}

@-webkit-keyframes bganim {

from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); }

}

</style>

<label>CSS3效果</label>

<div class="loading"></div>

-------------------------------------------------

效果如下图:

运行机制很简单,先手动绘制一个静态的图,然后控制对应div进行360度旋转,即可实现

3、使用js等待效果插件(如:spinjs)

JS

-----------------------------------------------------

var opts = {

lines: 9,

length: 0,

width: 15,

radius: 20,

corners: 1,

rotate: 0,

direction: 1,

color: '#0101DF',

speed: 1,

trail: 34,

shadow: false,

hwaccel: false,

className: 'spinner',

zIndex: 2e9,

top: '50%',

left: '50%'

};

var target = documentgetElementById('img_wait');

var spinner = new Spinner(opts)spin(target);

7

html

---------------------------------

<div id="img_wait"></div>

欢迎分享,转载请注明来源:表白网

原文地址:https://h5.hunlipic.com/biaobai/4007567.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2024-04-09
下一篇2024-04-09

发表评论

登录后才能评论

评论列表(0条)

    保存