1顶

图片多方向滚动控制效果

稿源：互联网 2022-04-16 23:49:48 点击： 2978 撤稿纠错

图片多方向滚动控制效果，上下左右可任意选。

以下讨论的是和滚动特效相关的图片多方向滚动控制效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<HTML> 
<HEAD> 
<TITLE>图片滚动控制效果－阿里西西www.alixixi.com</TITLE> 
</HEAD> 
<BODY STYLE="overflow: hidden; border: 0" topmargin=0 leftmargin=0> 
<table> 
<tr><td style="padding: 5"> 
<div id="testDiv" style="border: buttonface 2 solid"> 
<img src="http://www.alixixi.com/alixixi.gif"> 
</div> 
<script language="JScript"> 
function scroll(obj, oWidth, oHeight, direction, drag, zoom, speed) 
{ 
    var scrollDiv        = obj 
    var scrollContent    = document.createElement("span") 
    scrollContent.style.position = "absolute" 
    scrollDiv.applyElement(scrollContent, "inside") 
    var displayWidth    = (oWidth  != "auto" && oWidth ) ? oWidth  : scrollContent.offsetWidth  + parseInt(scrollDiv.currentStyle.borderRightWidth) 
    var displayHeight    = (oHeight != "auto" && oHeight) ? oHeight : scrollContent.offsetHeight + parseInt(scrollDiv.currentStyle.borderBottomWidth) 
    var contentWidth    = scrollContent.offsetWidth 
    var contentHeight    = scrollContent.offsetHeight 
    var scrollXItems    = Math.ceil(displayWidth  / contentWidth)  + 1 
    var scrollYItems    = Math.ceil(displayHeight / contentHeight) + 1

scrollDiv.style.width     = displayWidth 
    scrollDiv.style.height     = displayHeight 
    scrollDiv.style.overflow = "hidden" 
    scrollDiv.setAttribute("state", "stop") 
    scrollDiv.setAttribute("drag", drag ? drag : "horizontal") 
    scrollDiv.setAttribute("direction", direction ? direction : "left") 
    scrollDiv.setAttribute("zoom", zoom ? zoom : 1) 
    scrollContent.style.zoom = scrollDiv.zoom 
     
    var scroll_script =    "var scrollDiv = " + scrollDiv.uniqueID                                        +"n"+ 
                "var scrollObj = " + scrollContent.uniqueID                                    +"n"+ 
                "var contentWidth = " + contentWidth + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)"    +"n"+ 
                "var contentHeight = " + contentHeight + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)"    +"n"+ 
                "var scrollx = scrollObj.runtimeStyle.pixelLeft"                                +"n"+ 
                "var scrolly = scrollObj.runtimeStyle.pixelTop"                                    +"n"+

"switch (scrollDiv.state.toLowerCase())"                                +"n"+ 
                "{"                                                    +"n"+ 
                    "case ('scroll')    :"                                    +"n"+ 
                        "switch (scrollDiv.direction)"                                +"n"+ 
                        "{"                                            +"n"+ 
                            "case ('left')        :"                            +"n"+ 
                                "scrollx = (--scrollx) % contentWidth"                    +"n"+ 
                                "break"                                    +"n"+ 
                            "case ('right')    :"                                +"n"+ 
                                "scrollx = -contentWidth + (++scrollx) % contentWidth"            +"n"+ 
                                "break"                                    +"n"+ 
                            "case ('up')    :"                                +"n"+ 
                                "scrolly = (--scrolly) % contentHeight"                    +"n"+ 
                                "break"                                    +"n"+ 
                            "case ('down')    :"                                +"n"+ 
                                "scrolly = -contentHeight + (++scrolly) % contentHeight"        +"n"+ 
                                "break"                                    +"n"+ 
                            "case ('left_up')    :"                            +"n"+ 
                                "scrollx = (--scrollx) % contentWidth"                    +"n"+ 
                                "scrolly = (--scrolly) % contentHeight"                    +"n"+ 
                                "break"                                    +"n"+ 
                            "case ('left_down')    :"                            +"n"+ 
                                "scrollx = (--scrollx) % contentWidth"                    +"n"+ 
                                "scrolly = -contentHeight + (++scrolly) % contentHeight"        +"n"+ 
                                "break"                                    +"n"+ 
                            "case ('right_up')    :"                            +"n"+ 
                                "scrollx = -contentWidth + (++scrollx) % contentWidth"            +"n"+ 
                                "scrolly = (--scrolly) % contentHeight"                    +"n"+ 
                                "break"                                    +"n"+ 
                            "case ('right_down')    :"                            +"n"+ 
                                "scrollx = -contentWidth + (++scrollx) % contentWidth"            +"n"+ 
                                "scrolly = -contentHeight + (++scrolly) % contentHeight"        +"n"+ 
                                "break"                                    +"n"+ 
                            "default        :"                            +"n"+ 
                                "return"                                +"n"+ 
                        "}"                                            +"n"+ 
                        "scrollObj.runtimeStyle.left = scrollx"                            +"n"+ 
                        "scrollObj.runtimeStyle.top = scrolly"                            +"n"+ 
                        "break"                                            +"n"+ 
     
                    "case ('stop')    :"                                        +"n"+ 
                    "case ('drag')    :"                                        +"n"+ 
                    "default    :"                                        +"n"+ 
                        "return"                                        +"n"+ 
                "}" 
     
    var contentNode = document.createElement("span") 
    contentNode.runtimeStyle.position = "absolute" 
    contentNode.runtimeStyle.width = contentWidth 
    scrollContent.applyElement(contentNode, "inside") 
    for (var i=0; i <= scrollXItems; i++) 
    { 
        for (var j=0; j <= scrollYItems ; j++) 
        { 
            if (i+j == 0)    continue 
            var tempNode = contentNode.cloneNode(true) 
            var contentLeft, contentTop 
            scrollContent.insertBefore(tempNode) 
            contentLeft = contentWidth * i 
            contentTop = contentHeight * j 
            tempNode.runtimeStyle.left = contentLeft 
            tempNode.runtimeStyle.top  = contentTop 
        } 
    }

