图片多方向滚动控制效果

最新推荐文章于 2021-06-05 07:51:41 发布
最新推荐文章于 2021-06-05 07:51:41 发布
阅读量367 收藏
点赞数
分类专栏： javascript 文章标签： scroll function button border up table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiaolunihao/article/details/1866321
版权
<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 οnclick="testDiv.direction='up'; testDiv.state='scroll'"><span style="font-family: Webdings">5</span>向上</button>
<button οnclick="testDiv.direction='left'; testDiv.state='scroll'"><span style="font-family: Webdings">3</span>向左</button>
<button οnclick="testDiv.state='stop'"><span style="font-family: Webdings">;</span>停止</button>
<button οnclick="testDiv.state='scroll'"><span style="font-family: Webdings">8</span>播放</button>
<button οnclick="testDiv.direction='right'; testDiv.state='scroll'"><span style="font-family: Webdings">4</span>向右</button>
<button οnclick="testDiv.direction='down'; testDiv.state='scroll'"><span style="font-family: Webdings">6</span>向下</button>
<br>
缩放：
<select οnchange="testDiv.zoom = this.options[selectedIndex].value">
    <option value=1>100%</option>
    <option value=2>200%</option>
    <option value=3>300%</option>
</select>　　　　　
托动范围：
<select οnchange="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> 
 
