javascript实现的又一个不错的滑动导航效果

导航,鼠标放上去看看效果

::你会做，我也要会::

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i0) {eval(t+x+','+y+','+a+','+b+','+c+',0)",' + s+')');return;}
var xx=(parseInt(d.left))?parseInt(d.left):0;
var yy=(parseInt(d.top))?parseInt(d.top):0;
if(parseInt(c)==1) {x+=xx;y+=yy;m=true;c=0;}
else if (c==2) {m=false;clearTimeout(g.p7Magic);}
else {var i=parseInt(a);
if (eval(g.moved)){clearTimeout(g.p7Magic);}
if (xxx){xx=x;}}
if (xx>x){xx-=i;m=true;if(xxy){yy=y;}}
if (yy>y){yy-=i;m=true;if(yy4){
xx+="px";yy+="px";}
d.left=xx;d.top=yy;g.moved=true;eval(t+x+','+y+','+a+','+b+','+c+',0)",'+b+')');
}else {g.moved=false;}
}
//-->

on
1

第一项

第二项

第三项

on 2

第一项

第二项

第三项

on 3

第一项

第二项

第三项
    
    
    

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • js实现移动端导航点击自动滑动效果

    js实现移动端导航点击自动滑动效果

    本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码,供大家参考,具体内容如下 移动端模拟导航可点击自动滑动 0.1.4. 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js]. 废话不多说直接上代码: /* * 移动端模拟导航可点击自动滑动 0.1.4 * Date: 2017-01-11 * by: xiewei * 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js] */ (function ($) { $.

  • JavaScript实现滑动导航栏效果

    JavaScript实现滑动导航栏效果

    本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.

  • javascript实现的又一个不错的滑动导航效果

    导航,鼠标放上去看看效果 ::你会做,我也要会:: function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all)

  • jQuery实现的滑块滑动导航效果示例

    jQuery实现的滑块滑动导航效果示例

    本文实例讲述了jQuery实现的滑块滑动导航效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net jquery滑动导航</title> <style> *{margin: 0;padding: 0;box-sizing: border

  • JS实现滑动导航效果

    JS实现滑动导航效果

    本文实例为大家分享了JS实现滑动导航效果的具体代码,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max

  • 一个不错的渐隐文字效果第1/2页

    我想实现一个,点一下按钮,text里面的文字渐渐消失,换成别的文字后,又渐渐出现的功能. 主要是这个函数 function chgtext() {         hidetext();         ide++;         document.all.title.value=ide;         showtext(); } 点一下执行一次这个函数,可是实现不了,请大家帮忙改一下,谢谢 无标题文档 var col=153; function hidetext() { document.

  • 推荐一个不错的图片浏览效果

    推荐一个不错的图片浏览效果

    受那位WPSXXX的 IMG大于DIV 的启发 写的  有不足之处 如果有什么好的修改或建议 希望能给我一份copy 谢谢 sjx.saxon@gmail.com Map Image * {margin:0px auto;padding:0px;text-align:center;} * {font-size:9pt;font-family:Arial;} body {margin-top:20px;} body{-moz-user-select: none;-khtml-user-select

  • 一个不错的动感导航菜单

    <style> dl{width:150px;background:#00f url(bottom.gif) no-repeat left bottom;color:#fff;padding-bottom:5px;} dt{background:#00f url(top.gif) no-repeat top left;padding:10px 10px 10px 20px;font:14px/1.5em arial;border-bottom:1px solid #fff;} dd{margi

  • JS仿淘宝实现的简单滑动门效果代码

    JS仿淘宝实现的简单滑动门效果代码

    本文实例讲述了JS仿淘宝实现的简单滑动门效果代码.分享给大家供大家参考.具体如下: 这是一个简单的仿淘宝滑动门效果代码,个人感觉真的挺不错,以前有过一款和这个差不多.在滑动门里你可以再次布局你的网页,可以做成一个功能超强大的导航,原示例是一个拼音索引程序,改成菜单也是可以的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-taobao-simple-hdm-style-demo/ 具体代码如下: <!DOCTYPE html PUBL

  • 基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

    基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

    内容滑动切换应用非常广,常见的有幻灯片焦点图.画廊切换等.随着WEB前端技术的广泛应用,内容滑动切换效果占据着web页面重要地位,因此本站Helloweba特别给广大前端爱好者安排了浅显易懂的内容滑动切换效果的开发教程. 先给大家展示下效果图,感觉还不错请参数实现代码,具体效果如下所示: 效果展示      源码下载 本次教程分三个部分: 1.使用jQuery开发基本的内容滑动切换效果, 2.支持移动端触控自适应的内容滑动切换效果, 3.封装内容滑动切换效果jQuery插件. 本文讲解第一部分,

  • js实现百度联盟中一款不错的图片切换效果完整实例

    本文实例讲述了js实现百度联盟中一款不错的图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js实现百度联盟中的一个不错的图片切换效果</title> <body> <script> var links = new Array(); links[1] = "http://www.baidu.com/"; links[2] = "http://www.jb5

  • Android仿微信5实现滑动导航条

    本文实例为大家分享了Android 仿微信5滑动导航效果,供大家参考,具体内容如下 ViewPageAdapter.java package com.rong; import java.util.ArrayList; import java.util.List; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.View; publi

随机推荐