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程序设计有所帮助。

以上是 jQuery实现可以控制图片旋转角度效果(附demo源码下载) 的全部内容, 来源链接: utcz.com/z/337550.html

回到顶部