導航:首頁 > 萬維百科 > 網頁設計移動特效

網頁設計移動特效

發布時間:2020-12-17 07:21:10

1、網頁製作問題,請教大家一個問題,怎麼才能讓網頁框架可移動,就是像MOP一樣,一點就過來,一點就回去

用 javascript特效

2、html製作網頁時我想把從右向左的圖片特效放在背景的中間從中間開始移動圖片

找到這個特效的容器元素。如果容器是<div id="slider"></div>。如果是加到樣式表css文件,那給專slider添加樣式
#slider{margin:0 auto}
如果直接寫在屬html上。那就寫成<div id="slider" style="margin:0 auto"></div>

3、網頁設計中的幻燈片特效如何實現?具體包括代碼怎麼插入??

試試這個圖片幻燈片切換效果

有12345數字一起切換

有小圖大圖一起切換

裡面有教程和源碼

4、請教網頁設計高手滑鼠特效代碼代碼求大神幫助

滑鼠移上去就打開頁面: 第一步:把如下代碼加入<body>區域中 <SCRIPT Language="JavaScript">function winopen () {msg=open("update.htm","NewWindow","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=yes,width=400,height=260");}</SCRIPT> 第二步:把如下代碼加入<body>區域中 <a href="鏈接地址" onMouseOver="winopen(); return true;"><IMG SRC="shu.gif" border="0"></a> 自動跳轉的話這個度試看 <a href=" 鏈接地址" onMouseOver="指定頁面"><IMG SRC="shu.gif" border="0"></a> 不行的話加我Q吧 我這個只是理論的寫寫 沒實現過 你試試看吧

滿意請採納

5、Dreamweaver 網頁設計中有哪些特效設置?怎麼實現的?

特效就多了,用Javascript 、css3都可以實現,百度一下就有許多

6、誰有網頁特效製作的方法啊?

一.設置滾動字幕
設置標題文字「歡迎光臨童心童話網站」為交替滾動字幕。
方法一:添加代碼
<marquee behavior="alternate">歡迎光臨童心童話網</marquee>
嘗試scroll(滾動)和slide(滑動)兩種其它模式。
方法二:常用-標簽選擇器-HTML標簽-頁元素,選中marquee,在右側屬性中設置behavior和direction。

二.彈出信息對話框
1. 單擊「body」標簽未選中任何頁面元素,打開右側標簽檢查器中的【行為】面板,選擇【彈出信息】命令,彈出「彈出信息」對話框,在對話框中輸入「歡迎光臨童心童話網!」。
2.單擊【確定】按鈕返回。

三.設置狀態欄文本
1.單擊「body」標簽未選中任何頁面元素,打開【行為】面板,選擇【設置文本】級聯菜單下的【設置狀態欄文本】命令,彈出對話框。
2.在對話框中輸入「純真的年代,美麗的心情,夢想的樂園!」,單擊【確定】按鈕返回。
3.在【行為】面板控制事件中選擇onLoad事件。
4.保存文件,瀏覽網頁效果。

四.頁面上飛來飛去的小動畫
1.打開常用下拉列表,選擇「布局」—「描繪層」,拖出一個層對象,選中層,選擇「插入」—媒體—Flash,插入「donghua」Flash對象。
2.選中層對象,選擇【修改】菜單【時間軸】級聯菜單中的【錄制層路徑】命令,沿著要使動畫飄動的路徑拖動層對象。
3.在下方的時間軸面板上選中「自動播放」和「循環」復選框。
4.在瀏覽器中預覽,可看到層對象順著剛才拖動的路徑運動。

五.彈出式菜單(index.htm)
1.選中導航條中的「外國童話」,在鏈接中輸入「#」回車,設置空鏈接,打開【行為】面板,選擇【顯示彈出式菜單】命令,彈出「顯示彈出式菜單」對話框。對話框的【內容】選項卡,在【內容】選項卡的文本輸入框中輸入菜單項的名稱:格林童話,單擊菜單旁的 按鈕,添加菜單選項:安徒生童話、伊索寓言,單擊 按鈕,可以刪除不想要的菜單選項。鏈接欄可為菜單選項設置超級鏈接。
2.單擊【外觀】,顯示【外觀】選項卡,可在【外觀】選項卡中設置彈出式菜單的文字格式、一般狀態和滑鼠滑過狀態文本和單元格的顏色屬性等;單擊【高級】,顯示【高級】選項卡,可在此設置單元格的大小、間距、邊框等屬性;單擊【位置】,顯示【位置】選項卡,可在此設置相對於控制對象彈出式菜單顯示的位置。
3.設置完成,單擊【確定】按鈕返回。

