Jquery控制div滚动,但不显示滚动条
2016-04-21 19:43
363 查看
Jquery控制div滚动,但不显示滚动条
Html代码:
<div class="dv_phone_pic"> <div class="prew_box"> <div class="dv_icon" id="prew"></div> </div> <div id="dv_pics_box"></div> <div class="next_box"> <div class="dv_icon" id="next"></div> </div> </div>
Css样式
.dv_phone_pic{ width: 1200px; height: 500px; margin: auto; background-color:#333 } #dv_pics_box{ width: 900px; height: 500px; margin-top:0px; margin-left:10px; margin-right:10px; float: left; overflow-y:hidden; overflow-x: hidden; } .dv_icon{ width: 60px; height: 60px; float: left; cursor: pointer; } .prew_box{ width: 60px; height: 60px; float: left; margin: 240px 20px; } .next_box{ width: 60px; height: 60px; float: left; margin: 240px 20px; } #prew{ background-image: url("../images/pre2.png"); background-repeat: no-repeat; } #next{ background-image: url("../images/next2.png"); background-repeat: no-repeat; }
JS代码:
var jsonArray=eval(data.message.imgs); var picCount=jsonArray.length; var boxWidth=picCount*300; console.log("box Width: "+boxWidth); var t=' <div class="dv_phone_pic_content" style="width:'+boxWidth+'px">'; for(Picitem in jsonArray){ var img=jsonArray[Picitem]; console.log("imgs Item:"+img); t+='<img class="img_app_pic_item" src="' + img + '"/>'; } t+='</div>'; $("#dv_pics_box").html(t);
说明:我的图片是从网络获取的,有多张。
效果展示图:
相关文章推荐
- Jquery实现下拉多选框multiSelect
- HTML5第8次课堂笔记( 模拟form表单提交数据,xml的解析,jQuery的Ajax方法使用, mui的ajax)
- jQuery 监控键盘一段时间内没输入
- JS/Jquery得到Select标签显示值和value值
- vue-cli webpack 引入jquery
- 理解jquery的$.extend()、$.fn和$.fn.extend()
- 理解jquery的$.extend()、$.fn和$.fn.extend()
- 上传文件jQuery 的ajaxFileUpload 方法上传文件
- 【javascript】利用jquery ajaxPrefilter防止ajax重复提交
- jQuery eq()方法 =》加载页面时单选框默认选中
- web图片点击全屏jquery
- Jquery帮助文档
- jQuery-点击按钮插入视频
- jQuery.extend 函数详解
- jQuery EasyUI 表单
- jQuery中处理指针移过去时的列表标题显示与隐藏
- JQuery ==与=== 解说
- jquery multiselect使用示例
- jquery $(document).ready() 与window.onload的区别
- JQuery EasyUI环境的搭建