scrollDiv.onpropertychange = function() 
    { 
        var propertyName = window.event.propertyName 
        var propertyValue = eval("this." + propertyName) 
         
        switch(propertyName) 
        { 
            case "zoom"        : 
                var scrollObj = this.children[0] 
                scrollObj.runtimeStyle.zoom = propertyValue 
                var content_width  = scrollObj.children[0].offsetWidth  * propertyValue 
                var content_height = scrollObj.children[0].offsetHeight * propertyValue 
                scrollObj.runtimeStyle.left = -content_width  + (scrollObj.runtimeStyle.pixelLeft % content_width) 
                scrollObj.runtimeStyle.top  = -content_height + (scrollObj.runtimeStyle.pixelTop  % content_height) 
                break 
        } 
    } 
     
    scrollDiv.onlosecapture = function() 
    { 
        this.state = this.tempState ? this.tempState : this.state 
        this.runtimeStyle.cursor = "" 
        this.removeAttribute("tempState") 
        this.removeAttribute("start_x") 
        this.removeAttribute("start_y") 
        this.removeAttribute("default_left") 
        this.removeAttribute("default_top") 
    } 
     
    scrollDiv.onmousedown = function() 
    { 
        if (this.state != "drag")    this.setAttribute("tempState", this.state) 
        this.state = "drag" 
        this.runtimeStyle.cursor = "default" 
        this.setAttribute("start_x", event.clientX) 
        this.setAttribute("start_y", event.clientY) 
        this.setAttribute("default_left", this.children[0].style.pixelLeft) 
        this.setAttribute("default_top", this.children[0].style.pixelTop) 
        this.setCapture() 
    } 
     
    scrollDiv.onmousemove = function() 
    { 
        if (this.state != "drag")    return 
        var scrollx = scrolly = 0 
        var zoomValue = this.children[0].style.zoom ? this.children[0].style.zoom : 1 
        var content_width = this.children[0].children[0].offsetWidth * zoomValue 
        var content_Height = this.children[0].children[0].offsetHeight * zoomValue 
        if (this.drag == "horizontal" || this.drag == "both") 
        { 
            scrollx = this.default_left + event.clientX - this.start_x 
            scrollx = -content_width + scrollx % content_width 
            this.children[0].runtimeStyle.left = scrollx 
        } 
        if (this.drag == "vertical" || this.drag == "both") 
        { 
            scrolly = this.default_top + event.clientY - this.start_y 
            scrolly = -content_Height + scrolly % content_Height 
            this.children[0].runtimeStyle.top = scrolly 
        } 
    } 
     
    scrollDiv.onmouseup = function() 
    { 
        this.releaseCapture() 
    } 
     
    scrollDiv.state = "scroll" 
    setInterval(scroll_script, speed ? speed : 20) 
} 
</script> 
<script language="JScript"> 
window.onload = new Function("scroll(document.all['testDiv'], 325)") 
</script> 
<br> 
<button onclick="testDiv.direction='up'; testDiv.state='scroll'"><span style="font-family: Webdings">5</span>向上</button> 
<button onclick="testDiv.direction='left'; testDiv.state='scroll'"><span style="font-family: Webdings">3</span>向左</button> 
<button onclick="testDiv.state='stop'"><span style="font-family: Webdings">;</span>停止</button> 
<button onclick="testDiv.state='scroll'"><span style="font-family: Webdings">8</span>播放</button> 
<button onclick="testDiv.direction='right'; testDiv.state='scroll'"><span style="font-family: Webdings">4</span>向右</button> 
<button onclick="testDiv.direction='down'; testDiv.state='scroll'"><span style="font-family: Webdings">6</span>向下</button> 
<br> 
缩放： 
<select onchange="testDiv.zoom = this.options[selectedIndex].value"> 
    <option value=1>100%</option> 
    <option value=2>200%</option> 
    <option value=3>300%</option> 
</select>　　　　　 
托动范围： 
<select onchange="testDiv.drag = this.options[selectedIndex].value"> 
    <option value="both">随意</option> 
    <option value="horizontal" selected>横向</option> 
    <option value="vertical">纵向</option> 
</select> 
</td></tr> 
</table> 
</BODY> 
</HTML>

关于图片多方向滚动控制效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/20090303705.shtml方便下次再访问哦。

·上一篇： 根据不同的节日变换图片或LOGO的特效代码
·下一篇： 向上滚动图片效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

图片多方向滚动控制效果

文章分类LIST >>返回首页

最新游戏

最新新闻