实现新浪微博图片浏览的功能 在一个div内显示一个比div内容高的图片,当想看到图片其他部分时可以通过滚轮实现上下滚动图片。
原理:嵌套2层div内层的高度固定overflow:scroll;这样会显示滚动条,然后让外层的div宽高小一点overflow:hidden;刚好把滚动条的部分隐藏掉,这样就可以实现无滚动条的滚动了
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无滚动条的图片滚动</title>
<style type="text/css">
*{ margin:0; padding:0}
.outer{width:400px; height:280px; margin:0 auto; border:1px solid #33F; overflow:hidden; background:#9C0; text-align:center;}
.mousewheel_example{ width:420px; height:300px; margin:0 auto; overflow:scroll; font-size:12px; color:#F00; text-align:center;}
</style>
</head>
<body>
<br /><br/><br /><br/><br /><br/>
<div class="outer">
<div class="mousewheel_example">
<img src="images/w.jpg" />
</div>
</div>
</body>
</html>
分享到:
相关推荐
鼠标滚轮滚动CSS3网站模板是一款带有视差滚动效果,适合平面设计企业网站模板下载。
这是一款支持鼠标滚轮控制的CSS3图片滚动切换展示特效,可看作是一个网页焦点图特效,也可看作是单纯的图片展示吧,可通过鼠标中轮滚动的方法来切换当前图片,上一张,下一张浏览查看图片。
css 实现的几个图片自动滚动的模板 还有404的页面模板
鼠标滚轮滚动CSS3网站模板是一款带有视差滚动效果,适合平面设计企业网站模板下载。.zip源码资源下载鼠标滚轮滚动CSS3网站模板是一款带有视差滚动效果,适合平面设计企业网站模板下载。.zip源码资源下载
鼠标滚轮滚动CSS3网站模板是一款带有视差滚动效果,适合平面设计企业网站模板下载。.rar
jQuery鼠标滚轮滚动条代码.zip
PC端通过鼠标滚轮横向滚动页面,可以给元素加上自定义属性,产生视觉差效果
鼠标滚轮滚动CSS3网站模板是一款带有视差滚动效果,适合平面设计企业网站模板下载。_html网站模板_网页源码移动端前.rar
打开页面后,用鼠标滚轮上下滚动时,发现页面并不会滚动,滚动的部分却是div里面的三部分,效果很不错 使用方法: 1、在你的网页head中引入css样式 2、将代码部分拷贝到你的网页中 3、在底部引入四...
设置window的scrollLeft值,这里一定要是window不能是body否则滚动有问题,绑定事件mousewhell 也必须是在body上,感兴趣的各位可以了解下哈,希望可以帮助到你
HTML5鼠标滚动变成双屏模板是一款个性的鼠标滚轮滚动页面带有视差效果,从全.rar
CSS3鼠标滚动控制页面滚动特效是一款基于CSS3属性制作的鼠标滚动控制页面单屏滚动效果。
CSS3实现旋转LOGO是一款jquery css3实现的鼠标滚轮滚动logo旋转特效。
JS鼠标滚轮水平滚动特效.zip
下面通过一段JQuery代码实现鼠标滚轮...这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效。效果图如下: 实现的代码。 html代码: <h1></h1> 适用浏览器:360、FireFox、Chrome、S
js+css3实现3D骰子特效是一款滚动鼠标滚轮时可以放大,骰子会慢慢的变形一直到可以看骰子里的世界,效果非常棒。
支持手机端的CSS3全屏上下滚动视差特效JS...,支持鼠标滚轮上下滚动,这种特效代码非常的流行,特别是在微信微场景的使用中,常见这种特 效代码,上下滚动加上CSS3动画效果就可以做出用户体验不错的产品介绍页之类的。
CSS3实现旋转LOGO是一款jquery+css3实现的鼠标滚轮滚动logo旋转特效。
jQuery网页向下滚动数字增加动画特效是一款鼠标滚轮滚动网页页面jQuery滚动事件代码。
实用jquery实现鼠标滚轮控制改变文本框数字的插件 21.实用jquery使用ul模拟表单select列表效果 22.实用jQuery无限级导航菜单源码下载 23.适合于网站注册的jQuery用户注册条款插件下载(带特效) 24.提升用户...