Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 JavaScript 运动事件函数, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
- <div id="breedsdog">
- <h2 class="title">
- The Dog
- </h2>
- <p class="describe">
- Split between cat,belong to the cat family,cat,cat,is the world's more
- widely
- <br>
- in the family pet.Cats ancestors is presumably desert cats
- </p>
- <div class="breedsdog1">
- <div class="img">
- <img src="img2/labrador.jpg" />
- <a class="lookdog" href="#">
- </a>
- </div>
- <div class="img_txt">
- <p class="chinese">
- 拉布拉多
- </p>
- <p class="english">
- Labrador
- </p>
- <p class="introduce">
- 拉布拉多猎犬因原产地在加拿大的纽芬兰与拉布拉多省而得名。拉布拉多犬是一种中大型犬类,个性忠诚、大气、憨厚、温和、阳光、开朗、活泼,智商极高,也对人很友善,是非常适合被选作经常出入公共场合的导盲犬或地铁警犬及搜救犬和其他工作犬的狗品种,跟哈士奇(西伯利亚雪撬犬)和金毛猎犬并列三大无攻击性犬类,拉布拉多智商位列世界犬类第七。
- </p>
- </div>
- </div>
- </div>
CSS 布局样式省略
现在 a.lookdog 的样式我设为 position:absolutely,宽高设为 0。实现的特效: 当鼠标移入 div.img 上,实现 a.lookdog 的宽高自动展开的缓冲动画,并且展开完毕后,透明度变低的遮罩背景图层。当然我们用 css3 也能实现这种特效,但是 css3 的坑是不完全支持 IE 浏览器,所以用 javascript 来实现运动缓冲动画是最理想的。
javascript
函数封装部分
- //根据类名和父对象ID获取属性节点,解决getelementsByClass对浏览器的兼容性问题
- function getbyclass(classname,parent){
- //传入ID获取父节点,如果该参数为空就为document
- var oParent=parent?document.getElementById(parent):document;
- //定义一个空数组来存放属性节点
- var els=[];
- //定义一个数组存放父对象的所有子节点
- var elements=oParent.getElementsByTagName("*");
- //遍历所有子节点,根据类名把所有的子对象找出来,并且放在els数组内
- for(var i=0;i<elements.length;i++){
- if(elements[i].className==classname){
- els.push(elements[i]);
- }
- }
- return els;
- }
- //根据对象要获取的属性名来得到属性值
- function getStyle(obj,stylename){
- //针对IE浏览器获取样式方法
- if(obj.currentStyle){
- return obj.currentStyle[stylename];
- //针对其他浏览器获取样式方法
- }else if(getComputedStyle(obj,false)){
- return getComputedStyle(obj,false)[stylename];
- }
- }
- //缓冲动画主函数,传参类型:(对象,jaso格式要改变的样式值(可多个),缓冲系数,执行周期时间(值越小速度越快,越大越慢),回调函数(是否有多次动画的播放,可有可无))
- function MoveJason(obj,jason,average,cycle,continuefunction){
- clearInterval(obj.timer);
- obj.timer=setInterval(function(){
- for(var stylename in jason){//针对多效果的缓冲动画
- // obj.style[stylename]=jason[stylename];
- // }
- if(stylename=="opacity"){
- var offvalue=Math.round(parseFloat(getStyle(obj,stylename))*100);
- var speed=(jason[stylename]-offvalue)/average;
- speed=speed>0?Math.ceil(speed):Math.floor(speed);
- if(speed==0){
- clearInterval(obj.timer);
- if(continuefunction) continuefunction();//回调函数,判断是否有多次执行
- }else{
- obj.style[stylename]=(offvalue+speed)/100;
- obj.style.filter="alpha(opacity:"+(offvalue+speed)+")";
- }
- }else{
- var offvalue=parseInt(getStyle(obj,stylename));
- var speed=(jason[stylename]-offvalue)/average;
- speed=speed>0?Math.ceil(speed):Math.floor(speed);
- if(speed==0){
- clearInterval(obj.timer);
- if(continuefunction) continuefunction();
- }else{
- obj.style[stylename]=offvalue+speed+"px";
- }
- }
- }
- },cycle);
- }
页面初始化函数,方法调用
- window.onload = function() {
- var imgdog = getbyclass("img", "breedsdog"); //在父对象breedsdog上找到所有的div.img
- //给所有的div.img添加鼠标移入,鼠标移出事件
- for (var i = 0; i < imgdog.length; i++) {
- imgdog[i].onmouseover = function() {
- var obj = this.children[1];
- MoveJason(obj, {
- "height": 376,
- "width": 206
- },
- 5, 30,
- function() { //缓冲动画的函数调用,当执行完宽高值的缓冲变化,再回调函数执行透明度缓冲变化。以下同理,可以多层嵌套实现多个回调。
- MoveJason(obj, {
- "opacity": 30
- },
- 5, 30);
- });
- }
- imgdog[i].onmouseout = function() {
- var obj = this.children[1];
- MoveJason(obj, {
- "height": 0,
- "width": 0
- },
- 5, 30,
- function() {
- MoveJason(obj, {
- "opacity": 80
- },
- 5, 30);
- });
- }
- }
- }
鼠标移入移出效果图如下,我多加个了几个 div.img,可以看到等宽高变完,然后透明度发生变化。
来源: http://www.phperz.com/article/17/0705/330997.html