图片左右滚动,感应鼠标位置,鼠标在展示区左边1/3向左滚动,中间1/3停止滚动,右边1/3向右滚动。
目前滚动条,左右按钮没有相应点击事件。
第一个作品,问题难免,希望高手不吝赐教。
Javascript文件:
Code
/// <reference path="jquery-1.3.2.js" />
/*
*
* tackerScroller - a Image Horizental Auto Scroll Viewer
* Version 0.1.1
* @requires jQuery v1.3.2
*
* Copyright (c) 2009 Tacker
* Eidtor: Tacker By 2009-10-18
* Email:tacker.cn@gmail.com
* WebSite:www.ruiidea.com
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
jQuery.fn.tackerScroller = function(params) {
var p = params || {
container: "imgViewer",
frame: "viewerFrame",
width: 2,
child: "li",
time: 6000,
visibleScroll: false,
scrollwidth: 845
};
var _imgViewer = $("#" + p.container);
var _imgFrame = $("#" + p.frame);
var _width = p.width;
var _child = p.child;
var _time = p.time;
var _framewidth = _imgFrame.find(_child).size() * _imgFrame.find(_child + ":first").width();
var _positionX;
var _scrollwidth = p.scrollwidth;
var _visibleScroll = p.visibleScroll;
var _scrollPositionX;
var autoStop = function() {
_imgFrame.stop();
if (_visibleScroll === true) {
$("#scrollcenter").stop();
}
};
var turnLeft = function() {
if (_imgFrame.offset().left < 0) {
_imgFrame.animate({ marginLeft: 0 }, _time);
if (_visibleScroll === true) {
$("#scrollcenter").animate({ left: 0 }, _time);
}
}
else {
autoStop();
}
};
var turnRight = function() {
if (_imgFrame.offset().left > _imgViewer.width() - _imgFrame.width()) {
_imgFrame.animate({ marginLeft: (_imgViewer.width() - _imgFrame.width()) }, _time);
if (_visibleScroll == true) {
$("#scrollcenter").animate({ left: (_scrollwidth - $("#scrollcenter").width()) }, _time);
}
}
else {
autoStop();
}
};
var init = function() {
_imgFrame.width(_framewidth);
if (_visibleScroll == true) {
var scrollerwidth = _imgViewer.width() * _scrollwidth / _imgFrame.width();
var scrolleroffsetX;
$("#scrollcenter").width(scrollerwidth);
$("#scrollcenter").css("position", "absolute").css("left","0px");
$("#scrollcenter").parent().css("width",_scrollwidth+"px");
$("#scrollcenter").animate({ left: (_scrollwidth - scrollerwidth) / 2 }, 2000);
$("#scrollcenter").bind("mousedown",function(e) {
autoStop();
e = e ? e : window.event;
//鼠标x坐标相对中间滚动条偏移位置
scrolleroffsetX = parseInt(e.originalEvent.clientX-$("#scrollcenter").offset().left||e.originalEvent.layerX||0);
$("#msg").text(scrolleroffsetX);
$("#scrollcenter").parent().mousemove(function(evt) {
evt = evt ? evt : window.event;
_scrollPositionX=parseInt((evt.originalEvent.clientX-scrolleroffsetX-$("#scrollcenter").parent().offset().left)||(evt.originalEvent.pageX-scrolleroffsetX-$("#scrollcenter").parent().offset().left)||0)
if (_scrollPositionX >= 0 && _scrollPositionX <= _scrollwidth - $("#scrollcenter").width()) {
$("#scrollcenter").css("left", (_scrollPositionX) + "px");
_imgFrame.css("margin-left",(_imgViewer.width() - _imgFrame.width()) * _scrollPositionX / (_scrollwidth - $("#scrollcenter").width()) + "px");
}
return false;//阻止事件冒泡
});
$(document).mouseup(function() {
$("#scrollcenter").parent().unbind();
});
return false; //阻止事件冒泡
});
$("#scrollcenter").mouseover(function() {
$(this).css("cursor", "pointer");
});
}
_imgFrame.animate({ marginLeft: (_imgViewer.width() - _framewidth) / 2 }, 2000);
_imgViewer.mouseout(autoStop);
_imgViewer.mouseover(function(e) {
//获取当前鼠标相对对象的x坐标
_positionX = e.originalEvent.x - $(this).offset().left || e.originalEvent.layerX - $(this).offset().left || 0;
if (_positionX < $(this).width() / 3) {
autoStop();
turnLeft();
}
else if (_positionX > ($(this).width() * 2) / 3) {
autoStop();
turnRight();
}
else {
autoStop();
}
return false;//阻止事件冒泡
});
};
init();
};
/// <reference path="jquery-1.3.2.js" />
/*
*
* tackerScroller - a Image Horizental Auto Scroll Viewer
* Version 0.1.1
* @requires jQuery v1.3.2
*
* Copyright (c) 2009 Tacker
* Eidtor: Tacker By 2009-10-18
* Email:tacker.cn@gmail.com
* WebSite:www.ruiidea.com
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
jQuery.fn.tackerScroller = function(params) {
var p = params || {
container: "imgViewer",
frame: "viewerFrame",
width: 2,
child: "li",
time: 6000,
visibleScroll: false,
scrollwidth: 845
};
var _imgViewer = $("#" + p.container);
var _imgFrame = $("#" + p.frame);
var _width = p.width;
var _child = p.child;
var _time = p.time;
var _framewidth = _imgFrame.find(_child).size() * _imgFrame.find(_child + ":first").width();
var _positionX;
var _scrollwidth = p.scrollwidth;
var _visibleScroll = p.visibleScroll;
var _scrollPositionX;
var autoStop = function() {
_imgFrame.stop();
if (_visibleScroll === true) {
$("#scrollcenter").stop();
}
};
var turnLeft = function() {
if (_imgFrame.offset().left < 0) {
_imgFrame.animate({ marginLeft: 0 }, _time);
if (_visibleScroll === true) {
$("#scrollcenter").animate({ left: 0 }, _time);
}
}
else {
autoStop();
}
};
var turnRight = function() {
if (_imgFrame.offset().left > _imgViewer.width() - _imgFrame.width()) {
_imgFrame.animate({ marginLeft: (_imgViewer.width() - _imgFrame.width()) }, _time);
if (_visibleScroll == true) {
$("#scrollcenter").animate({ left: (_scrollwidth - $("#scrollcenter").width()) }, _time);
}
}
else {
autoStop();
}
};
var init = function() {
_imgFrame.width(_framewidth);
if (_visibleScroll == true) {
var scrollerwidth = _imgViewer.width() * _scrollwidth / _imgFrame.width();
var scrolleroffsetX;
$("#scrollcenter").width(scrollerwidth);
$("#scrollcenter").css("position", "absolute").css("left","0px");
$("#scrollcenter").parent().css("width",_scrollwidth+"px");
$("#scrollcenter").animate({ left: (_scrollwidth - scrollerwidth) / 2 }, 2000);
$("#scrollcenter").bind("mousedown",function(e) {
autoStop();
e = e ? e : window.event;
//鼠标x坐标相对中间滚动条偏移位置
scrolleroffsetX = parseInt(e.originalEvent.clientX-$("#scrollcenter").offset().left||e.originalEvent.layerX||0);
$("#msg").text(scrolleroffsetX);
$("#scrollcenter").parent().mousemove(function(evt) {
evt = evt ? evt : window.event;
_scrollPositionX=parseInt((evt.originalEvent.clientX-scrolleroffsetX-$("#scrollcenter").parent().offset().left)||(evt.originalEvent.pageX-scrolleroffsetX-$("#scrollcenter").parent().offset().left)||0)
if (_scrollPositionX >= 0 && _scrollPositionX <= _scrollwidth - $("#scrollcenter").width()) {
$("#scrollcenter").css("left", (_scrollPositionX) + "px");
_imgFrame.css("margin-left",(_imgViewer.width() - _imgFrame.width()) * _scrollPositionX / (_scrollwidth - $("#scrollcenter").width()) + "px");
}
return false;//阻止事件冒泡
});
$(document).mouseup(function() {
$("#scrollcenter").parent().unbind();
});
return false; //阻止事件冒泡
});
$("#scrollcenter").mouseover(function() {
$(this).css("cursor", "pointer");
});
}
_imgFrame.animate({ marginLeft: (_imgViewer.width() - _framewidth) / 2 }, 2000);
_imgViewer.mouseout(autoStop);
_imgViewer.mouseover(function(e) {
//获取当前鼠标相对对象的x坐标
_positionX = e.originalEvent.x - $(this).offset().left || e.originalEvent.layerX - $(this).offset().left || 0;
if (_positionX < $(this).width() / 3) {
autoStop();
turnLeft();
}
else if (_positionX > ($(this).width() * 2) / 3) {
autoStop();
turnRight();
}
else {
autoStop();
}
return false;//阻止事件冒泡
});
};
init();
};
Html文件:
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Autor" content="Tacker(QQ:5987753)" />
<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.tackerScroll.js"></script>
<title>TackerScroll Demo</title>
<style type="text/css">
ul, li
{
list-style: none;
float: left;
text-align: left;
}
.productlist
{
width: 885px;
height: 355px;
overflow: hidden;
position: absolute;
left: 64px;
top: 10px;
}
.productlist ul
{
height: 355px;
float: left;
}
.productlist ul li
{
height: 355px;
width: 304px;
}
#viewerFrame
{
float: left;
height: 355px;
}
#viewerScroller
{
width: 885px;
height: 20px;
overflow: hidden;
position: absolute;
left: 64px;
top: 380px;
}
#viewerScroller .left
{
float: left;
width: 20px;
height: 20px;
}
#viewerScroller .center
{
float: left;
height: 20px;
background: #1A1AF7;
}
#viewerScroller .right
{
float: left;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div id="" class="subcontainer">
<div id="imgViewer" class="productlist">
<ul id="viewerFrame">
<li><a href="#" target="_self">
<img src="images/2009090972918233.jpg" width="276" height="355" title="" style="border: 0px;
display: block;" /></a></li>
<li><a href="#" target="_self">
<img src="images/2009090972870017.jpg" width="276" height="355" title="" style="border: 0px;
display: block;" /></a></li>
<li><a href="#" target="_self">
<img src="images/2009090972817505.jpg" width="276" height="355" title="" style="border: 0px;
display: block;" /></a></li>
<li><a href="#" target="_self">
<img src="images/2009090972740609.jpg" width="276" height="355" title="" style="border: 0px;
display: block;" /></a></li>
<li><a href="#" target="_self">
<img src="images/2009090972690985.jpg" width="276" height="355" title="" style="border: 0px;
display: block;" /></a></li>
<li><a href="#" target="_self">
<img src="images/2009090972665705.jpg" width="276" height="355" title="" style="border: 0px;
display: block;" /></a></li>
</ul>
</div>
<div id="viewerScroller">
<div class="left">
<img id="scrollleft" src="images/scrollleft.jpg" width="20" height="20" alt="" /></div>
<div class="center" style="position: relative;">
<img id="scrollcenter" src="images/scrollcenter.jpg" width="0" height="20" alt="" /></div>
<div class="right">
<img id="scrollright" src="images/scrollright.jpg" width="20" height="20" alt="" /></div>
</div>
<script type="text/javascript">
$(function() {
$("#viewer").tackerScroller({
container: "imgViewer",
frame: "viewerFrame",
width: 2,
child: "li",
time: 6000,
visibleScroll: true,
scrollwidth: 845
});
});
</script>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Autor" content="Tacker(QQ:5987753)" />
<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.tackerScroll.js"></script>
<title>TackerScroll Demo</title>
<style type="text/css">
ul, li
{
list-style: none;
float: left;
text-align: left;
}
.productlist
{
width: 885px;
height: 355px;
overflow: hidden;
position: absolute;
left: 64px;
top: 10px;
}
.productlist ul
{
height: 355px;
float: left;
}
.productlist ul li
{
height: 355px;
width: 304px;
}
#viewerFrame
{
float: left;
height: 355px;
}
#viewerScroller
{
width: 885px;
height: 20px;
overflow: hidden;
position: absolute;
left: 64px;
top: 380px;
}
#viewerScroller .left
{
float: left;
width: 20px;
height: 20px;
}
#viewerScroller .center
{
float: left;
height: 20px;
background: #1A1AF7;
}
#viewerScroller .right
{
float: left;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div id="" class="subcontainer">
<div id="imgViewer" class="productlist">
<ul id="viewerFrame">
<li><a href="#" target="_self">
<img src="images/2009090972918233.jpg" width="276" height="355" title="" style="border: 0px;
display: block;" /></a></li>
<li><a href="#" target="_self">
<img src="images/2009090972870017.jpg" width="276" height="355" title="" style="border: 0px;
display: block;" /></a></li>
<li><a href="#" target="_self">
<img src="images/2009090972817505.jpg" width="276" height="355" title="" style="border: 0px;
display: block;" /></a></li>
<li><a href="#" target="_self">
<img src="images/2009090972740609.jpg" width="276" height="355" title="" style="border: 0px;
display: block;" /></a></li>
<li><a href="#" target="_self">
<img src="images/2009090972690985.jpg" width="276" height="355" title="" style="border: 0px;
display: block;" /></a></li>
<li><a href="#" target="_self">
<img src="images/2009090972665705.jpg" width="276" height="355" title="" style="border: 0px;
display: block;" /></a></li>
</ul>
</div>
<div id="viewerScroller">
<div class="left">
<img id="scrollleft" src="images/scrollleft.jpg" width="20" height="20" alt="" /></div>
<div class="center" style="position: relative;">
<img id="scrollcenter" src="images/scrollcenter.jpg" width="0" height="20" alt="" /></div>
<div class="right">
<img id="scrollright" src="images/scrollright.jpg" width="20" height="20" alt="" /></div>
</div>
<script type="text/javascript">
$(function() {
$("#viewer").tackerScroller({
container: "imgViewer",
frame: "viewerFrame",
width: 2,
child: "li",
time: 6000,
visibleScroll: true,
scrollwidth: 845
});
});
</script>
</div>
</body>
</html>
在线demo:
http://www.ruiidea.com/tackerscroll/demo.html
打包下载: