jQuery+css3实现文字跟随鼠标的上下抖动


Posted in Javascript onJuly 31, 2015

css3过渡属性结合jq,如果直接复制代码运行,需要加载一个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>m</title>
</head>
<style>
/* CSS 预设*/
*{ margin:0; padding:0;}
a{ text-decoration:none;}
img{ border:none;}
ul{ list-style:none;}
body{ color:#222121; font-size:12px; font-family:"宋体"; background-color:#fefefe}
.clearfix:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;}
.clearfix{ zoom:1;}
/*clear*/
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
/*demo4*/
.demo{ margin:0 50px;}
.hover-list{ line-height:40px; width:500px;}
.hover-list li{ height:40px; border-bottom:1px solid #969; position:relative;}
.hover-list li a span{ width:12px; height:40px;cursor:pointer;transition:all .1s cubic-bezier(.06,1.15,1,1.4) 0s;}
.hover-list li a{ color:#39F; cursor:pointer;}
</style>
<body>
<div class="demo">
  <div class="wrapper box-con">    
    <ul class="hover-list">
      <li><a href="http://www.miaov.com/2013/#" target="_blank">我们内地,大红撒谎道夫们内地道夫们内地</a></li>
      <li><a href="#2">方法我阿道道夫们内地夫们内大红撒谎道夫们内地道夫们内地地,大红撒谎</a></li>
      <li><a href="#2">是我们内地,道夫们内地大红撒谎</a></li>
      <li><a href="#2">大红撒方法我阿道道夫们内地夫们内大红撒谎道夫们内地道夫们内地地谎</a></li>
      <li><a href="#2">我们内地,大红撒谎道夫们内地道夫们内地</a></li>
      <li><a href="#2">方法我阿道道夫们内地夫们内大红撒谎道夫们内地道夫们内地地,大红撒谎</a></li>
      <li><a href="#2">是我们内地,道夫们内地大红撒谎</a></li>
    </ul>
  </div>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
 
//demo
  //可以变化的参数
  var setccid=$(".hover-list");//设置ul的class,添加效果
  var setleft=12;//设置字与字之间的left值
  var setskip=10;//设置上下抖动值
   
  var hov=setccid.children("li");
  for(var i=0;i<hov.length;i++){
    var hovtext=hov.eq(i).find("a").html();
    var hovtextl=hovtext.length;
    //alert(hovtextl)
    var hovtexta=hovtext.split("");
    var arrys=[];
    for(var j=0;j<hovtexta.length;j++){
      arrys.push(hovtexta[j].replace(hovtexta[j],"<span>"+hovtexta[j]+"</span>"))
    };
    hov.eq(i).find("a").html(arrys);
    var hovtextspan=hov.eq(i).find("a").find("span").length;
    for(var z=0;z<hovtextspan;z++){
      hov.eq(i).find("a").find("span").eq(z).css({position:"absolute",top:"0px"});
      hov.eq(i).find("a").find("span").eq(z).css('left',z*setleft);
    }
  };
   
  setccid.children("li").find("a").children("span").hover(function(event){
    var sppz=$(this).index();
    var sppzp=$(this).parent().children("span");
    var sppzpl=$(this).parent().children("span").length;
    var sppy=$(this).offset().top;
    var ey=event.pageY;
    var chay=sppy+$(this).height()/2;
    var sppcony=$(this).position().top; 
    if(ey>=chay) {
      $(this).css('top',sppcony+setskip);
      var lla=sppcony+setskip;
      var lll=lla;
      var llr=lla;
      var teshu=(sppz-lla)>0?sppz-lla:0;    
      for(var xx=sppz+1;xx<=sppz+lla;xx++){
        llr=llr-1;
        sppzp.eq(xx).css('top',llr);   
      };
      for(var x=sppz-1;x>=teshu;x--){
        lll=lll-1;
        sppzp.eq(x).css('top',lll); 
      }; 
    }else{
      $(this).css('top',sppcony-setskip);
      var lla=sppcony-setskip;
      var lll=lla;
      var llr=lla;
      var teshu=(sppz+lla)>0?sppz+lla:0;
      for(var xxxx=sppz+1;xxxx<=sppz-lla;xxxx++){
        llr=llr+1;
        sppzp.eq(xxxx).css('top',llr);
      }; 
      for(var xxx=sppz-1;xxx>=teshu;xxx--){
        lll=lll+1;
        sppzp.eq(xxx).css('top',lll);
      };           
    }    
  },function(event){
    $(this).css('top',"0px");
    $(this).parent().children("span").css('top',"0px");
  });
//end    
});
</script>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
利用javascript中的call实现继承
Jan 22 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
微信小程序webview 脚手架使用详解
Jul 22 Javascript
JavaScript实现图片轮播的方法
Jul 31 #Javascript
基于bootstrap3和jquery的分页插件
Jul 31 #Javascript
jquery-tips悬浮提示插件分享
Jul 31 #Javascript
javascript实现检验的各种规则
Jul 31 #Javascript
纯JS实现本地图片预览的方法
Jul 31 #Javascript
javascript动画算法实例分析
Jul 31 #Javascript
jquery实现手机号码选号的方法
Jul 31 #Javascript
You might like
文章推荐系统(二)
2006/10/09 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
python的类方法和静态方法
2014/12/13 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
Python定义一个函数的方法
2020/06/15 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
草莓网官网:StrawberryNET
2019/08/21 全球购物
this关键字的作用
2016/01/30 面试题
会计岗位描述
2014/02/22 职场文书
社区服务活动总结
2014/05/07 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书