JS 滚动条控制box-shadow内阴影

lujinan858

浏览: 522874 次
性别:
来自: 大连

最近访客更多访客>>

cht的大摩托

linshantang

blueseabluesky

xubukang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS
javascript

inset 15px 0px 15px -15px rgba(34,39,238,41),	/*左边阴影  蓝色#2279ee*/
inset -15px 0px  15px -15px rgba(93,93,93,41);  /*右边阴影*/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{padding: 0;margin: 0;list-style: none;}
            #box{width: 792px;height: 300px;border: 1px solid #ddd;margin: 100px auto;position: relative;overflow: hidden;
				box-shadow:
				/*inset 15px 0px 15px -15px rgba(34,39,238,41),	左边阴影  蓝色#2279ee*/
				/*inset -15px 0px  15px -15px rgba(93,93,93,41);  右边阴影*/                
			}
            #box_top{position: absolute;left:0;top:20px;}
            #box_top li{float: left; white-space: nowrap;}
            #box_bottom{width: 100%;position: absolute;left: 0;bottom: 0;background: #e8e8e8;height: 25px;}
            #mask{height: 25px;background: orangered;border-radius: 12px;position: absolute;left: 0;top: 0;cursor: pointer;}
            /*#box_top li img{
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }*/
        </style>
    </head>
    <body>
        <div id="box">
		
            <ul id="box_top">
                <li>PingWest品玩7月10讯，根据路透社报道，美国商务部长威尔伯·罗斯（Wilbur Ross）表示，美国商务部将在不危及美国国家安全的情况下，向华为的美国供应商发放许可证。罗斯表示，华为仍在实体清单中，并且禁止的项目范围也不会改变，这意味着申请许可证可能会被拒绝，但此次打开了申请许可证的大门。报道称，行业观察人士表示目前对实际政策的范围以及哪些类型将被批准或被拒绝尚不清楚，只能通过提交申请来确定。</li>
            </ul>
            <div id="box_bottom">
                <span id="mask"></span>
            </div>
			
        </div>
         
        <script type="text/javascript">
            window.onload = function(){
                var box = document.getElementById("box")
                var box_top = document.getElementById("box_top")
                var box_bottom = document.getElementById("box_bottom")
                var mask = document.getElementById("mask")
                 
    //          获取内容的总宽度
                var li= box_top.children[0]
                console.log(li.offsetWidth)
                
                var liL = box_top.children[0].offsetWidth
                box_top.style.width = liL + "px"
                         
    //          滚动条的长度 = (盒子的宽度 / 内容的宽度)*盒子的宽度
                var mask_len = (box.offsetWidth / box_top.offsetWidth)*box.offsetWidth
                mask.style.width = mask_len + "px"
				
				if(box_top.offsetWidth > box.offsetWidth){
					box.style.boxShadow = 'inset -15px 0px  15px -15px rgba(93,93,93,41)';
					mask.style.display = '';
					box_bottom = 'none';
				}else{
					box.style.boxShadow = '';
					mask.style.display = 'none';
					box_bottom = 'none';
				}
                 
    //          鼠标操作
                mask.onmousedown = function(e){
                    e = e || event
                    var beginX = e.clientX - mask.offsetLeft
                    document.onmousemove = function(e){
                        e = e || event
                        var endX = e.clientX - beginX
                        if(endX < 0){
                            endX = 0
                        }
                        if(endX >= box.offsetWidth - mask.offsetWidth){
                            endX = box.offsetWidth - mask.offsetWidth
                        }
                        
                        mask.style.left = endX + "px"
						
						console.log('beginX = ' + beginX);
						console.log('endX = ' + endX);
						
						if(endX == 0){
							box.style.boxShadow = 'inset -15px 0px  15px -15px rgba(93,93,93,41)';
						}else if(endX > 0 && endX < box.offsetWidth - mask.offsetWidth){
							box.style.boxShadow = 'inset 15px 0px 15px -15px rgba(34,39,238,41), inset -15px 0px  15px -15px rgba(93,93,93,41)';
						}else if (endX == box.offsetWidth - mask.offsetWidth){
							box.style.boxShadow = 'inset 15px 0px 15px -15px rgba(34,39,238,41)';
						}else{
							box.style.boxShadow = 'inset 15px 0px 15px -15px rgba(34,39,238,41), inset -15px 0px  15px -15px rgba(93,93,93,41)';
						}
                         
    //                  内容走的距离 = （内容的长度 - 盒子的长度 ）/ （盒子的长度 - 滚动条的长度）*滚动条走的距离
                        var contentL = (box_top.offsetWidth - box.offsetWidth)/(box.offsetWidth - mask.offsetWidth)*endX
                        box_top.style.left = -contentL + "px"
                        window.getSelection?window.getSelection().removeAllRanges():document.selection.empty()//防止拖动时选中内容      
                    }
                    document.onmouseup= function(e){
                        e = e || event
                        document.onmousemove = null
                    }
                 
                }
            }
        </script>
    </body>
</html>

参考：

CSS3 box-shadow

js div模拟水平滚动条

分享到：