jquery鼠标移动div内容上下左右滚动
jquery鼠标移动div内容上下左右滚动
点击这里查看效果：http://keleyi.com/keleyi/phtml/jqtexiao/9.htm
<!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>鼠标移动 div内容滚动 - 柯乐义</title>
<meta name="keywords" content="鼠标移动 div内容滚动">
<meta name="description" content="鼠标移动 div内容滚动">
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.8.3.min.js"></script>
</head> <body> <div style="width:1000px;margin:24px auto;">
<h1>1. 横向滚动 1 Horizontal Scrolling</h1>
<style>
.thumbs-block {
position:relative; /**/
overflow: hidden;
background: #ccc;
margin: 0 5px;
width: 714px;
height:142px; /**/
}
.thumbs-block .thumbs {
white-space: nowrap;
text-align: center;
}
.thumbs-block .thumb {
display: inline-block;
padding: 5px;
margin: 5px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.3);
height: 120px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
} .thumbs{
position:absolute; /**/
margin-left:0; /**/
}
</style>
<script>
$(function () {
var $bl = $(".thumbs-block"),
$th = $(".thumbs"),
blW = $bl.outerWidth(),
blSW = $bl[0].scrollWidth,
wDiff = (blSW / blW) - 1, // widths difference ratio
mPadd = 60, // Mousemove Padding
damp = 20, // Mousemove response softness
mX = 0, // Real mouse position
mX2 = 0, // Modified mouse position
posX = 0,
mmAA = blW - (mPadd * 2), // The mousemove available area
mmAAr = (blW / mmAA); // get available mousemove fidderence ratio $bl.mousemove(function (e) {
mX = e.pageX - this.offsetLeft;
mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr;
}); setInterval(function () {
posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"
$th.css({ marginLeft: -posX * wDiff });
}, 10); });
</script>
This one will have 60px "mousemove padding" at each side:
<div class="thumbs-block">
<div class="thumbs">
<a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/1.gif" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/2.gif" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/3.gif" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/4.gif" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/5.gif" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/6.gif" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/7.gif" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/8.gif" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/9.gif" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/10.gif" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/11.gif" width="120" height="120" /></a>
<a href="#" rel="group" class="fancybox thumb"><img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/12.gif" width="120" height="120" /></a>
</div>
</div><br>
来源： <a href="http://jsbin.com/uninug/3/edit">http://jsbin.com/uninug/3/edit</a><br><br>
<div><a href="http://keleyi.com/a/bjac/tathyx7l.htm" target="_blank">原文</a></div>
<h1>2. 横向滚动 2 Horizontal Scrolling</h1> <style>
#parent{
position:relative;
margin:0 auto;
height: 260px;
width: 100%;
background: #ddd;
}
#propertyThumbnails{
position:relative;
overflow:hidden;
background:#444;
width:100%;
height:262px;
white-space:nowrap;
}
#propertyThumbnails img{
vertical-align: middle;
height: 260px;
display:inline;
margin-left:-4px;
}
</style>
<script>
$(function () {
$(window).load(function () {
var $gal = $("#propertyThumbnails"),
galW = $gal.outerWidth(true),
galSW = $gal[0].scrollWidth,
wDiff = (galSW / galW) - 1, // widths difference ratio
mPadd = 60, // Mousemove Padding
damp = 20, // Mousemove response softness
mX = 0, // Real mouse position
mX2 = 0, // Modified mouse position
posX = 0,
mmAA = galW - (mPadd * 2), // The mousemove available area
mmAAr = (galW / mmAA); // get available mousemove fidderence ratio $gal.mousemove(function (e) {
mX = e.pageX - $(this).parent().offset().left - this.offsetLeft;
mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr;
}); setInterval(function () {
posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"
$gal.scrollLeft(posX * wDiff);
}, 10); });
});
</script>
<div id="parent">
<div id="propertyThumbnails">
<img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/Flower-festival.jpg" />
<img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/Flower-festival.jpg" />
<img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/Flower-festival.jpg" />
<img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/Flower-festival.jpg" />
<img src="http://keleyi.com/keleyi/phtml/jqtexiao/9/Flower-festival.jpg" />
</div>
</div><br>
来源： <a href="http://jsbin.com/alokat/1/edit">http://jsbin.com/alokat/1/edit</a><br><br> <h1>3. 纵向滚动 Vertical Scrolling</h1>
<style>
.box {
width:300px;
height:300px;
overflow-y:hidden;
background:#eee;
border:1px #ccc solid;
overflow:hidden;
}
.box p {
margin:1em;
}
</style>
<script>
$(document).ready(function () {
$(".box").mousemove(function (e) {
var h = $('#innerbox').height() + 13;
var offset = $($(this)).offset();
var position = (e.pageY - offset.top) / $(this).height();
$(".status").html('Percentage:' + ((e.pageY - offset.top) / $(this).height()).toFixed(2));
if (position < 0.33) $(this).stop().animate({ scrollTop: 0 }, 5000);
else if (position > 0.66) $(this).stop().animate({ scrollTop: h }, 5000);
else $(this).stop();
});
});
</script>
<div class="box">
<div id="innerbox" style="height:auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor volutpat elementum. Nunc enim enim, eleifend sit amet blandit a, vestibulum a purus. Phasellus at accumsan ante. Duis vestibulum rhoncus sapien a dapibus. Suspendisse malesuada aliquet faucibus. Vestibulum ut sem diam. Integer tempus pellentesque mi, et luctus nunc porttitor in. Nunc vel risus in mauris facilisis commodo.</p> <p>Etiam gravida accumsan tortor, vitae malesuada est volutpat at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Nunc mattis dapibus odio nec bibendum. Aliquam id lorem tellus, eget venenatis tellus. Aliquam quis eros arcu. Nam massa dui, scelerisque eu tempor a, faucibus ac ligula. Praesent gravida tempus magna, eu hendrerit nibh placerat tincidunt. Nulla eleifend semper ligula. Nulla vitae adipiscing orci.</p> <p>Pellentesque eu lorem vitae leo congue egestas eu et risus. Praesent laoreet odio eget urna bibendum id pharetra dolor placerat. Mauris molestie venenatis est. Nunc eu dictum risus. Morbi sodales laoreet dapibus. Duis euismod condimentum massa, fringilla sodales mauris feugiat sed. In in iaculis diam.</p> <p>keleyi.com .Donec velit magna, dignissim ac lobortis pharetra, laoreet a quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vitae quam ante. Fusce mi sapien, suscipit sed feugiat non, suscipit hendrerit neque. Maecenas elementum vestibulum bibendum. Curabitur nisl mauris, posuere cursus vestibulum sit amet, suscipit ac ligula. Nulla dolor tortor, lacinia vel mattis et, egestas tristique augue. Quisque at nibh tortor.</p> <p>In hac habitasse platea dictumst. Donec ullamcorper nisl sed leo porta euismod. Maecenas gravida scelerisque lobortis. In hac habitasse platea dictumst. Cras iaculis, justo vel aliquet faucibus, odio leo sollicitudin tellus, a sodales odio purus nec felis. In massa orci, euismod nec gravida vitae, pulvinar sit amet nulla. Integer in lorem lectus, eget dignissim ante.</p>
</div>
</div>
<div class="status"></div><br>
来源： <a href="http://jsfiddle.net/n3Q9j/5/">http://jsfiddle.net/n3Q9j/5/</a>
</div>
</body>
</html>
jquery鼠标移动div内容上下左右滚动的更多相关文章
- jQuery实现将div中滚动条滚动到指定位置的方法
1.JS代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainCo ...
- div内容上下左右居中
<!-- 遮罩层 --> <div id="test" > <div style="position:absolute;top:50%;le ...
- jQuery div内容间隔1秒动态向上滚动HTML、JS代码
demo1: <!DOCTYPE html> <html> <head> <title>div内容间隔1秒动态滚动</title> < ...
- jQuery鼠标滚动垂直全屏切换代码
体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...
- jQuery鼠标悬停内容动画切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- WPF中关于自定义控件的滚动条鼠标停留在内容上鼠标滚轮滚动无效的问题
问题起因:在一个用户控件里放置了1个TreeView垂直顺序放置. 当用户控件中的内容超过面板大小时,滚动条会自动出现 ,但是只有当鼠标指示在右边滚动条的那一条位置时,才支持鼠标滚轴滚动. 点在控件内 ...
- jquery控制div随滚动条滚动效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条 ...
- 简单实现弹出弹框页面背景半透明灰，弹框内容可滚动原页面内容不可滚动的效果(JQuery)
弹出弹框 效果展示 实现原理 html结构比较简单,即: <div>遮罩层 <div>弹框</div> </div> 先写覆盖显示窗口的遮罩层div.b ...
- 控制DIV内容滚动的方法，实现不用拖滚动条就可以看到最新消息
三种控制DIV内容滚动的方法: 本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群: 281442983 (点击链接加入群:http://jq.qq.com/?_wv ...
随机推荐
- C#实现DNS解析服务和智能DNS服务
C#实现DNS解析服务有一个开源项目ARSoft.Tools.Net, ARSoft.Tools.Net是一个非常强大的开源DNS控件库,包含.Net SPF validation, SenderID ...
- 减小ipa体积之删除frameWork中无用mach-O文件
最近项目末期, 我们团队为了ipa的大小使用不少的体积减小的方法, 除了一些常规的方法之外, 我分享一下自己研究出来的新思路. 首先我们来简单的介绍一下mach-O. 什么是mach-O? Mach- ...
- ［搜索引擎］Sphinx的介绍和原理探索
What/Sphinx是什么 定义 Sphinx是一个全文检索引擎. 特性 索引和性能优异 易于集成SQL和XML数据源,并可使用SphinxAPI.SphinxQL或者SphinxSE搜索接口 易于 ...
- Mysql 主从延时监控
200 ? "200px" : this.width)!important;} --> 介绍 主从延时在主从环境中是一个非常值得关注的问题,有时候我们可以通过show sla ...
- windows7查看最近使用记录
1.看计算机在哪天运行过~运行了多久! C:\Windows\SchedLgU.txt 2.看你最近运行过什么程序: C:\Windows\Prefetch 3.看你最近打开过什么文件(非程序)和文件 ...
- jquery插件的两种形式
这里总结一下jquery插件的两种形式,一种是通过字面量的形式组织代码,另一种是通过构造函数的方式.下面就两种形式来分析俩个例子. 例子1: ;(function ($,window,document ...
- 如何转型成为SQL Server DBA
本篇PPT是我在2015 MVP OPEN Day Comunity Camp上分享的课程.之所以选择这个主题是因为有很多人曾经问过这方面的问题,而与之相关的主题却少之又少,因此我希望将自己的 ...
- Sublime文件夹显示过滤
Preferences/Setting-User添加如下命令: "file_exclude_patterns": ["*.mate", "*.gif& ...
- Visualize Surface by Delaunay Triangulator
Visualize Surface by Delaunay Triangulator eryar@163.com Abstract. Delaunay Triangulation is the cor ...
- WPF做验证码，小部分修改原作者内容
原文地址:http://www.cnblogs.com/tianguook/p/4142346.html 首先感谢aparche大牛的帖子,因为过两天可能要做个登录的页面,因此,需要用到验证码,从而看 ...