qiaolunihao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
setAttribute()添加了事件属性，却无法触发事件的问题
轻尘居
06-07 3415
来自CSDN技术社区想解决如下问题：用getElementById()获得节点A位置，接着用y=getElementsByTagName("div")获得节点A下所有div标签元素，然后在循环中用y.item(i).setAttribute("onclick","treeClick()")使div元素获得onclick属性。在调试中发现div元素确实有了onclick属性，但却不会触发。不知道是什
JS实现图片无缝滚动效果
liujian573281的博客
01-12 5821
首先，借助一张草图来简单说明一下往左移动的做法（往右相同）。 如上图所示，图片的无缝滚动原理其实是把滚动的图片复制成两份并联排列，当滚动完一次后就把图片扯回到起点，重新滚动。这里的往左运动把图片扯回起点的临界点是offsetLeft的绝对值大于offsetWidth/2的绝对值。接着，我们再来看看具体实现的代码： 第一步：简单的布局，这里以外层的div为相对物设置相对定位并设置超出隐藏，再给
无间断的图片循环滚动效果
科研糖
02-12 2982
使用JavaScript脚本实现无间断的图片循环滚动效果，主要是通过JavaScript脚本创建的move函数实现的。在move函数中，变量speed的数值用来控制图片滚动的速度，同时在页面中应用层来实现图片的显示与隐藏。 <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="
用 js 实现图片的无缝滚动效果
qq_095的博客
09-07 3108
实现图片的无缝滚动 就是要让你的图片集在一定时间里自动切换，那就需要js里的定时器来控制时间。 一、js中关于定时器的方法有两种：setTimeout和setInterval。 它们接收的参数是一样的，第一个参数是函数，用于定时器的执行，第二个参数是数字，表示多少毫秒之后执行函数。 它们的不同点在于setTimeout只执行一次指定的函数，而setInterval则每隔规定的...
HTML中marquee实现图片滚动,HTML标签marquee实现滚动效果(示例代码)
weixin_39551462的博客
06-05 925
页面的自动滚动效果，可由javascript来实现，但是今天无意中发现了一个html标签 - 可以实现多种滚动效果，无需js控制。使用marquee标记不仅可以移动文字，也可以移动图片，表格等.语法：...； 说明：在标记之间添加要进行滚动的内容。重要属性：1.滚动方向direction(包括4个值：up、 down、 left和 right)语法：...2.滚动方式behavior(scroll...
音视频资料-图片多方向滚动控制效果.rar
09-16
在IT行业中，图片多方向滚动控制效果是一种常见的用户体验设计元素，尤其在网页和移动应用中。这个主题主要涉及前端开发，特别是JavaScript、CSS3以及HTML5等技术的应用。以下是关于这个话题的详细解释： 1. **...
易语言用滚动条和键盘方向键控制移动显示图片
07-20
本知识点将深入讲解如何利用易语言实现“用滚动条和键盘方向键控制移动显示图片”的功能。 首先，我们要理解滚动条和键盘方向键的基本作用。滚动条是GUI界面中常见的控件，分为水平滚动条和垂直滚动条，用于调整...
jQuery动画效果实现图片无缝连续滚动
10-22
这种方法的关键在于通过JavaScript库jQuery来控制DOM元素的移动，以达到视觉上的无间断滚动效果。 首先，我们需要理解HTML结构。在提供的代码中，`<div id="container">` 是整个滚动区域的容器，它设置了固定宽度和...
js实现可控制左右方向的无缝滚动效果
10-22
主要介绍了js实现可控制左右方向的无缝滚动效果,页面中添加了两个按钮，控制图片滚动的方向，感兴趣的小伙伴们可以参考一下
JS控制图片滚动的效果.rar
07-05
这个"JS控制图片滚动的效果.rar"压缩包很可能包含了实现这一效果的相关代码和资源。JS特效，尤其是滚动代码，能够为网站增添动态性和吸引力，帮助用户更好地交互和体验网页内容。 首先，我们来探讨一下图片滚动的...
js定时刷新页面
qiaoyuetian博客访谈
11-04 1656
定时刷新页面－阿里西西www.alixixi.com var limit="0:15" if (document.images){ var parselimit=limit.split(":") parselimit=parselimit[0]*60+parselimit[1]*1 } function beginrefresh(){ if (!document.images) retu
页面变灰色居中的浮动层对话框
qiaoyuetian博客访谈
11-04 1301
浮动层居中的对话框效果演示HTML { HEIGHT: 100%}BODY { HEIGHT: 100%}BODY { FONT-SIZE: 14px; FONT-FAMILY: Tahoma, Verdana, sans-serif}DIV.neat-dialog-cont { Z-INDEX: 98; BACKGROUND: none transparent scroll repeat 0%
js 弹窗代码汇总
qiaoyuetian博客访谈
11-07 1248
【0、超完美弹窗代码 】 功能：5小时弹一次+背后弹出+自动适应不同分辩率+准全屏显示 代码： function openwin(){ window.open(http://www.6882.com,"pop1","width="+(window.screen.width-15)+",height="+(window.screen.height-170)+",left=0,top=0,
prototype.js的系列文章——Ajax.Request类
qiaoyuetian博客访谈
10-21 1233
如果你不使用任何的帮助程序包，你很可能编写了整个大量的代码来创建XMLHttpRequest对象并且异步的跟踪它的进程， 然后解析出响应 然后处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。假如你有一个应用程序可以通过url http://yoursever/app/get_sales?empID=12
新闻切换选项卡效果
qiaoyuetian博客访谈
11-04 654
新闻切换技术 body { text-align: center; margin:0; padding:0; background: #FFF; font-size:12px; color:#000;} div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;} h1,h2,h3,h4,h5,h6 { margin
一个很漂亮的转入别的页面时等待页
qiaoyuetian博客访谈
11-04 631
::群英网络电脑技术论坛::TD {    FONT-FAMILY: 宋体; FONT-SIZE: 12px; LETTER-SPACING: 2px; LINE-HEIGHT: 150%; font-color: #000000}FORM {    FONT-FAMILY: 宋体; FONT-SIZE: 12px; LETTER-SPACING: 2px; LINE-HEIGHT: 150%;
图层动态伸缩效果
qiaoyuetian博客访谈
11-04 611
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">runcodevar mh = 30;//最小高度var step = 1;//每次变化的px量var ms = 10;//每隔多久循环一次function toggle(o){  if (!o.tid)o.tid = "_" + Math.random() * 100;  if (!wind
鼠标控制图片放大缩小div带滚动条效果
最新发布
06-12
要实现这个功能，你可以使用CSS中的transform属性来控制图片的放大缩小，同时使用overflow属性来添加滚动条。...这样，当用户滚动鼠标滚轮时，图片就会在div容器中缩放，并添加滚动条来实现图片的放大缩小效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值