<!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; //页面总宽度-页面可见宽度
},
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){
/*注册事件*/
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+滚轮水平滚动
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>
