jQuery图片动态旋转插件源码下载(jQuery+CSS3制作全屏狭缝焦点广告)
- 建站教程
- 2024-10-11 20:13:01
jQuery图片动态旋转插件源码下载(jQuery+CSS3制作全屏狭缝焦点广告)
jQuery图片动态旋转插件，可以对网页的图片进行旋转，可以设定旋转的方向，旋转的角度，还可以设定鼠标事件，当鼠标滑过时动态旋转。
jQuery+CSS3制作全屏狭缝焦点广告，jQuery在线HTML编辑器Redactor，jQuery电梯式滚动效果插件Ascensor，jQuery图片缩放插件，
jQuery图片动态旋转插件源码如下：
```javascript
(function($) {
$.fn.rotate = function(options) {
var defaults = {
angle: 0,
direction: 'clockwise',
speed: 500,
animate: true,
mouse: false
};
var options = $.extend(defaults, options);
return this.each(function() {
var $this = $(this);
var angle = options.angle;
var direction = options.direction;
var speed = options.speed;
var animate = options.animate;
var mouse = options.mouse;
function rotateImage() {
if (direction === 'clockwise') {
angle += 90;
} else {
angle -= 90;
}
if (animate) {
$this.animate({ transform: 'rotate(' + angle + 'deg)' }, speed);
} else {
$this.css({ transform: 'rotate(' + angle + 'deg)' });
}
}
if (mouse) {
$this.hover(function() {
rotateImage();
}, function() {
rotateImage();
});
} else {
rotateImage();
}
});
};
})(jQuery);
```
使用方法：
1. 引入jQuery库和上述源码；
2. 在HTML中添加需要旋转的图片；
3. 调用`rotate`方法，传入相应的参数。
示例：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery图片动态旋转插件</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<img src="your-image-url" alt="图片">
<script>
$(document).ready(function() {
$('img').rotate({
angle: 0,
direction: 'clockwise',
speed: 500,
animate: true,
mouse: false
});
});
</script>
</body>
</html>
```
jQuery图片动态旋转插件源码下载(jQuery+CSS3制作全屏狭缝焦点广告)由讯客互联建站教程栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“jQuery图片动态旋转插件源码下载(jQuery+CSS3制作全屏狭缝焦点广告)”
