jquery实现可旋转可拖拽的文字效果代码
本文实例讲述了jquery实现可旋转可拖拽的文字效果代码。分享给大家供大家参考，具体如下：
运行效果截图如下：
具体代码如下：
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
function scaleXBlock(blocker, scaleX){
blocker.css({
"-moz-transform": 'scaleX(' + scaleX + ')' ,
"-webkit-transform": 'scaleX(' + scaleX + ')' ,
"-o-transform": 'scaleX(' + scaleX + ')',
"-ms-transform": 'scaleX(' + scaleX + ')',
"transform": 'scaleX(' + scaleX + ')'
});
}
function getPosition(event){
return {
x: parseInt(event.pageX || event.X),
y: parseInt(event.pageY || event.Y)
}
}
function cancelEvent(event){
if(event.preventDefault ) {
event.preventDefault();
} else {
//IE中阻止函数器默认动作的方式
event.returnValue = false;
}
return false;
}
function stopDrag(blocker){
blocker.data('draginfo', {
isDrag: false
});
blocker.css('cursor', "arrow");
}
function drag(blocker){
blocker.data('draginfo', {
isDrag: false
});
blocker.css("position", "absolute");
blocker.mousedown(function(event){
event = event || window.event;
var position = getPosition(event),
offset = blocker.offset(),
offsetX = position.x - parseInt(offset.left),
offsetY = position.y - parseInt(offset.top);
blocker.css('cursor', "move");
blocker.data('draginfo', {
isDrag: true,
offsetX: offsetX,
offsetY: offsetY
});
cancelEvent(event);
});
blocker.mouseup(function(){
stopDrag($(this));
});
$(document).mousemove(function(event){
var dragInfo = blocker.data('draginfo');
if(!dragInfo.isDrag) {
return;
}
event = event || window.event;
var position = getPosition(event),
x = position.x - dragInfo.offsetX,
y = position.y - dragInfo.offsetY;
blocker.css({
"left": x + "px",
"top": y + "px"
});
cancelEvent(event);
}).mouseup(function(){
stopDrag(blocker);
});
}
function loopScaleXBlock(timeout, mode, blocker, scaleX){
scaleXBlock(blocker, scaleX);
setTimeout(function(){
if(mode == "bigger") {
if(scaleX < 1) {
scaleX += 0.05;
} else {
mode = "smaller";
scaleX = 1;
}
} else {
if(scaleX > 0) {
scaleX -= 0.05;
} else {
mode = "bigger";
scaleX = 0.05;
}
}
loopScaleXBlock(timeout, mode, blocker, scaleX);
}, timeout);
}
function initDrag(){
var dragList = $(".drag");
for(var i=0,length=dragList.length; i<length; i++) {
drag($(dragList[i]));
}
}
function initScaleX(){
var scaleXList = $(".scale");
for(var i=0,length=scaleXList.length; i<length; i++) {
loopScaleXBlock(10 * i + 10, "smaller", $(scaleXList[i]), 1);
}
}
$(document).ready(function(){
initScaleX();
initDrag();
});
</script>
<style type="text/css" >
body
{
margin:0;
background:black;
}
.block
{
position: absolute;
text-align: center;
display: block;
width: 250px;
height: 250px;
background: #494949;
font-size: 80px;
color: #fff;
line-height: 125px;
text-shadow: 2px 2px 2px #fff;
box-shadow: 2px 2px 2px #fff;
cursor: pointer;
opacity: 0.6;
filter: alpha(opacity=60);
}
#scale
{
left:0;
top:0;
}
#scale2
{
left:300px;
top:0;
background: #F2F2F2;
color: orange;
}
#scale3
{
left:600px;
top:0;
background: orange;
color: #494949;
}
#scale4
{
left:900px;
top:0;
background: green;
color: gray;
}
#scale5
{
left:1200px;
top:0;
background: #494949;
color: orange;
}
</style>
</head>
<body>
<div class="block scale drag" id="scale">
欢迎来看咧
</div>
<div class="block scale drag" id="scale2">
欢迎来看咧
</div>
<div class="block scale drag" id="scale3">
欢迎来看咧
</div>
<div class="block scale drag" id="scale4">
欢迎来看咧
</div>
<div class="block scale drag" id="scale5">
欢迎来看咧
</div>
</body>
</html>
更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jquery实现背景墙聚光灯效果示例分享
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title
-
jQuery EasyUI API 中文文档 - Draggable 可拖拽
用$.fn.draggable.defaults重写默认的defaults. 用法 复制代码 代码如下: <div id="dd" style="width:100px;height:100px;"> <div id="title" style="background:#ccc;">title</div> </div> 复制代码 代码如下: $('#dd').draggable(
-
jquery 可拖拽的窗体控件实现代码
所以要引入JQUERY框架. 把我的这个控件代码放到一个js文件里面直接引入就可以了 控件代码 复制代码 代码如下: $.fn.myDrag = function() { var self = $(this); self.css("position", "absolute"); var p = self.position(); self.css({ left: p.left, top: p.top }); self.mousedown( function(event
-
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
本文实例讲述了jQuery实现可拖拽的许愿墙效果.分享给大家供大家参考,具体如下: 运行效果图如下: 这里简单介绍下功能点: ① 随机显示背景图或背景色 ② 出现的位置随机 ③ 可以通过拖拽改变位置 好了,附上代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>许愿墙</title> <lin
-
jquery实现可拖拽弹出层特效
功能很简单,却非常的实用,代码更加的简洁,这里就不多废话了 奉上源码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><
-
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的"提交"按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码 复制代码 代码如下: var JQueryDialog = { /// <summ
-
jQuery代码实现图片墙自动+手动淡入淡出切换效果
相关阅读: Jquery代码实现图片轮播效果(一) 在网页上经常可以看到有背景图片可以自动淡入淡入切换的效果,非常漂亮,实用性也非常高.今天小编抽个时间给大家分享基于jquery代码实现图片墙自动+手动淡入淡出切换效果,一起学习吧! 先给大家展示效果图,如果大家觉得还不错,请参考具体实现代码. 添加一个div(class=container),设置宽度和高度,这里设置了宽800px,高450px.添加居中的定位.在div里面添加一个ul(class="img")列表用来盛放图片,设置u
-
jQuery表格列宽可拖拽改变且兼容firfox
本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局.使用jQuery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").movedTh()即可方便实现,修改了firfox的兼容性. 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
-
jquery实现可旋转可拖拽的文字效果代码
本文实例讲述了jquery实现可旋转可拖拽的文字效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript
-
JS实现的3D拖拽翻页效果代码
本文实例讲述了JS实现的3D拖拽翻页效果.分享给大家供大家参考,具体如下: 以前看到一个很火的帖子,拖拽实现的翻页效果,非常的有创意,自己也很喜欢,于是乎就萌发了用自己的方法模仿的想法.感谢原创作者的创意,结果一样,但过程不一样哦.奉上代码,供大家参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-drag-page-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT
-
JavaScript 拖拽翻页效果代码
拖拽翻页效果JavaScript特效-demo by http://www.jb51.net html,body{ width:100%; height:100%; border:0px; margin:0px; overflow:hidden; } #menu{ width:1000px; height:500px; overflow:hidden; background:lightblue; } .page{ position:absolute; width:300px; height:40
-
jQuery EasyUI tree 使用拖拽时遇到的错误小结
在我使用tree拖拽时总是失败,控制台输出了很多错误. 经过跟踪分析发现这是一个由于特殊配置导致的错误. 原先错误的代码如下: $('#tree').tree({ //省略其他 loadFilter: function(data, parent){ return data.rows; } }); 由于我后台返回值并不是一个直接适合tree使用的数据,需要从中取出rows才可以,所以就有了这段代码. 而 EasyUI 出错的原因就在于当拖动时,拖动方法中仍然会调用loadFilter方法,如下图代
-
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
本文实例讲述了jQuery自定义图片缩放拖拽插件imageQ实现方法.分享给大家供大家参考,具体如下: 综合网上一些代码 自己写的一个图片缩放拖拽的小插件 /** * * <a href="http://lib.csdn.net/base/22" class='replace_word' title="jQuery知识库" target='_blank' style='color:#df3434; font-weight:bold;'>jQuery<
-
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法.分享给大家供大家参考,具体如下: 该插件是文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E
-
jQuery实现div横向拖拽排序的简单实例
实例如下: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>div横向拖拽排序</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/css"
-
jQuery实现的简单拖拽功能示例
本文实例讲述了jQuery实现的简单拖拽功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> *{ padding: 0; margin: 0; } div{ width: 100px; height: 100px; ba
-
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
前面的话:zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点.专门适合项目开发,尤其是 树状菜单.树状数据. ztree官方文档:http://www.treejs.cn/v3/api.php 想要实现的效果: 需要的功能: 1:首先实现一颗jQuery的ztree的树形菜单,这个很简单,直接引用官方文档即可 2:点击新建组的按钮,会出现一个input对话框,填写想要新建的名称,在树形菜单上添加了一个父节点菜单
-
jQuery实现的简单拖拽功能示例【测试可用】
本文实例讲述了jQuery实现的简单拖拽功能.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net jQuery拖拽</title> <style type="t