head中引用:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
实现拖动到js代码:
<script type="text/javascript">
// 拖动
// jQuery.noConflict()
var ddimagepanner={
init:function($, $img, options){
var s=options
s.imagesize=[$img.width(), $img.height()]
s.pos=(s.pos=="center")? [-(s.imagesize[0]/2-s.wrappersize[0]/2), -(s.imagesize[1]/2-s.wrappersize[1]/2)] : [center, center] //initial coords of image
s.pos=[Math.floor(s.pos[0]), Math.floor(s.pos[1])]
$img.css({position:'absolute', left:s.pos[0], top:s.pos[1]})
s.dragcheck={h: (s.wrappersize[0]>s.imagesize[0])? false:true, v:(s.wrappersize[1]>s.imagesize[1])? false:true}
if (s.dragcheck.h==false && s.dragcheck.v==false) //if image shouldn't be pannable (container larger than image)
s.$pancontainer.css({cursor:'auto'})
else
this.dragimage($, $img, s)
},
dragimage:function($, $img, s){
$img.mousedown(function(e){
var imgoffset=$img.offset()
s.pos=[parseInt($img.css('left')), parseInt($img.css('top'))]
var xypos=[e.clientX, e.clientY]
$img.bind('mousemove.dragstart', function(e){
var pos=s.pos
var dx=e.clientX-xypos[0] //distance to move horizontally
var dy=e.clientY-xypos[1] //vertically
if (s.dragcheck.h==true) //allow dragging horizontally?
var newx=(dx>0)? Math.min(0, s.pos[0]+dx) : Math.max(-s.imagesize[0]+s.wrappersize[0], s.pos[0]+dx) //Set horizonal bonds. dx>0 indicates drag right versus left
if (s.dragcheck.v==true) //allow dragging vertically?
var newy=(dy>0)? Math.min(0, s.pos[1]+dy) : Math.max(-s.imagesize[1]+s.wrappersize[1], s.pos[1]+dy) //Set vertical bonds. dy>0 indicates drag downwards versus up
$img.css({left:(typeof newx!="undefined")? newx : s.pos[0], top:(typeof newy!="undefined")? newy : s.pos[1]})
return false //cancel default drag action
})
return false //cancel default drag action
})
$(document).bind('mouseup', function(e){
$img.unbind('mousemove.dragstart')
})
}
}
jQuery.fn.imgmover=function(options){
var $=jQuery
return this.each(function(){ //return jQuery obj
if (this.tagName!="IMG")
return true //skip to next matched element
var $imgref=$(this)
if (parseInt(this.style.width)>0 && parseInt(this.style.height)>0) //if image has explicit CSS width/height defined
ddimagepanner.init($, $imgref, options)
else if (this.complete){ //account for IE not firing image.onload
ddimagepanner.init($, $imgref, options)
}
else{
$imgref.bind('load', function(){
ddimagepanner.init($, $imgref, options)
})
}
})
}
jQuery(document).ready(function($){ //By default look for DIVs with class="pancontainer"
var $pancontainer=$('div.pancontainer')
$pancontainer.each(function(){
var $this=$(this).css({position:'relative', overflow:'hidden', cursor:'move'})
var $img=$this.find('img:eq(0)') //image to pan
var options={$pancontainer:$this, pos:$this.attr('data-orient'), wrappersize:[$this.width(), $this.height()]}
$img.imgmover(options)
})
})
</script>
body中
<form id="form1">
<div class="pancontainer" data-orient="center" style="width:320px; height:480px;margin: 5px 300px 0px 400px;border: 1px solid #000;">
<img id="oImg" src="/img/c.jpg" alt="pic"/>
</div>
</form>
分享到:
相关推荐
15.2.3 使用readAsDataURL方法预览图片 286 15.2.4 使用readAsText方法读取文本文件 287 15.2.5 FileReader接口中的事件 288 15.3 拖放API 290 15.3.1 实现拖放的步骤 290 15.3.2 通过拖放显示欢迎...
6.4.2 带有边框的选项卡 85 6.4.3 显示“最大化/最小化”按钮 85 6.4.4 设置选项卡的颜色和背景图片 85 6.4.5 仿Eclipse编辑区的选项卡 87 6.4.6 限制选项卡文字的长度 90 6.4.7 设置右上角控件 91 ...
7.6.6 设置内部边距 152 7.6.7 创建多栏 152 7.7 小结 152 第8章 更正和精炼文本 153 8.1 查找和替换文本 153 8.2 更正拼写 154 8.2.1 检查单个单词 155 8.2.2 检查整个演示文稿 155 8.2.3 设置...
7.6.6 设置内部边距 152 7.6.7 创建多栏 152 7.7 小结 152 第8章 更正和精炼文本 153 8.1 查找和替换文本 153 8.2 更正拼写 154 8.2.1 检查单个单词 155 8.2.2 检查整个演示文稿 155 8.2.3 设置...
技巧10禁用单元格拖放功能30 技巧11单元格格式操作31 11-1单元格字体格式设置31 11-2设置单元格内部格式33 11-3为单元格区域添加边框34 11-4灵活设置单元格的行高列宽36 技巧12单元格中的数据有效性37 12-1在单元格...
技巧10 禁用单元格拖放功能 32 技巧11 单元格格式操作 33 11-1 单元格字体格式设置 33 11-2 设置单元格内部格式 35 11-3 为单元格区域添加边框 36 11-4 灵活设置单元格的行高列宽 38 技巧12 单元格中的数据有效性 39...
精易模块 V5.15 what’s new:(2015XXXX) 1、新增“线程_枚举”枚举指定进程ID中所有线程列表,成功返回线程数量,失败返回零。 2、删除“文件_取图标”与"文件_取图标句柄"功能重复。 3、优化“系统_创建桌面快捷...
9.4.9 边框布局:ext.layout.container.border / 451 9.4.10 自动布局:ext.layout.container.auto / 453 9.4.11 表格布局:ext.layout.container.table / 454 9.4.12 列布局:ext.layout.container.column / ...
Flash 模拟试题及答案(一) 1.Loading应该放在影片的什麽位置? A. 影片不能有Loading B....C....D....2.Flash中设置属性的命令是?...A....B....C....D....A....B....C....D....A....B....C....D....A....B....C....D....A....B....C....D....A....B....C....D....A....B....C....D....A....B....C....D....A....