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 ...
随机推荐
- Visual Studio中创建混合移动应用程序解决方案Xamarin Portable Razor
在Visual Studio中创建混合移动应用程序的一个解决方案是使用Xamarin Portable Razor工具,这是ASP.NET MVC API针对移动设备的一个轻量级实现.Xamarin编 ...
- Mina入门实例（一）
mina现在用的很多了,之前也有用到,但是毕竟不熟悉,于是查了一些资料,做了一些总结.看代码是最直观的,比什么长篇大论都要好.不过其中重要的理论,也要理解下. 首先是环境,程序运行需要几个包,这里用m ...
- Python黑帽编程 4.1 Sniffer(嗅探器)之数据捕获（上）
Python黑帽编程 4.1 Sniffer(嗅探器)之数据捕获(上) 网络嗅探,是监听流经本机网卡数据包的一种技术,嗅探器就是利用这种技术进行数据捕获和分析的软件. 编写嗅探器,捕获数据是前置功能, ...
- MySQL实现嵌套集合模型
MySQL实现嵌套集合模型 译文主要是介绍如何用MySQL来存储嵌套集合数据.在其中会增加一些自己的理解,也会删除掉一些自认为无用的废话. 这篇文章主要讲的是嵌套集合模型,所以邻接表不是本文的重点,简 ...
- 让Chrome 接管邮件连接，收发邮件更方便了
页面中除了传统的超链接外,还可以将邮箱地址写入<a>标签,意思不表自明,当然是用户点击后就会打开相应的邮件客户端向这个连接指向的邮件地址发邮件. <a href="mail ...
- 《深入理解 java虚拟机》学习笔记
java内存区域详解 以下内容参考自<深入理解 java虚拟机 JVM高级特性与最佳实践>,其中图片大多取自网络与本书,以供学习和参考.
- Security2:Create User
User 用于访问DB Users based on logins in master (This is the most common type of user.) User based on a ...
- 当GitHub把我当成DDos攻击者拉进了黑名单中。。。
Github黑名单自救+快速稳定FQ 异常处理汇总-开发工具 http://www.cnblogs.com/dunitian/p/4522988.html 原因:项目冲突,没有先更新后提交,他自行更 ...
- Polynomial Library in OpenCascade
Polynomial Library in OpenCascade eryar@163.com 摘要Abstract:分析幂基曲线即多项式曲线在OpenCascade中的计算方法,以及利用OpenSc ...
- Qt with OpenCascade
Qt with OpenCascade 摘要Abstract:详细介绍了如何在Qt中使用OpenCascade. 关键字Key Words:Qt.OpenCascade 一.引言 Introducti ...