88bf必发唯一娱乐官网_www.bifa888.com
做最好的网站

jQuery旋转插件jqueryrotate用法详解,jQuery达成的p

作者: web前端  发布:2019-07-01

本文实例讲述了jQuery旋转插件jqueryrotate用法。分享给大家供大家参考,具体如下:

本文实例讲述了jQuery实现的placeholder效果。分享给大家供大家参考,具体如下:

本文实例讲述了jQuery实现IE输入框完成placeholder标签功能的方法。分享给大家供大家参考,具体如下:

CSS3 提供了多种变形效果,比如矩阵变形、位移、缩放、旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动。然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(filter),但不全面,而且效果和性能都不好。

运行效果截图如下:

如果在输入框加上placeholder="xx"属性,例如:

今天介绍一款 jQuery 插件——jqueryrotate,它可以实现旋转效果。jqueryrotate 支持所有主流浏览器,包括 IE6。如果你想在低版本的 IE 中实现旋转效果,那么 jqueryrotate 是一个很好的选择。

web前端 1

<input type="text" placeholder="请输入关键词"/>

兼容性

具体代码如下:

则可以在谷歌浏览器等高级浏览器的输入框中实现替换文本的功能,也就是得到如下图所示的对话框:

jqueryrotate 支持所有主流浏览器,包括 IE6。jqueryrotate 在高级浏览器中使用 CSS3 transform 属性实现,在低版本 IE 中使用 VML 实现。当然,你可以使用 IE 条件注释,低版本 IE 使用 jqueryrotate,高级浏览器则直接使用 CSS3。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>jQuery实现placeholder效果</title>
  <script src="jquery-1.7.2.min.js"></script>
  <script>
    $(function () {
      initEvent();
    });
    //初始化提示内容的颜色
    function initEvent() {
      $('input.holder').each(function () {
        var $this = $(this), holder = $this.data('holder');
        if (holder) {
          $this.css('color', '#a9a9a9').val(holder);
        }
      });
      //获取焦点时设置内容的颜色和值为空
      $(document).off('focus', 'input.holder').on('focus', 'input.holder', function () {
        var $this = $(this);
        if ($this.val() === $this.data('holder')) {
          $this.css('color', 'black').val('');
        }
      });
      //失去焦点后还原提示内容
      $(document).off('focusout', 'input.holder').on('focusout', 'input.holder', function () {
        var $this = $(this);
        if ($.trim($this.val()) === '') {
          $this.css('color', '#a9a9a9').val($this.data('holder'));
        }
      });
    }
  </script>
</head>
<body>
  <input type="text" class="holder" name="name" value="" data-holder="请输入账户" /><br><br>
  <input type="text" class="holder" name="name" value="" data-holder="请输入密码" />
</body>
</html>

web前端 2

使用方法

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常见经典特效汇总》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

但是这个属性在WIN7默认的浏览器IE8中无法兼容,更不要说IE6了。也就是说IE里面不支持placeholder这个标签。

//演示1
//旋转45angle
$(document.body).click(function () {
 //方式1
 $('.divOne').rotate(45);
 //方式2
 $('.divOne').rotate({ angle: 45 });
});



//演示2
//鼠标移动效果
//方式1
$('.divOne').rotate({
 bind: {
 mouseover: function () {
  $(this).rotate({ animateTo: 180 });
 },
 mouseout: function () {
  $(this).rotate({ animateTo: 0 });
 }
 }
});
//方式2
$('.divOne').mouseover(function () {
 $(this).rotate({ animateTo: 180 });
}).mouseout(function () {
 $(this).rotate({animateTo:0});
});



//演示3 不停旋转
//方式1
var angle = 0;
setInterval(function () {
 angle  = 3;
 $('.divOne').rotate(angle);
}, 50);
//方式2
var rotation = function () {
 $('.divOne').rotate({
 angle: 0,
 animateTo: 360,
 callback:rotation
 })
}
rotation();
//方式3
var rotation = function () {
 $('.divOne').rotate({
 angle: 0,
 animateTo: 360,
 callback: rotation,
 easing: function (x, t, b, c, d) {
  return c * (t / d)   b;
 }
 })
}
rotation();



//演示4 点击旋转
//方式1
$('.divOne').click(function () {
 $(this).rotate({
 angle: 0,
 animateTo: 180,
 easing: $.easing.easeInOutExpo
 });
});
var val = 0;
$('.divOne').click(function () {
 val  = 90;
 $(this).rotate({
 animateTo: val
 });
});

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

不信的话,大可以把这段代码拉到IE8里面运行下试试,你只不过是得到一个空的对话框

参数

