欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS動(dòng)態(tài)圖片的實(shí)現(xiàn)方法完整示例

 更新時(shí)間：2020年01月13日 09:34:54   作者：qq_42412646  
這篇文章主要介紹了JS動(dòng)態(tài)圖片的實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了JavaScript鼠標(biāo)響應(yīng)與頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS動(dòng)態(tài)圖片的實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

<html>
    <head>
        <meta charset="UTF-8">
        <title>js-是動(dòng)態(tài)實(shí)現(xiàn)圖片顯示</title>
        <script type="text/javascript">
//            設(shè)置圖片的動(dòng)態(tài)效果
            function photoOper(ph,photo){
//                獲取圖片對(duì)象
//                var ph=document.getElementById(id); //可以通過(guò)id獲得，但是沒(méi)必要，我們可以直接使用this直接把對(duì)象傳過(guò)來(lái)
                ph.style.border="solid 1px";   //我們是重新賦值，所以我們要用=賦值符，而不是：各個(gè)是屬性說(shuō)明
//                在大屏塊顯示
                big.src=photo;     //傳過(guò)來(lái)的數(shù)據(jù)就已經(jīng)是一個(gè)字符串類(lèi)型了，雖然我們src的值需要是字符串，但是如果再加一個(gè)""就會(huì)導(dǎo)致路徑不明，這樣其實(shí)際圖片名相當(dāng)于帶了""
            }               //src是big的屬性的是不是樣式屬性，可以直接調(diào)用修改，不用加style
            function photoOper2(ph){
                ph.style.border="";    //移出后邊框值沒(méi)
            }
        </script>
        <style type="text/css">
            #showdiv{
                width: 500px;
                height: 440px;
                border: solid 1px;
                border-radius: 15px;
            }
            #ta{
                margin: auto;
                margin-top: 10px;
                margin-left: 10x;
            }
            img{
                margin-left: 3px;
            }
        </style>
    </head>
    <body>
        <div id="showdiv">
            <table id="ta">
                <tr>
                    <td colspan="4" width="490px" height="344px"><img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Guardians-of-the-Galaxy-Poster-High-Res.jpg" width="490px" id="big"/></td>
                </tr>
                <tr>
                    <td height="68px"><img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg" height="65px" id="p1" onmousemove="photoOper(this,'http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg')" onmouseout="photoOper2(this)"/></td>
                    <td><img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg" height="65px" onmousemove="photoOper(this,'http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg')" onmouseout="photoOper2(this)" /></td>
                    <td><img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg" height="65px" onmousemove="photoOper(this,'http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg')" onmouseout="photoOper2(this)"/></td>
                    <td><img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg" height="65px" onmousemove="photoOper(this,'http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg')" onmouseout="photoOper2(this)"/></td>
                </tr>
            </table>
        </div>
    </body>
</html>

運(yùn)行效果：

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • javascript模擬post提交隱藏地址欄的參數(shù)

    javascript模擬post提交隱藏地址欄的參數(shù)

    想要隱藏地址欄的參數(shù)，就只能用javascript模擬post提交，下面是示例代碼，需要的朋友可以看看
    2014-09-09
  • 如何使用js正則表達(dá)式驗(yàn)證文件夾名是否符合規(guī)范

    如何使用js正則表達(dá)式驗(yàn)證文件夾名是否符合規(guī)范

    眾所周知正則表達(dá)式非常強(qiáng)大,下面這篇文章主要給大家介紹了關(guān)于如何使用js正則表達(dá)式驗(yàn)證文件夾名是否符合規(guī)范的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-05-05
  • 微信小程序?qū)崿F(xiàn)橫屏和豎屏簽名功能

    微信小程序?qū)崿F(xiàn)橫屏和豎屏簽名功能

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)橫屏和豎屏簽名功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-05-05
  • [Web]防止用戶復(fù)制頁(yè)面內(nèi)容和另存頁(yè)面的方法

    [Web]防止用戶復(fù)制頁(yè)面內(nèi)容和另存頁(yè)面的方法

    原理就是利用js控制一些復(fù)制等事件，但破解也簡(jiǎn)單，這里就不說(shuō)了。
    2009-02-02
  • 詳解js樹(shù)形控件—zTree使用總結(jié)

    詳解js樹(shù)形控件—zTree使用總結(jié)

    本篇文章主要介紹了js樹(shù)形控件—zTree使用總結(jié)，樹(shù)形控件的使用是應(yīng)用開(kāi)發(fā)過(guò)程中必不可少的。zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹(shù)插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn).
    2016-12-12
  • 鼠標(biāo)左鍵單擊沖突的問(wèn)題解決方法(防止冒泡)

    鼠標(biāo)左鍵單擊沖突的問(wèn)題解決方法(防止冒泡)

    一個(gè)頁(yè)面實(shí)現(xiàn)了兩種右鍵菜單，當(dāng)鼠標(biāo)左鍵單擊空白處時(shí)，右鍵菜單并不隱藏，下面為大家解決鼠標(biāo)左鍵單擊沖突的問(wèn)題
    2014-05-05

    • 最新評(píng)論