威斯尼斯人官网jQuery插件pagewalkthrough实现引导页效果_jquery_脚本之家

  欢迎来到网页引导示例DEMO演示页 页面功能介绍引导页的效果是通过一款叫做pagewalkthrough.js的jQuery插件实现的。 点击下一步了解更多...   这里是网站LOGO,点击这里可以直通网站首页。   点击这里可以直接看插件的使用教程。   点击这里去下载源码,免费的哦。。   这是页脚和版权信息。 

$ { // Set up tour $.pagewalkthrough({ name: 'introduction', steps: [ { popup: {content: '#walkthrough-1',type: 'modal' } }, {wrapper: '#logo',popup: {content: '#walkthrough-2',type: 'tooltip',position: 'bottom'} }, {wrapper: 'h2.top_title a',popup: {content: '#walkthrough-3',type: 'tooltip',position: 'bottom'} }, {wrapper: 'a[href="http://files.cnblogs.com/files/hnyei/jq_zhezhaoyd.rar"]', popup: {content: '#walkthrough-4',type: 'tooltip',position: 'right'} }, {wrapper: '#footer p',popup: {content: '#walkthrough-5',type: 'tooltip',position: 'top'} }] }); // Show the tour $.pagewalkthrough;

.demo{text-align:center}.button {display: inline-block;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 22px/100% 'Microsoft yahei',Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba;-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba;-moz-box-shadow: 0 1px 2px rgba;box-shadow: 0 1px 2px rgba; }.button:hover {text-decoration: none;}.button:active {position: relative;top: 1px;}/* green */.green {color: #e8f0de;border: solid 1px #538312;background: #64991e;background: -webkit-gradient(linear, left top, left bottom, from);background: -moz-linear-gradient(top, #7db72f, #4e7d0e);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');}.green:hover {background: #538018;background: -webkit-gradient(linear, left top, left bottom, from);background: -moz-linear-gradient(top, #6b9d28, #436b0c);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');color:#fff}.green:active {color: #a9c08c;background: -webkit-gradient(linear, left top, left bottom, from);background: -moz-linear-gradient(top, #4e7d0e, #7db72f);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');}#walkthrough-content{display:none}#walkthrough-content h3{height:30px; line-height:30px}#walkthrough-content p{line-height:28px}

如上所述正是本文的全体内容了,希望大家能够向往。

明天众多网址不止是介绍,更多的是有一点功用,怎么着让顾客高效的通晓网址有怎样效能吗?这里pagewalkthrough.js插件能帮大家完结,它是三个轻量级的jQuery插件,它能够帮助我们创造贰个遮罩指点层,达成页面效果教导功能,引导产生展现页面内容。

发表评论

电子邮件地址不会被公开。 必填项已用*标注