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 ...
随机推荐
- MyBatis（增删改查）
1.工程中引入包: mybatis-3.2.7.mysql-connector-java-5.1.22-bin 2.添加配置文件: <?xml version="1.0" e ...
- ES7之Decorators实现AOP示例
在上篇博文CoffeeScript实现Python装潢器中,笔者利用CoffeeScript支持的高阶函数,以及方法调用可省略括符的特性,实现了一个类似Python装潢器的日志Demo.这只是一种伪实 ...
- HTTPS那些事（一）HTTPS原理（转载）
原创地址:http://www.guokr.com/post/114121/ 楔子 谣言粉碎机前些日子发布的<用公共WiFi上网会危害银行账户安全吗?>,文中介绍了在使用HTTPS进行 ...
- Zookeeper API for JAVA实战与应用
package com.zookeeper.watcher; import java.util.List; import java.util.concurrent.CountDownLatch; im ...
- 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章 ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...
- SSISDB6：Operation
SSISDB使用Operation表示对SSIS Project所做的任何操作,在执行一次Operation时,SSISDB会记录Operation的Message,当触发Event时,会记录Even ...
- OpenCascade Chinese Text Rendering
OpenCascade Chinese Text Rendering eryar@163.com Abstract. OpenCascade uses advanced text rendering ...
- JavaScript Arguments.callee解释
Arguments.callee : 返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文.[function.]arguments.callee可选项 functio ...
- 【原创】开源Math.NET基础数学类库使用(15)C#计算矩阵行列式
本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 上个月 ...
- 使用jQuery的animate方法制作滑动菜单
周末看Ziv小威的博客<制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿>,参见地址:http://www.cnblogs.com/zivxiaowei/p/3462964.html.是 ...