jQuery实现可以控制图片旋转角度效果(附demo源码下载)

本文实例讲述了jQuery实现可以控制图片旋转角度效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

点击此处查看在线演示效果。

具体代码如下：

<!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>
  <title></title>
  <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
  <style type="text/css" >
    img { margin-top:100px; margin-left:400px; width:300px; border:3px solid #F2F2F2; height:300px; box-shadow:4px 4px 4px #DDDDDD;}
    input { margin-top:10px; margin-left:480px; }
  </style>
  <script type="text/javascript" >
    window.onload = function () {
      document.getElementById('range').onchange = function () {
        var value = this.value;
        $("img").css({ "transform": "skewX(" + value + "deg)", "-webkit-transform": "skewX(" + value + "deg)", "-moz-transform": "skewX(" + value + "deg)" });
      }
    }
  </script>
</head>
<body>
  <img src="3.jpg" alt=""/>
  <br /><br />
  <input type="range" id="range" value="0" />
</body>
</html>

完整实例代码点击此处本站下载。

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》。

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)

    jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)

    本文实例讲述了jQuery图片旋转插件jQueryRotate.js用法.分享给大家供大家参考,具体如下: 推荐一个图片旋转插件,用于浏览相册时,旋转图片. 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <script type="text/javascript"> $(document).ready(function () { $("#images").rotate(45); var value = 0 $("#images

  • 基于jQuery Circlr插件实现产品图片360度旋转

    基于jQuery Circlr插件实现产品图片360度旋转

    Circlr是一款可以对产品图片进行360度全方位旋转展示的jQuery插件.Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动.鼠标滚轮和移动触摸来进行图片逐帧旋转的效果.比先前的Rollerblade,动画顺畅了许多,也更易于控制,该插件非常适合于商品的展示. 它的特点有: 支持水平或垂直方向旋转. 支持移动触摸事件. 支持滚动事件. 图片预加载处理. 可以反向和循环旋转图片. jQ酷实例教程:jQuery产品图片360度旋转Circlr 引入核心文件 <script sr

  • jquery 圆形旋转图片滚动切换效果

    jquery 圆形旋转图片滚动切换效果

    这个效果比较特别,可爱,所以在外面网站没怎么看到过,有兴趣的朋友可以下载后自己使用. PS: 经过修改已经兼容大众浏览器.效果图:在线演示:http://demo.jb51.net/js/ImagesRotateScroll/index.htmlStep1. 创建HTML 复制代码 代码如下: <div id="rotatescroll"> <div class="viewport"> <ul class="overview&

  • 让图片旋转任意角度及JQuery插件使用介绍

    引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").rotate(45);把这句放在$(document).ready(function(){ });中 就是将id为rotate-image的图片旋转45度. 不过,貌似在Chrome中总是不显示. 唉,找了两个小时,才发现Chrome太坑爹了,没法获取图片的长宽. 解决办法是,把$("#rotate-

  • jQuery制作图片旋转效果

    jQuery制作图片旋转效果

    以前用JQuery写过一个纵深方向上的图片旋转效果,在这里拿出来跟大家分享下,贴上一张图片看看效果是如何的: 其实现原理并不复杂,在数学上只用到了其中的正弦函数,制作过程大致如下: (1)先定义好图片旋转的半径 (2)图片旋转的过程需要用到setInterval()方法,来获取每一张图片所在位置的的角度,角度会根据时间变化逐渐变化 (3)根据一个数学公式:x=R*SIN(deg)可以获得图片在X方向的位置 (4)透明度的设置其实也是根据图片旋转时候的角度来定的.初始设置图片在正前方时是0度,无论

  • jquery实现LED广告牌旋转系统图片切换效果代码分享

    jquery实现LED广告牌旋转系统图片切换效果代码分享

    本文实例讲述了jquery实现LED广告牌旋转系统图片切换效果,分享给大家供大家参考.具体如下: js模拟路边巨大显示屏上广告切换效果,不得不相信js做到了,而且让你无话可说的逼真效果. LED广告显示器上图片切换效果,场景也类似,效果相当震撼看得我目瞪口呆,热爱特效的你可不要错过哈! 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery实现LED广告牌旋转

  • jQuery实现可以控制图片旋转角度效果(附demo源码下载)

    jQuery实现可以控制图片旋转角度效果(附demo源码下载)

    本文实例讲述了jQuery实现可以控制图片旋转角度效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww

  • jQuery+css3实现转动的正方形效果(附demo源码下载)

    jQuery+css3实现转动的正方形效果(附demo源码下载)

    本文实例讲述了jQuery+css3实现转动的正方形效果.分享给大家供大家参考,具体如下: 主要是应用到了css3中的rotate来控制旋转角度 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

  • Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果(附demo源码下载)

    本文实例讲述了Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果的方法.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Text; using System.IO; public partial

  • jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)

    本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果.分享给大家供大家参考,具体如下: 该插件乃文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实际需求来设置是否添加左右切换图片的效果.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

  • HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)

    HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)

    本文实例讲述了HTML5游戏引擎LTweenLite实现的超帅动画效果.分享给大家供大家参考,具体如下: lufylegend.js是一个开源的HTML5游戏引擎,在游戏中往往会有各种的动画,这些动画有些是flash文件,有些是视频文件,本次就来利用lufylegend制作一个帅气的游戏动画,如下图. 测试连接如下: http://lufylegend.com/demo/effects01/ 一.准备工作 准备工作当然就是引擎的下载了. lufylegend.js引擎官网 http://lufy

  • HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)

    HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)

    本文讲述了HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果.分享给大家供大家参考,具体如下: 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我们将使用HTML5和jQuery插件Quicksand来创建一个超酷的星际争霸兵种效果图.希望大家喜欢! 先来看看效果图: HTML5代码 首先我们使用HTML5的代码来创建一个html文档,将所需的quicksand类库,及其jquery类库,还有HTML5类库倒入,如下: <!DOCTYPE h

  • jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)

    本文实例讲述了jQuery实现滚动鼠标放大缩小图片的方法.分享给大家供大家参考,具体如下: 在项目制作过程中,遇到了这么一个需求,就开发了一个,记录一下. 首先,需要定义html元素和css样式: <div style="position:relative;"> <asp:Image ID="myImg" runat="server" Width="670px" /> <span style=&q

  • jQuery实现横向带缓冲的水平运动效果(附demo源码下载)

    本文实例讲述了jQuery实现横向带缓冲的水平运动效果.分享给大家供大家参考,具体如下: 这里使用jQuery生成横向带缓冲的水平运动,用鼠标点一下才能激活,点一下以后可看到Div层在做水平运动,由此可派生出诸多的其它形式的动画效果. 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

  • jQuery实现导航高亮的方法【附demo源码下载】

    jQuery实现导航高亮的方法【附demo源码下载】

    本文实例讲述了jQuery实现导航高亮的方法.分享给大家供大家参考,具体如下: 导航是我们页面中一般都需要的一个元素,它可以说是一个站点必用的元素,没有了导航,会让人找不着北,但有时候,仅仅有了导航还不够,还需要在当前的页面中标明当前是在哪一个类别里面,这时候就有了不同的实现的方法,也就有了下文的一些介绍. 通常,我们在做导航的时候,都是由程序直接输出当前的页面的的高亮状态的样式,我们只需要定义好输出的类的高亮的样式就可以了,这样是最直接有效也是最常用的方法. 像Wordpress的导航输出,会

  • Android编程实现可滑动的开关效果(附demo源码下载)

    Android编程实现可滑动的开关效果(附demo源码下载)

    本文实例讲述了Android编程实现可滑动的开关效果.分享给大家供大家参考,具体如下: 闲着没事,把之前写的一个Demo放上来分享下.就是一个开关,实现可滑动和动画效果.不是图片切换. 好了,先上图: 完整实例代码点击此处本站下载. 直接把自定义的这个View代码放上来,有注释应该很好理解: 首先是布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&qu

随机推荐