onmousewheel event 缩放图片效果

onMouseWheel Event Sample－www.51windows.Net

var count = 10;
function Picture()
{
count = Counting(count);
Resize(count);
return false;
}
function Counting(count){
if (event.wheelDelta >= 120)
count++;
else if (event.wheelDelta

onmousewheel event

This sample uses the onmousewheel event to expand or contract the picture below.

Move the cursor over the picture and roll the mouse wheel up and down.

Size =
100%

http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/onmousewheelEX.htm.

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • JS滚轮事件onmousewheel使用介绍

    典型的应用时鼠标滚轮滚动控制图片或者文字的大小,例如此类的转动鼠标滚轮实现缩放等等交互效果中,会用到 Mousewheel 事件.在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 "mousewheel" 事件.滚轮事件的兼容性差异有些不拘一格,不是以往的IE8-派和其他派,而是FireFox派和其他派,杯具的是 Firefox 3.5+ 却不支持此事件,不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件:"DO

  • 比较方便的onMouseWheel缩放图片效果 原创

    比较方便的onMouseWheel缩放图片效果 原创

    复制代码 代码如下: <HTML>   <HEAD>   <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   <TITLE>onMouseWheel缩放图片效果-www.jb51.Net</TITLE> <body> <script> function bbimg(o) {   var zoom

  • onmousewheel event 缩放图片效果

    onmousewheel event 缩放图片效果

    onMouseWheel Event Sample-www.51windows.Net var count = 10; function Picture() { count = Counting(count); Resize(count); return false; } function Counting(count){ if (event.wheelDelta >= 120) count++; else if (event.wheelDelta onmousewheel event This

  • 用jquery实现等比例缩放图片效果插件

    复制代码 代码如下: jQuery.fn.autoZoomLoadImage = function(scaling, width, height, loadPic) { if (loadPic == null) loadPic = "Loading.gif"; return this.each(function() { var t = $(this); var src = $(this).attr("src"); var img = new Image(); //a

  • python实现批量按比例缩放图片效果

    本文实例为大家分享了python实现批量按比例缩放图片的具体代码,供大家参考,具体内容如下 把脚本文件放在要缩放的文件夹下面. 双击运行脚本,输入要缩放的系数.脚本会在当前目录下创建一个scaledImg_xxxx文件夹,如果已经存在,会强制删除,如果删除失败会提示手动删除这个文件夹,再双击运行就可以了. resizeImg.py #!/usr/bin/python # -*- coding:utf8 -*- #author@skillart www. import os import shut

  • Android实现手势滑动多点触摸缩放平移图片效果(二)

    Android实现手势滑动多点触摸缩放平移图片效果(二)

    上一篇已经带大家实现了自由的放大缩小图片,简单介绍了下Matrix:具体请参考:Android实现手势滑动多点触摸缩放平移图片效果,本篇继续完善我们的ImageView. 首先加入放大后的移动. 1.自由的进行移动 我们在onTouchEvent里面,加上移动的代码,当然了,必须长或宽大于屏幕才可以移动~~~ @Override public boolean onTouch(View v, MotionEvent event) { mScaleGestureDetector.onTouchEve

  • 基于jquery的滚动鼠标放大缩小图片效果

    今天要出个鼠标滚动放大缩小图片的功能,看似很简单,从网上一搜,出现的都是onmousewheel的例子,全部只支持IE浏览器,结果查出火狐有对应的DOMMouseScroll来处理这个功能,代码如下,并加上注意的注释项: 复制代码 代码如下: $(function(){ $(".body img").each(function(){ if($.browser.msie){ $(this).bind("mousewheel",function(e){ var e=e|

  • javascript 实现的完全兼容鼠标滚轴缩放图片的代码

    javascript 实现的完全兼容鼠标滚轴缩放图片的代码

    code如下: 复制代码 代码如下: /*! *author:sohighthesky *blog:http://www.cnblogs.com/sohighthesky *date:2010-2-4 */ var zooming=function(e){ e=window.event ||e; var o=this,data=e.wheelDelta || e.detail*40,zoom,size; if(!+'\v1'){ zoom = parseInt(o.style.zoom) ||

  • Android实现手势滑动多点触摸放大缩小图片效果

    Android实现手势滑动多点触摸放大缩小图片效果

    网上文章虽多,但是这种效果少之又少,我真诚的献上以供大家参考 实现原理:自定义ImageView对此控件进行相应的layout(动态布局). 这里你要明白几个方法执行的流程: 首先ImageView是继承自View的子类. onLayout方法:是一个回调方法.该方法会在在View中的layout方法中执行,在执行layout方法前面会首先执行setFrame方法. setFrame方法:判断我们的View是否发生变化,如果发生变化,那么将最新的l,t,r,b传递给View,然后刷新进行动态更新

  • 原生JS实现拖拽图片效果

    原生JS实现拖拽图片效果

    本文实例为大家讲解了JS实现拖拽图片效果的详细代码,分享给大家供大家参考,具体内容如下 javascript event 对象的clientX,offsetX,screenX,pageX的区别: 用html5的drag来实现拖拽有兼容性问题,使用拖拽插件代码又很多,而这个拖拽demo代码少,并且兼容所有浏览器,很值得在项目中使用, css样式如下: #div1{ width: 100px; height: 100px; background-color: #4D4D4D; position: a

  • PHP 等比例缩放图片详解及实例代码

    PHP 等比例缩放图片详解及实例代码

    直接上代码,imgzip($src,$newwid,$newhei)这个函数带进去的分别是原图片.缩放要求的宽度.缩放的长度.代码都备注了,不懂可以留言哈哈 <?php //压缩图片 缩略图 $src= "xiezheng.jpg"; $newwid=640; $newhei= 480; function imgzip($src,$newwid,$newhei){ $imgInfo = getimagesize($src); $imgType = image_type_to_ex

随机推荐