您可能感兴趣的文章:

  • js兼容的placeholder属性详解
  • js模仿html5 placeholder适应于不支持的浏览器
  • javascript 文本框水印/占位符(watermark/placeholder)实现方法
  • 让低版本浏览器支持input的placeholder属性(js方法)
  • 两种方法基于jQuery实现IE浏览器兼容placeholder效果
  • 使用jQuery快速解决input中placeholder值在ie中无法支持的问题
  • IE下支持文本框和密码框placeholder效果的JQuery插件分享
  • 基于jQuery的让非HTML5浏览器支持placeholder属性的代码
  • jQuery实现的一个自定义Placeholder属性插件
  • jQuery插件EnPlaceholder实现输入框提示文字
  • 基于JS实现html中placeholder属性提示文字效果示例

在IE里面要实现这个要用组件失去焦点blur与得到焦点focus里面做,详细可以参考《JavaScript组件焦点与页内锚点间传值的方法》

参数 类型 说明 默认值
angle 数字 旋转一个角度 0
animateTo 数字 从当前的角度旋转到多少度 0
step 函数 每个动画步骤中执行的回调函数,当前角度值作为该函数的第一个参数
easing 函数 自定义旋转速度、旋转效果,需要使用 jQuery.easing.js
duration 整数 旋转持续时间,以毫秒为单位  
callback 函数 旋转完成后的回调函数
getRotateAngle 函数 返回旋转对象当前的角度
stopRotate 函数 停止旋转

其实可以完全不用jQuery,这里使用这是为了复习下《jQuery通过控制节点实现仅在前台通过get方法完成参数传递》

 

思想很简单,一开始这个文本框默认为#cccccc灰色字体,值为“请输入关键词”,当得到焦点之后,把它的颜色设置为#000000黑色,值为空,一旦其失去焦点,如果值为空,马上把其恢复默认的#cccccc灰色字体,值为“请输入关键词”

演示虽然使用的是图片,但 jqueryrotate 并不只是能运用在图片上,其他元素如 div 等也可以使用。同时,你可以发挥想象,制作出更多关于旋转的特效。

代码如下:

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结web前端,》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜索输入框替换文本</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
</head>
<body>
<form id="test">
  <input id="searchKeyword" type="text" maxlength="30" value="请输入关键词" style="color:#cccccc" />
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
  var isthisnull = true ;
  $("#searchKeyword").focus(function(){
    if ($(this).val() == "请输入关键词" && isthisnull) {
      $(this).val("");
      $(this).attr("style","color:#000000");
      isthisnull = false;
    }
  });
  $("#searchKeyword").blur(function(){
    if ($(this).val() == "") {
      $(this).val("请输入关键词");
      $(this).attr("style","color:#cccccc");
      isthisnull = true;
    }
  });
});
</script>

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

这里注意的是,是加入一个isthisnull的布尔值来判断其是否为空,是为了判断用户是否要输入“请输入关键词”,

您可能感兴趣的文章:

  • jQuery中Nicescroll滚动条插件的用法
  • jquery插件bootstrapValidator数据验证详解
  • jQuery插件实现可输入和自动匹配的下拉框
  • jQuery插件ajaxFileUpload异步上传文件
  • jQuery自适应轮播图插件Swiper用法示例
  • jquery弹出框插件jquery.ui.dialog用法分析
  • jQuery Validate插件实现表单验证
  • jquery插件uploadify多图上传功能实现代码
  • jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
  • jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
  • 详解jQuery插件开发方式

不能认为文本框里面有“请输入关键词”就是空,如果用户自己输入“请输入关键词”呢?

这里也不应该用jquery或者javascript来取color或者style的值是否为"#cccccc"或者“color:#cccccc”来判断,因为通过$(this).css("color")来取color,在不浏览器输出的结果是不一样的,而取style的话,ie会认为这是一个object,而不是字符串

设置一个isthisnull,也可以为后面进一步的表单验证做准备

最终在IE中得到如下效果:

web前端 3

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery页面元素操作技巧汇总》、《jquery选择器用法总结》、《jQuery表单操作总结》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》及《jQuery常见经典特效汇总》

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

您可能感兴趣的文章:

  • 两种方法基于jQuery实现IE浏览器兼容placeholder效果
  • 使用jQuery快速解决input中placeholder值在ie中无法支持的问题
  • IE下支持文本框和密码框placeholder效果的JQuery插件分享
  • 基于jQuery的让非HTML5浏览器支持placeholder属性的代码
  • jQuery实现的一个自定义Placeholder属性插件
  • jQuery实现的placeholder效果完整实例
  • jQuery插件EnPlaceholder实现输入框提示文字
  • jQuery实现HTML5 placeholder效果实例
  • jquery实现(textarea)placeholder自动换行
  • jquery 判断是否支持Placeholder属性的方法
  • jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果

本文由88bf必发唯一娱乐官网发布于web前端,转载请注明出处:jQuery旋转插件jqueryrotate用法详解,jQuery达成的p

关键词: web前端