css鼠标经过字体抖动,jQuery+css3实现文字跟随鼠标的上下抖动
/* 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;}
- 我们内地,大红撒谎道夫们内地道夫们内地
- 方法我阿道道夫们内地夫们内大红撒谎道夫们内地道夫们内地地,大红撒谎
- 是我们内地,道夫们内地大红撒谎
- 大红撒方法我阿道道夫们内地夫们内大红撒谎道夫们内地道夫们内地地谎
- 我们内地,大红撒谎道夫们内地道夫们内地
- 方法我阿道道夫们内地夫们内大红撒谎道夫们内地道夫们内地地,大红撒谎
- 是我们内地,道夫们内地大红撒谎
$(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
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
arrys.push(hovtexta[j].replace(hovtexta[j],""+hovtexta[j]+""))
};
hov.eq(i).find("a").html(arrys);
var hovtextspan=hov.eq(i).find("a").find("span").length;
for(var z=0;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
});
css鼠标经过字体抖动,jQuery+css3实现文字跟随鼠标的上下抖动相关推荐
- html头像转动,基于jquery实现人物头像跟随鼠标转动
一款非常乖巧的人物头像跟随鼠标转动效果,在浏览器屏幕内,人物脸庞始终面向鼠标转动.其实现原理即同一张图片上作出人物上下左右不同面向的效果,利用JS调用背景图片的位置,以此实现人物"转脸&qu ...
- C#文字跟随鼠标移动
原文转自:http://blog.csdn.net/plutus_sutulp/article/details/7817781 1.WinForm中,左击后鼠标右侧会出现文字,会跟随鼠标一起移动.放开 ...
- 用flash做连线题(线的一端跟随鼠标)
帮同事做课件,其中要做个连线测试题,需要实现用户可以用鼠标从一个点拉出一根线来的效果,实际上是线 的一端跟随鼠标,改变线的长度和倾斜角度.这和一般的图象或文字跟随鼠标有点区别.因为把高中的三角函数忘光 ...
- js-拖拽-div跟随鼠标的拖拽而移动
拖拽: 鼠标按下目标区域---开始拖拽---onmousedown __并列__鼠标移动时候被拖拽的元素跟随鼠标移动-onmousemove _并列_ 当鼠标松开时,被拖拽的元素固定在当前位置onmo ...
- Unity UGUI 鼠标悬停一段时间显示Text文字
Unity UGUI 鼠标悬停一段时间显示Text文字 using System.Collections; using System.Collections.Generic; using UnityE ...
- 前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
- 鼠标悬停字体抖动_快速提示:解决悬停状态下的字体粗细问题
鼠标悬停字体抖动 Have you ever tried to change the value of the font-weight property on link states? If yes, ...
- 在php里让字体划过变色,鼠标划过字体时如何用css来实现字体变色?(代码实测)...
当我们在浏览网页时,鼠标划过某段文字会出现变色效果,这就是css字体变色,一方面是为了主动吸引人用户目光去点击,另一方面是为了防止用户点击错其他文字段落.其实这种css鼠标经过字体变色的效果是非常容易 ...
- html css小圆圈,jquery+css3实现会动的小圆圈效果
本文实例讲述了jquery+css3实现会动的小圆圈效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 那些变换颜色的小豆豆 h1{font-size:16px;} .circ ...
最新文章
- 比特币脚本及交易分析 - 智能合约雏形
- java调用系统时间函数_JAVA自学笔记:不使用系统函数来计算日期处于当年的第多少天...
- python数据科学手册_小白入门Python数据科学
- linux usb组合设备,USB组合设备(5)
- OpenCV Fast角点检测
- 【hdoj_2079】选课时间(母函数)
- 2020/Province_C_C++_A/A/门牌制作
- Java与C、C++的区别
- leetcode 1818. 绝对差值和
- DroidBox的环境搭建与使用(Android沙箱、未验证)
- 阶梯剖视图_*小星推荐*—模具图纸剖视图的种类及画法,你学到了吗?
- 问题 E: 求1+2+...+n=?
- linux文件自动改名,C#如何在生成文件夹或者文件时候自动重命名
- 卡西欧(casio)Fx-5800p程序调试器||模拟器V1.0
- PDF复制文字到Word中太过混乱的解决方法
- c语言入门视频教程(C语言入门视频教程 百度网盘)
- Linux运维工程师面试知识点汇总(二)
- Arduino ESP8266 通过WiFi、串口与DMX灯光通讯
- 法院拍卖房产税费由谁承担
- 免费下载QFP器件手工焊接指南