導航:首頁 > 文字圖片 > 滾動文字和圖片
滾動文字和圖片
發布時間：2022-12-31 22:57:06
用div啊，背景圖片在div里設計，然後在div中在設置滾動的圖片或是文字，滾動代碼： <MARQUEE ALIGN="…"
BEHAVIOR="…"
BGCOLOR="…"
DIRECTION="…"
HEIGHT="…"
WIDTH="…"
HSPACE="…"
VSPACE="…"
LOOP="…"
SCROLLAMOUNT="…"
SCROLLDELAY="…"
ONMOUSEOUT=this.start()
ONMOUSEOVER=this.stop()
>你要添加的文字或是圖片
</MARQUEE>
② 手機如何設置圖片上滾動文字
圖片上加文字，靜止的叫製作水印，動態的就成Gif圖片了。製作GIF圖片是個功能需求，需要找相應的軟體程序進行製作即可。在手機上搜索查找相關GIF圖片製作如見下載安裝就可以製作圖片上滾動文字了。
③ PS圖片時，怎麼在上面加滾動的字幕
1、首先使用photoshop打開圖片，然後使用「文字工具」輸入文字，如圖所示。
④ 在網頁設計中 要讓圖片和文字滾動，我用了marquee屬性，裡面用的是<dl><dt>標簽，但是效果怎麼是這樣，
感覺是css錯誤 因為嵌套變了 所以css要重新對應html
⑤ 如何用html實現文本+圖片輪流滾動顯示
就是無縫滾動
用js就可以
1、打開Dreamweaver軟體
2、代碼如下： 不要忘了引入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=utf-8" />
<title>js無縫滾動製作js文字無縫滾動和js圖片無縫滾動</title>
<meta name="description" content="js無縫滾動製作多種無縫滾動效果js文字無縫滾動和js圖片無縫滾動,直接復制副本標簽js無縫滾動代碼。內含js代碼下載。" />
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;font-size:12px;}
a,img{border:0;}
.scroll{height:300px;width:500px;margin:50px auto;border:solid 1px #ddd;}
.scroll p{line-height:28px;padding:5px 0;border-bottom:dashed 1px #ddd;text-align:center;}
.scroll p a{color:#3366cc;text-decoration:none;}
</style>
<script type="text/javascript">
function addEventSimple(obj,evt,fn){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}
}
addEventSimple(window,'load',initScrolling);
var scrollingBox;
var scrollingInterval;
var reachedBottom=false;
var bottom;
function initScrolling(){
scrollingBox = document.getElementById('xst');
scrollingBox.style.overflow = "hidden";
scrollingInterval = setInterval("scrolling()",50);
scrollingBox.onmouseover = over;
scrollingBox.onmouseout = out;
}
function scrolling(){
var origin = scrollingBox.scrollTop++;
if(origin == scrollingBox.scrollTop){
if(!reachedBottom){
scrollingBox.innerHTML+=scrollingBox.innerHTML;
reachedBottom=true;
bottom=origin;
}else{
scrollingBox.scrollTop=bottom;
}
}
}
function over(){
clearInterval(scrollingInterval);
}
function out(){
scrollingInterval = setInterval("scrolling()",50);
}
</script>
<div class="scroll" id="xst">
<p><a href="http://www.17sucai.com/" target="_blank">jquery 文字滾動大全 scroll 支持文字或圖片 單行滾動 多行滾動 帶按鈕控制滾動</a></p>
<p><img width="150" height="150" alt="jquery 文字滾動大全 scroll 支持文字或圖片 單行滾動 多行滾動 帶按鈕控制滾動" src="images/1.jpg" /></p>
<p><a href="http://www.17sucai.com/" target="_blank">jquery 文字連續滾動 節奏感十足的齒輪式滾動圖片展示與文字內容特效展示</a></p>
<p><img width="150" height="150" alt="js文字滾動製作js scroll單排文字滾動向上間隔滾動" src="images/2.jpg" /></p>
<p><a href="http://www.17sucai.com/" target="_blank">jquery 文字特效霓虹燈文字效果使用jQuery和CSS</a></p>
<p><img width="150" height="150" alt="jquery 文字連續滾動 節奏感十足的齒輪式滾動圖片展示與文字內容特效展示" src="images/3.jpg" /></p>
<p><a href="http://www.17sucai.com/" target="_blank">js文字滾動製作js scroll單排文字滾動向上間隔滾動</a></p>
<p><img width="150" height="150" alt="jquery 文字特效霓虹燈文字效果使用jQuery和CSS" src="images/4.jpg" /></p>
<p><a href="http://www.17sucai.com/" target="_blank">js文字切換特效製作焦點文字帶濾鏡切換效果</a></p>
<p><a href="http://www.17sucai.com/" target="_blank">js文字特效製作js文字閃爍與文字變色效果</a></p>
<p><a href="http://www.17sucai.com/" target="_blank">js文字滾動插件製作雙行關聯向上文字間隙滾動</a></p>
</div>
</body>
效果：
⑥ 網頁中的圖片滾動效果是怎麼實現的啊
設置層高，比如position:absoulute; z-index:999; top:100px; right:0px;
示例用法：
<html>
<head><title>123</title></head>
<body style="width:1024px; height:2000px;">
<p style="width:100px; height:100px; background-color:red;position:fixed; z-index:999; top:100px; right:0px;">
<img src="圖片地址" />
<p>
</body>
</html>
圖片中的P標簽里有圖片，我這里設置P區塊為寬高各100，用position:fixed定位，距離頂部100像素，右邊0像素漂浮著，z-index:999就是層高，可以理解為層高越高就可以漂浮在網頁上面。
效果如下：
不管如何滾動網頁滾動條 上下翻 左右翻都一直在屏幕距離頂部100像素，右邊0像素漂浮著。
⑦ 用dreamweaver如何實現多行文字與多個圖片的同時滾動
li裡面的內容你自己加,代碼如下,你改為自己的內容就可以用,參數你自己看下,可以修改的!
<!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>scrollTop測試示例</title>
<style>
<!--
#out {
width:200px;
height:80px;
border:solid 1px blue;
overflow:hidden;
}
#in ul {
width: 100%;
}
#in ul li {
width: 60%;
float: left;
overflow: hidden;
list-style: none;
}
-->
</style>
<script type="text/javascript">
var $ = function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
// 實例化一個對象並調用對象的initialize方法
var Class = {
create : function() {
return function() {
this.initialize.apply(this, arguments);
};
}
};
// 為Object添加一個extend方法
Object.extend = function(destination, source) {
for ( var property in source) {
destination[property] = source[property];
}
return destination;
};
// 為對象注冊事件
var addEventHandler = function(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
var Scroll = Class.create();
Scroll.prototype = {
initialize : function(outObj, inObj, options) {
var oScroll = this;
var iOut = $(outObj);
var iIn = $(inObj);
this.outHeight = iOut.offsetHeight;
this.inHeight = iIn.offsetHeight;
if (this.outHeight >= this.inHeight) return;
iOut.style.overflow = "hidden";
iIn.appendChild(iIn.cloneNode(true));
this.setOptions(options);
this.outObj = iOut;
this.timer = null;
this.side = 1; // 1：向上；2：向下
switch(this.options.side) {
case "down" :
this.side = -1;
break;
case "up":
default:
this.side = 1;
}
addEventHandler(iIn, "mouseover", function() {oScroll.stop();});
addEventHandler(iIn, "mouseout", function() {oScroll.start();});
this.start();
},
setOptions : function(options) {
this.options = {
step : 1, // 每次滾動的px量
side : "up", // 滾動的方向
time : 10 // 滾動的間隔時間（滾動速度）
};
Object.extend(this.options, options || {});
},
scroll : function() {
var inHeight = this.inHeight, outHeight = this.outHeight, iStep = this.options.step * this.side, time = this.options.time;
var iScrollTop = this.outObj.scrollTop;
if (iScrollTop >= (inHeight * 2 - outHeight)) {
iScrollTop -= inHeight;
} else if (iScrollTop <= 0) {
iScrollTop += inHeight;
}
this.outObj.scrollTop = iScrollTop + iStep;
var oScroll = this;
this.timer = setTimeout(function() {oScroll.scroll();}, time);
},
start : function() {
this.scroll();
},
stop : function() {
clearTimeout(this.timer);
}
};
window.onload = function() {
new Scroll("out", "in", {step : 1, side : "up", time : 20});
};
</script>
</head>
<body>
<div id="out">
<div id="in">
<ul>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第5行</li>
</ul>
<div style="clear: both;"></div>
</div>
</div>
</body>
</html>
⑧ 在圖片上加滾動文字的gif圖片怎麼製作
打開軟體，啟動後軟體會顯示一個窗口，在啟動向導中先點擊「空白動畫」圖標。也可以直接點擊「關閉」
幀添加完成後，就會從原本的只有2幀變成了17幀，那麼就可以點「播放」按鈕，播放下文字是否滾動的效果。然後就可以點擊保存旁邊的倒三角形按鈕了，從中選擇「保存為GIF文件」，將gif圖片保存到桌面方便查找。
與滾動文字和圖片相關的資料
- 散心圖片帶文字
- 圖片怎麼在word中添加文字
- 勾起心理陰影發怒的文字圖片
- 閨密文字控圖片大全
- word里圖片文字組合在一起
- word中插入的圖片如何添加批註
- word中插入圖片只看到一半怎麼辦
- 共享雨傘word帶圖片
- 想揍人的文字圖片
- 卸載的圖片和文字會刪除嗎
- 5張圖片怎麼排版word
- 帶文字立冬的圖片
- 混世魔王文字圖片
- word插入圖片自動調整大小就沒了
- word插入漸變圖片
- 困的文字圖片搞笑
- 家庭教育圖片簡練文字
- 老公最帥圖片文字圖片
- word部分圖片顯示紅叉
- 肖氏文字圖片
- word圖片里怎麼刪除回車符號
- word文檔如何查圖片大小
- 早上好帶文字的圖片問候
- word表裡怎麼粘貼圖片
- word圖片插不進去只顯示一半
- word導入圖片和文件名
- 怎麼能把圖片中表格轉換成word
- 建材門店裝修文字圖片
- 我姓包的文字圖片
- 你的名字配上我的文字圖片
- 該不該回家了文字圖片
- 怎麼把word文檔圖片轉換成文字
- 樓頂英文字母安裝圖片
- word怎麼設置圖片襯於文字下面
- 把圖片上的文字轉為word
- word中如何在圖片背景上插表格
- word中的電子表插入圖片
- word批量插入圖片一行2張
- 賺錢文字超清圖片
- 圖片格式為四周型文字環繞
- 大宋少年志中的文字圖片
- word里圖片怎樣擦除部分圖像