图片-js 鼠标按住内容实现滚动内容 实现滚动条滚动效果

问题描述

js 鼠标按住内容实现滚动内容 实现滚动条滚动效果


就是不用右边的滚动条,,然后里面的vvvvvvv文字鼠标按住后,拖动它可以上下滚动,达到滚动条效果..

解决方案

mousedown后添加mousemove事件,判断鼠标y轴移动方向,设置容器scrollTop就可以滚动了。。不过你要禁止选择内容,要不选中内容不太好看。。

 <style>
.noselect{ -moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;}</style>
<div style="width:100px;height:100px;border:solid 1px #000;overflow:auto;" onselectstart="return false" id="dv">
是不用右边的滚动条,,然后里面的vvvvvvv文字鼠标按住后,拖动它可以上下滚动,达到滚动条效果..
</div>
<script>
    window.onload = function () {
        var dv = document.getElementById('dv'), oy;
        function mousemove(e) {
            e = e || window.event;
            dv.scrollTop = e.clientY - oy;
        }
        function mouseup() {
            dv.className = '';
            dv.onmouseup = dv.onmousemove = null;
        }
        dv.onmousedown = function (e) {
            dv.onmousemove = mousemove;
            dv.onmouseup = mouseup;
            e = e || window.event;
            oy = e.clientY;
            dv.className = 'noselect';
        }
    }
</script>

解决方案二:

兄台能详细说吗..你好QQ是多少???

时间: 2024-10-27 20:37:33

图片-js 鼠标按住内容实现滚动内容 实现滚动条滚动效果的相关文章

js 鼠标拖动对象 可让任何div实现拖动效果_javascript技巧

js鼠标拖动对象: 复制代码 代码如下: //定义鼠标拖动对象 drag=function (a,o){      var d=document;if(!a)a=window.event;         if(!a.pageX)a.pageX=a.clientX;         if(!a.pageY)a.pageY=a.clientY;      var x=a.pageX,y=a.pageY;      if(o.setCapture)          o.setCapture();

鼠标样式,整体背景图,滚动条的效果(网页效果)

鼠标样式|网页 变鼠标样式:<Body style='cursor:url(image/mouse.cur)' bgColor=#ffffff> 整体背景图:<STYLE type=text/css>BODY {BACKGROUND-IMAGE: url(image/bg1.gif)}</STYLE> 滚动条的效果:<style type="text/css">BODY {SCROLLBAR-FACE-COLOR: #ffffff; SC

求教如何将一款左右滚动的图片js特效修改成由左右按钮控制的滚动图片特js特效

问题描述 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type&qu

js监听滚动条滚动事件使得某个标签内容始终位于同一位置

 js如何监听滚动条滚动事件,使得某个标签内容始终位于同一位置,下面有个不错的示例,大家可以参考下 小知识点,废话不多说,直接上代码    css:   代码如下: <pre name="code" class="css"><style>  #anchor:{  position:absulate;  top:40%;  left:40%;  width:100px;  height:100px;  background-color:red;

当滚动条滚动到页面底部自动加载增加内容的js代码_javascript技巧

1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码 代码如下: //获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.s

图片旋转,鼠标滚轮缩放,镜像,切换图片js代码

demo下载地 址:http://download.csdn.net/detail/cometwo/9404811 感谢博客:http://www.cnblogs.com/cloudgamer/archive/2010/08/16/ImageTrans.html <!DOCTYPE html> <html lang="zh-cn"> <head> <title>图片旋转,鼠标滚轮缩放,镜像,切换图片</title> <m

图片旋转、鼠标滚轮缩放、镜像、切换图片js代码_javascript技巧

本文实例为大家展示了图片旋转.鼠标滚轮缩放.镜像.切换图片多重效果,提供了详细的代码,分享给大家供大家参考,具体内容如下 具体代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <title>图片旋转,鼠标滚轮缩放,镜像,切换图片</title> <meta charset="utf-8" /> <!--<script type="

js鼠标点击图片实现随机变换图片的方法_javascript技巧

本文实例讲述了js鼠标点击图片实现随机变换图片的方法.分享给大家供大家参考.具体实现方法如下: <html> <title>鼠标点击图片即可随机变换图片</title> <body bgcolor="#fef4d9" OnLoad="swapPic()"> <center> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var ra

js实现精美的图片跟随鼠标效果实例_javascript技巧

本文实例讲述了js实现精美的图片跟随鼠标效果实现方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>精美js鼠标跟随代码</title> </head> <body> <script> A=doc