<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ?</head>
<script type="text/javascript" src="http://localhost:8080/js/jquery-1.11.1.js"></script>
<style type="text/css">
? ? img{
? ? ? ? height:200px;
? ? }
? ? #fhtable,#fhtable2{
? ? ? ? height:250px;
? ? ? ? display: inline-block;
? ? ? ? width:500px;
? ? ? ? overflow-x: auto;
? ? ? ? white-space:nowrap;
? ? }
</style>
?? ?<body>
<div? id = "fhtable" >
<img src="http://pic127.huitu.com/pic/20190812/1924809_20190812104404205017_0.jpg" class="uploadImg" alt="" id="localfile" >
<img src="http://pic127.huitu.com/pic/20190812/1924809_20190812104404205017_0.jpg" class="uploadImg" alt="" id="localfile" >
<img src="http://pic127.huitu.com/pic/20190812/1924809_20190812104404205017_0.jpg" class="uploadImg" alt="" id="localfile" >
<img src="http://pic127.huitu.com/pic/20190812/1924809_20190812104404205017_0.jpg" class="uploadImg" alt="" id="localfile" >
<img src="http://pic127.huitu.com/pic/20190812/1924809_20190812104404205017_0.jpg" class="uploadImg" alt="" id="localfile" >
<img src="http://pic127.huitu.com/pic/20190812/1924809_20190812104404205017_0.jpg" class="uploadImg" alt="" id="localfile" >
<img src="http://pic127.huitu.com/pic/20190812/1924809_20190812104404205017_0.jpg" class="uploadImg" alt="" id="localfile" >
<img src="http://pic127.huitu.com/pic/20190812/1924809_20190812104404205017_0.jpg" class="uploadImg" alt="" id="localfile" >
<img src="http://pic127.huitu.com/pic/20190812/1924809_20190812104404205017_0.jpg" class="uploadImg" alt="" id="localfile" >
<img src="http://pic127.huitu.com/pic/20190812/1924809_20190812104404205017_0.jpg" class="uploadImg" alt="" id="localfile" >?
</div>
</body>
<script>
? ? var horscroll = {
? ? ? ? elId: "",
? ? ? ? width: 0,
? ? ? ? height: 0,
? ? ? ? canView: 0,
? ? ? ? srcollWidth : 100,
? ? ? ? moveWidth: 0,
? ? ? ? init: function(){
? ? ? ? ? ? horscroll.width =? document.getElementById(horscroll.elId).scrollWidth;
? ? ? ? ? ? horscroll.height =? document.getElementById(horscroll.elId).clientHeight;
? ? ? ? ? ? horscroll.canView = document.getElementById(horscroll.elId).clientWidth;
? ? ? ? ? ? horscroll.width = horscroll.width - horscroll.canView;? //頁(yè)面總寬度-頁(yè)面可見寬度
? ? ? ? },
? ? ? ? addNum: function (){
? ? ? ? ? ? ? if(horscroll.moveWidth+horscroll.srcollWidth > horscroll.width){
? ? ? ? ? ? ? ? horscroll.moveWidth = horscroll.width;
? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? horscroll.moveWidth = horscroll.moveWidth + horscroll.srcollWidth;
? ? ? ? ? ? ? }
? ? ? ? },
? ? ? ? reduceNum: function(){
? ? ? ? ? ? if(horscroll.moveWidth-horscroll.srcollWidth < 0){
? ? ? ? ? ? ? horscroll.moveWidth = 0;
? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? horscroll.moveWidth = horscroll.moveWidth - horscroll.srcollWidth;
? ? ? ? ? ? ? }
? ? ? ? },
? ? ? ? mouseMoveListent: function(Id){
? ? ? ? ? /*注冊(cè)事件*/?
? ? ? ? ? ? ? horscroll.elId = Id;
? ? ? ? ? ?? ??if(document.addEventListener){?
? ? ? ?? ??? ??? ??? ?document.addEventListener('DOMMouseScroll',horscroll.scrollFunc,false);?
? ? ?? ??? ??? ?}//W3C?
? ? ?? ??? ??? document.onmousewheel=horscroll.scrollFunc;//IE/Opera/Chrome?
? ? ? ? },
? ? ? ? scrollFunc: function(e){
? ? ? ? ? ? horscroll.init();
? ? ? ? ? ? //chrome瀏覽器自帶熱鍵shift+滾輪水平滾動(dòng)
? ? ? ? ? ? var shiftKey = e.shiftKey ;
? ? ? ? ? ? //按住shift鍵
? ? ? ? ? ? if(shiftKey) {
? ? ? ? ? ? ? e.preventDefault();
? ? ?? ??? ??? ??? ?if(e.wheelDelta > 0){//IE/Opera/Chrome
? ? ? ? ? ? ? ? ? ? ? horscroll.reduceNum()
? ? ?? ??? ??? ??? ?}else if(e.wheelDelta < 0){
? ? ? ? ? ? ? ? ? ? ? horscroll.addNum()
? ? ? ? ? ? ? ? ? ? }else if (event.detail > 0) {
/** Mozilla case. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
? ? ? ? ? ? ? ? ? ? horscroll.addNum()
? ? ? ? }else if (event.detail < 0) {
/** Mozilla case. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
? ? ? ? ? ? ? ? ? horscroll.reduceNum()
? ? ? ? }
? ? ? ? ? ? ? ? ? ? document.getElementById( horscroll.elId ).scrollLeft = horscroll.moveWidth
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? ? function createHorscroll(Id){
? ? ? ? var o = new Object();
? ? ? ? o = horscroll;
? ? ? ? o.mouseMoveListent(Id);
? ? ? ? return o;
? ? ? }
? ? ? createHorscroll("fhtable");
</script>
</html>
