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 ...
随机推荐
- You are attempting to run the 32-bit installer on a 64-bit version of Window
您正试图在64位版本的窗口中运行32位安装程序. 系统有32位操作系统和64位操作系统的分别,相同的软件的安装也需要区分操作操作系统的位数. 解决办法:查看自己系统类型,根据类型下载安装相应位数的软件 ...
- JPEG文件结构
JPEG文件由八个部分组成,每个部分的标记字节为两个,首字节固定为:0xFF,当然,准许在其前面再填充多个0xFF,以最后一个为准.下面为各部分的名称和第二个标记字节的数值,用ultraedit的16 ...
- IIS Community Newsletter June 2013
Announcements Windows 2012 Server R2 preview released Windows Server 2012 R2 provides a wide range o ...
- ABP框架理论学习之Debugging
返回总目录 所有的官方ABP nuget包都是支持GitLink的,这意味着你可以在项目中轻松地调试所有的以Abp为前缀的Nuget包. 要开启这项支持,"启用源服务器支持"选项应 ...
- ASP.NET MVC （Razor）开发<<周报与绩效考核系统>>，并免费提供园友们使用~~~
过去我们使用过一些周报工具来完成项目组或部门的周报填写与考核工作,但多少有些不理想,要么功能太过简单,要么功能特别繁杂,不接地气,使用不便. 后来我们就考虑自己开发一个简单的,实用的,易用的,接地气的 ...
- MySQL 常用的UPDATE操作
标签:UPDATE 概述 测试环境:mysql 5.6.21 步骤 创建测试表 CREATE TABLE `product` ( `proID` ) NOT NULL AUTO_INCREMENT C ...
- 《App研发录》 源码
第1章源码: 1.1 重新规划Android项目结构 1.1.zip 1.2 为Activity定义新的生命周期 1.2.zip 1.3 统一事件编程模型 1.3.zip 1.4 实体化编程 1.4. ...
- salesforce 零基础学习（四十八）自定义列表分页之Pagination基类封装 ※※※
我们知道,salesforce中系统标准列表页面提供了相应的分页功能,如果要使用其分页功能,可以访问http://www.cnblogs.com/zero-zyq/p/5343287.html查看相关 ...
- Pyhton 利用threading远程下发文件和远程执行linux系统命令
#!/usr/bin/env python # encoding: utf-8 #__author__ = 'cp' #__date__ = '21/07/16 上午 10:32' import th ...
- python基础总结篇——使用Mysql
python操作Mysql,很方便,使用的MySQLdb的库,基本的操作如下: 查询: try: conn = MySQLdb.connect(host=self.ip, user=self.user ...