六.彈出瀏覽器(播放flash)
1.新建一個基本頁,保存為ad.htm文件。
2.插入一個2行2列的表格,合並第一行,選擇「插入」—媒體—Flash,插入「sanxing」 三星顯示器廣告Flash對象。在屬性面板上為其命名「sanxing」。
3.在第二行2個單元格中分別插入b1、b2兩個圖片,設置居中。選中「播放」按鈕,打開【行為】面板,選擇【控制Shockwave或Flash】命令,在對話框中選擇「播放」單選鈕,單擊【確定】按鈕返回。在【行為】面板控制事件中選擇onClick事件。同樣設置「停止」按鈕。
4.保存文件,打開index,單擊「body」標簽,打開【行為】面板,選擇【打開瀏覽器窗口】彈出對話框。選中ad.htm,設置窗口大小為520*460,選中「調整大小手柄」。保存,在IE瀏覽器中瀏覽,用戶可以通過兩個按鈕控制動畫播放。

七.製作交換圖像
1.新建一個html文件。
2.設置1行8列表格,插入t1-t8八張圖片。滑鼠單擊選中圖像,分別在屬性面板上給圖像命名從左到右依次為t1~t8。
3.選中最左邊的圖像t1,打開【行為】面板,選擇【交換圖像】,在對話框中選中第1項「圖像」t1」」,單擊「設定原始檔為」欄右邊的【瀏覽】按鈕,在彈出的對話框中選擇圖像t2;選擇第2項「圖像」t2」」, 「設定原始檔為」 t3;……選擇第8項「圖像」t8」」,「設定原始檔為」 t1。單擊【確定】按鈕返回。
4.用同樣的方法為每一幅圖像設置【交換圖像】行為。比如選中圖像t2,在「交換圖像」對話框中設置「圖像」t1」」交換為t3,「圖像」t2」」交換為t4……。如此一來,可實現滑鼠經過圖像不斷向前移動的效果。其它圖像以此類推。
對設置交換圖像行為的一點補充說明:
使用交換圖像行為可以創建按鈕變換(滑鼠經過圖像效果)和其他圖像效果(如本例的一次變換多幅圖像)。交換圖像動作可以通過改變代碼中的圖像源文件屬性將一幅圖像變換為另外一幅圖像,因此,變換圖像的尺寸(寬度和高度)應該與初始圖像一致。

7、製作html網頁中,我要做個特效:將滑鼠移動到某段特定的文字時,就會出現一幅圖片解釋

這個要寫腳本或者程序的,簡單做法在滑鼠事件里彈出一個框,在這個框里放上一副畫就行了

8、網頁設計特效??

能說的具體點嗎?yahoo還是yahoo中國?什麼欄目?

此為下拉式菜單,按鈕為flash。
下拉式菜單的代碼無須自己編寫,有軟體可以自動按要求生成,具體軟體請去天空下載,地址:
http://www.skycn.com/sort/sort2010900_indate_DESC_1.html
FLASH按鈕其實也是很簡單的。下載個Macromedia Flash 自己去做一個就行了。

9、這個網頁裡面的特效是怎麼設計的? 用滑鼠移動顯示覆蓋的效果!

用JQ寫的代碼,大體上就是滑鼠移上去之後判斷你的滑鼠位置,然後顯示第二張圖片(也就是地震後的圖片)的內容,基本上就是這個意思吧,你可以查看源裡面的代碼,寫的挺簡單的,不過真是好想法。
<script type="text/javascript" charset="utf-8">
jQuery(function(){

// Loop through all the sets of before and after pics
jQuery(".beforeafter").each(function(){

// Set the container's size to the size of the image
jQuery(this).width(jQuery(this).find("img[rel=before]").attr("width")).height(jQuery(this).find("img[rel=before]").attr("height"));

// Convert the images into background images on layered divs
jQuery(this).append("<div class='after'></div>").find(".after").css({"background": "url(" + jQuery(this).find("img[rel=after]").attr("src") + ")", "width": jQuery(this).find("img[rel=after]").attr("width") + "px", "height": jQuery(this).find("img[rel=after]").attr("height") + "px"});
jQuery(this).append("<div class='before'></div>").find(".before").css({"background": "url(" + jQuery(this).find("img[rel=before]").attr("src") + ")", "width": jQuery(this).find("img[rel=before]").attr("width") - 40 + "px", "height": jQuery(this).find("img[rel=before]").attr("height") + "px"});

// Add a helpful message
jQuery(this).append("<div class='help'>滑鼠懸停圖片上滑動觀看</div>");

// Remove the original images
jQuery(this).find("img").remove();

// Event handler for the mouse moving over the image
jQuery(this).mousemove(function(event){

// Need to know the X position of the parent as people may have their browsers set to any width
var offset = jQuery(this).offset().left;

// Don't let the reveal go any further than 50 pixels less than the width of the image
// or 50 pixels on the left hand side
if ((event.clientX - offset) < (jQuery(this).find(".after").width() -50) && (event.clientX - offset) > 50) {
// Adjust the width of the top image to match the cursor position
jQuery(this).find(".before").width(event.clientX - offset);
}

});

// Fade out the help message after the first hover
jQuery(this).hover(function(){

jQuery(this).find(".help").animate({"opacity": 0}, 400, function(){ jQuery(this).find(".help").remove(); });

});

});

});

</script>

與網頁設計移動特效相關的知識